jQuery实现鼠标响应式淘宝动画效果示例
栏目: 编程语言 · JavaScript · 发布时间: 6年前
内容简介:这篇文章主要介绍了jQuery实现鼠标响应式淘宝动画效果,涉及jQuery事件响应及页面元素属性动态操作相关使用技巧,需要的朋友可以参考下
本文实例讲述了jQuery实现鼠标响应式淘宝动画效果。分享给大家供大家参考,具体如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Jquery淘宝动画</title> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.js"></script> <style> * { margin: 0; padding: 0; font-family:"微软雅黑" } #box{ padding-left:20px; background-color:#f9f9f9; border:1px solid #ccc; width:236px; height:250px; margin:0 auto; } #box a{ width:50px; height:60px; border:1px solid #ccc; float:left; margin:10px 10px; background-color:#FFFFFF; text-align:center; font-size:14px; position:relative; } #box a i{ position:absolute; top:15px; left:18px; } #box a p{ position:absolute; top:36px; left:5px; } #box a{ cursor:pointer; } </style> </head> <body> <div id="box"> <a><i><img src="rec_view(1).png"/></i><p>文字玩</p></a> <a><i><img src="rec_view(1).png"/></i><p>文字玩</p></a> <a><i><img src="rec_view(1).png"/></i><p>文字玩</p></a> <a><i><img src="rec_view(1).png"/></i><p>文字玩</p></a> <a><i><img src="rec_view(1).png"/></i><p>文字玩</p></a> <a><i><img src="rec_view(1).png"/></i><p>文字玩</p></a> <a><i><img src="rec_view(1).png"/></i><p>文字玩</p></a> <a><i><img src="rec_view(1).png"/></i><p>文字玩</p></a> <a><i><img src="rec_view(1).png"/></i><p>文字玩</p></a> </div> <script> $(function(){ $("#box a").mouseenter(function(){ $(this).find("i").animate({top:"-15px",opacity:"0"},300, function(){ $(this).css({top:"25px"}); $(this).animate({top:"15px",opacity:"1"},200) }) }) }); </script> </body> </html>
该动画可实现鼠标滑过时渐变向上飞出的视觉效果。
更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
以上所述就是小编给大家介绍的《jQuery实现鼠标响应式淘宝动画效果示例》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
python学习手册(原书第5版)
马克·卢茨 / 机械工业出版社 / 2018-10 / 219
如果你想动手编写高效、高质量并且很容易与其他语言和工具集成的代码,本书将快速地帮助你利用Python提高效率。本书基于Python专家的流程培训课程编写,内容通俗易懂。本书包含很多注释的例子和插图,以帮助你开始使用Python2.7和3.3。每章都包含关于Python语言的重要组成部分的一节课。本书主要内容:了解Python的主要内置对象类型,如数字、列表和字典;创建和处理对象的Python语句,......一起来看看 《python学习手册(原书第5版)》 这本书的介绍吧!