本文实例讲述了 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 选择器用法总结
来源: http://www.jb51.net/article/135087.htm