Question

这是我的主页：

<%@ Page Language="C#" MasterPageFile="~/Views/Home/Home.Master" Inherits="System.Web.Mvc.ViewPage" %>

<asp:Content ID="Content2" ContentPlaceHolderID="IndicationContentPlaceHolder" runat="server">
<table id="home" style="margin-left: auto; margin-right:auto;">
    <td id="homeLinks">
        <div style="padding-left:35px;" id="homeListing" class="containerMid">
            <div id="homeView">
                <table style="margin-left: auto; margin-right:auto;">
                    <tr>
                        <tr>
                            <td id="btnIcOld" style="text-align:center;cursor:pointer;">
                                <img src="<%= VirtualPathUtility.ToAbsolute("~/img/chic/Load.png")%>" />
                            </td>
                            <td id="btnIc" style="text-align:center;cursor:pointer;">
                                <img src="<%= VirtualPathUtility.ToAbsolute("~/img/chic/Bar_Chart.png")%>" />
                            </td>
                            <td id="btnPricing" style="text-align:center;cursor:pointer;">
                                <img src="<%= VirtualPathUtility.ToAbsolute("~/img/chic/Pie_Chart_disabled.png")%>" />
                            </td>
                            <td id="btnSheets" style="text-align:center;cursor:pointer;">
                                <img src="<%= VirtualPathUtility.ToAbsolute("~/img/chic/Line_Chart_disabled.png")%>" />
                            </td>
                            <td id="btnPort" style="text-align:center;cursor:pointer;">
                                <img src="<%= VirtualPathUtility.ToAbsolute("~/img/chic/Modify_disabled.png")%>" />
                            </td>
                            <td id="btnAdmin" style="text-align:center;cursor:pointer;">
                                <img src="<%= VirtualPathUtility.ToAbsolute("~/img/chic/Profile_disabled.png")%>" />
                            </td>
                        </tr>
                        <tr>
                            <td id="Td1">
                                <b>Indications Calculator | </b>
                            </td>
                            <td id="lblIc">
                                <b>Indications Calculator - Beta | </b>
                            </td>
                            <td id="lblPricing">
                                <b>Managing Pricing Triggers | </b>
                            </td>
                            <td id="lblSheets">
                                <b>Creating Pricing Sheets | </b>
                            </td>
                            <td id="lblPort">
                                <b>Portfolio Analysis | </b>
                            </td>
                            <td id="lblAdmin">
                                <b>Administration</b>
                            </td>
                        </tr>
                    </tr>
                </table>
            </div>
        </div>
    </td>
</table>

<div id="pageMessage"></div>

<script>
    $(document).ready(function () {

        $('#btnIc').live('click', function () {
            window.location.href = "<%=Url.Action("Indications") %>";
        });

        $('#btnIcOld').live('click', function () {
            window.location.href = 'https://extranetint/swap';
        });

        $('#btnPricing').live('click', function () {
            //window.location.href = "<%=Url.Action("Triggers") %>";
        });

        $('#btnSheets').live('click', function () {
            //window.location.href = "<%=Url.Action("Sheets") %>";
        });

        $('#btnPort').live('click', function () {
            //window.location.href = "<%=Url.Action("Analysis") %>";
        });

        $('#btnAdmin').live('click', function () {
            //window.location.href = "<%=Url.Action("Admin") %>";
        });

    });
</script>
</asp:Content>

我如何使用JQuery（或任何其他东西）在我的图像上实现鼠标悬停效果，当您将鼠标悬停在图像上时它们会稍微增长？我尝试使用JQuery动画，但出于某种原因，我无法让它工作。

谢谢！

Answer 1

如果你真的不关心Internet Explorer，你可以使用一点CSS3。

#homeView img {
    -moz-transition: -moz-transform 0.3s;
    -o-transition: -o-transform 0.3s;
    -webkit-transition: -webkit-transform 0.3s;
    -ms-transition: -ms-transform 0.3s;
    transition: transform 0.3s;
}
#homeView img:hover {
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
}

当用户悬停图像时，图像将被放大。适用于当前版本的Chrome，Safari，Opera和即将推出的Firefox 4.在Firefox 3.5和3.6中，您将看到放大效果，过渡。

演示：http://jsfiddle.net/thai/WNmdh/1/

Answer 2

我实际上认为您的主要问题是使用.btnIc代替#btnIc。此外，您定位的是td，而不是其中的img。以下是使用div而不是td和img的工作示例：http://jsfiddle.net/zyKde/

如果您希望它能够处理您的代码，您应该在javascript代码中将$('#btnIc .img')更改为$('#btnIc img')。

（编辑）另外，如果您要使用position: relative，请确保在position: absolute和td上设置正确的img和top left。

Answer 3

有一个关于你想要什么的教程here - 几乎和你的jsfiddle粘贴一样。干杯！

Answer 4

只需在图片中添加class="btnIc"属性，您的jQuery示例就可以了。

Answer 5

您可以将悬停事件绑定到页面中的所有img标记，或仅绑定所需的标记，并使用2个函数设置mousein和mouseout的大小动画

$(function(){
    $('img').hover(function(){
        $(this).animate({
            height: '110%',
            width: '110%',
        });
    },
    function(){
        $(this).animate({
            height: '100%',
            width: '100%',
        });
    });
});

使用JQuery为我的图像添加动画

6 个答案: