这是我的主页:
<%@ 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 animate,但出于某种原因我无法让它工作。
谢谢!
最佳答案
如果您不太喜欢 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 中,您将看到放大效果,只是没有过渡。
关于javascript - 使用 JQuery 为我的图像添加动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4696174/