添加动画我与jQuery图片

这里是我的主页:

<%@ 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的动画,但由于某种原因,我无法得到它的工作。

谢谢!

--------------解决方案-------------

您可以悬停事件绑定到是必需的,使用2个功能动画的大小mousein和鼠标移开在您的网页或只是那些所有的img标签

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

如果你不很在意IE浏览器,你可以只使用一个位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/

看看这个网站,使用越来越多的作用。

其实,我觉得你的主要问题是使用.btnIc代替#btnIc 。 此外,您的目标td ,而不是img里面。 这里有一个工作的例子有div的S代替tdimg :http://jsfiddle.net/zyKde/

如果你想让它在你的代码工作,你应该改变$('#btnIc .img')$('#btnIc img')在JavaScript代码。

(编辑)也,一定要设置正确的position: relativeposition: absolute在你的tdimg ,如果你想使用topleft

有你想在这里正是一个教程 - 相当多的工作方式为你的jsfiddle糊一样。 干杯!

只需添加一class="btnIc"属性图像(S)和您的jQuery的例子会工作。

分类:JavaScript的 时间:2012-01-01 人气:0
分享到:

相关文章

  • 使用jQuery和ASP.NET MVC以及任何明确的准则和最佳做法? 2012-05-06

    有没有使用jQuery和ASP.NET MVC以及任何明确的准则和最佳做法? 文章,博客文章,书籍? 不仅MVC的,但它们与已知的良好途径和使它们一起工作的图案之间的连接. --------------解决方案------------- 由于jQuery的已经变得如此受欢迎,你可能会考虑链接到已经使用的选择(如谷歌)你的JavaScript库一个更大的场地. 我推迟抽出解释戴夫·沃德的博客文章. 概括起来讲,它建议使用像谷歌的Ajax库服务来提供的脚本. 如果你不希望使用谷歌的库加载脚本,你可以

  • 问题补充jQuery来ASP.NET MVC应用程序 2012-08-21

    我有一个问题,增加了jQuery的ASP.NET MVC应用程序. 我加了jQuery的Site.Master这样的: <script src="../../Scripts/jquery-1.4.1.js" type="text/javascript"></script> 在Visual Studio 2010中这是确定 - 现在我发布一个应用到Web服务器(IIS 7)像一个文件夹: h ttp://localhost/AnApplicat

  • 发送JavaScript对象具有未知属性​​ASP.NET MVC控制器 2015-01-10

    我看了相当长的一段博客和StackOverflow上关于如何将JavaScript对象发送到一个asp.net MVC控制器的答案. 但我所看到的所有例子到目前为止,需要你知道的JavaScript对象有哪些属性(因为所有的JavaScript对象转换为C#对象). 当我使用PageMethods在asp.net web表单我可以把任何复杂的JavaScript对象或数组(即使是分层数据),它会被转换成一个字典,我可以迭代. 任何机会,我可以做在asp.net MVC类似的东西? -------

  • 有没有一种方法来触发与jQuery或ASP.NET MVC的服务器事件? 2012-05-24

    我有这样的情况:我有一个页面,我有一天的事件列表. 而这些事件可以他们的状态改为"已确认"或"取消". 但是,当我,例如,点击"确认",此状态将保存在SQL Server上,这状态显示"已确认". 但是,如果其他人有开在我改变事件状态下,这同一个页面,这个人将看不到新的状态. 他只会看是否重新加载页面. 我知道,有一个阿贾克斯设置超时每5 ... 10 ... 15秒后刷新页面. 但我在想,如果有一个jQuery或ASP.NE

  • 使用jQuery和ASP.NET MVC嵌入式部件 2012-04-07

    我需要一些建议的最佳方法,在开发我的网站的用户可以用它来展示我们在其网站上的内容嵌入部件使用. 比方说,我们有使用jQuery插件来呈现一些内容,我们希望给我们的客户提供一个简单的方法来将其嵌入自己的网站. 一种选择是使用的iframe,但我们知道这是相当侵入性的,有一些问题. 我想知道你对这种观点了. 另一种方法可以让这样的代码,以显示项目#23: <DIV id="mysitewidget23"><script src="http://example.c

  • JavaScript的网址自动分辨率Asp.Net MVC 2012-06-11

    我正在运行Asp.Net MVC 2.0,和我遇到了一个问题,我的JS调用. 这就是我在我的: <link href="../../Content/Site.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="../../Scripts/jquery.js"></script&

  • 是jQuery和ASP.NET MVC 3真正的跨浏览器? 2012-06-21

    我可以假设,基于ASP.NET MVC3(剃刀和HTML 5)和jQuery的解决方案将是完全跨浏览器和跨平台? 我知道我应该只使用jQuery的选择器和事件,而不是将其与老式生的javascript混用,如果我们按照这个意见,将我们结束了一个完整的跨浏览器的应用程序在IE浏览器,浏览器,Safari和Opera的工作没有问题,在iPad上呢? 正如有人做过这样的事真,得到了良好的效果? 我们计划使用的DevExpress MVC扩展2011 V1或更高(如果可用). 谢谢! ---------

  • 使用JavaScript和CSS文件在ASP.Net MVC视图? 2012-12-30

    我有一些麻烦一个jQuery插件,在我的MVC视图正常工作. 这里是什么样子的时刻:(我复制了所有需要的jQuery包含和css文件到网站/脚本文件夹) <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> <script src="/Scripts/jquery-1.3.2.js" type="t

  • 如何调用使用JQuery在ASP.NET MVC控制器动作 2013-02-04

    我一直在阅读上的这一段时间,发现可以通过调用一个控制器操作: $.ajax("MyController/MyAction", function(data) { alert(data); }); 这是否意味着我要补充的MicrosoftMvcAjax.js或MicrosoftAjax.js与Jquery的LIB一起? 此外,什么应该第二个参数包含在$阿贾克斯()函数? 最后,在计算器或外部网站,可能是W / AJAX和jQuery在asp.net的MVC有益的其他任何链接? 谢谢. --

  • 用jQuery的ASP.NET MVC 3书籍/教程? 2013-02-05

    是否有在ASP.NET MVC 3 jQuery的任何书籍/教程? 我需要学习如何使用Ajax的联系以及如何提交ajax的形式等. 如果没有任何书籍/ MVC的3教程尚未MVC 2西港岛线也足够了. PS我不知道该怎么做基本的东西与MS AJAX工具包随MVC --------------解决方案------------- 最好的2本书是: 临ASP.NET MVC 2:http://www.amazon.com/ASP-NET-Framework-Second-Experts-Voice/dp

Copyright (C) 55228885.com, All Rights Reserved.

55228885 版权所有 京ICP备15002868号

processed in 0.620 (s). 10 q(s)