分类目录

链接

2013年 10月
 123456
78910111213
14151617181920
21222324252627
28293031  

近期文章

热门标签

新人福利,免费薅羊毛

现在位置:    首页 > 前端 > 正文
JS仿淘宝图片弹跳效果
前端 暂无评论 阅读(1,706)

JS仿淘宝图片弹跳效果,开始我以为是CSS3写的,后来查看源码发现是JS弄的,但是他们的JS是加了密的,于是自己试着写了个,下面上源码!

 

但是有很多不理想的地方,希望大家共同交流进步,源文来自数据库之家 ,转载注明出处哈!

 

 

  1. <html>
  2.  
  3. <head>
  4.  
  5.     <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.4.2/jquery.min.js"></script>
  6.  
  7.     <script>
  8.  
  9.         $(function () {
  10.  
  11.             $(".box1").hover(
  12.  
  13.             function () { setTimeout(showBox, 300); },
  14.  
  15.             function () { $(this).find("div").css("top", "-125"); }
  16.  
  17.             );
  18.  
  19.         });
  20.  
  21.         function showBox() {
  22.  
  23.             demo($(".box1").find("div"));
  24.  
  25.         }
  26.  
  27.         var i = null;
  28.  
  29.         function demo(obj) {
  30.  
  31.             i >> clearInterval(i);
  32.  
  33.             var t = 1;
  34.  
  35.             var times = 5;
  36.  
  37.             var top = obj.position().top;
  38.  
  39.             i = setInterval(function () {
  40.  
  41.                 console.log("top:" + top + "    t:" + t);
  42.  
  43.                 if (times == 0) {
  44.  
  45.                     clearInterval(i);
  46.  
  47.                     obj.css("top", 0);
  48.  
  49.                 }
  50.  
  51.                 top = obj.position().top + t;
  52.  
  53.                 if (top < 0) {
  54.  
  55.                     t += 1;
  56.  
  57.                     obj.css("top", top);
  58.  
  59.                 } else {
  60.  
  61.                     t = (> 0) ? t * (-1) * 0.5 : 0;
  62.  
  63.                     obj.css("top", 0);
  64.  
  65.                     times--;
  66.  
  67.                 }
  68.  
  69.             }, 20);
  70.  
  71.         }
  72.  
  73.     </script>
  74.  
  75.     <style>
  76.         body {
  77.             margin: 125px 0;
  78.             padding: 0;
  79.         }
  80.  
  81.         div {
  82.         }
  83.  
  84.         .box1 {
  85.             height: 125px;
  86.             width: 125px;
  87.             background: #FAC26D;
  88.             position: relative;
  89.             overflow: hidden;
  90.         }
  91.  
  92.         .box2 {
  93.             height: 125px;
  94.             width: 125px;
  95.             background: #7DDAE1;
  96.             position: absolute;
  97.             top: -125px;
  98.             text-align: center;
  99.         }
  100.     </style>
  101.  
  102. </head>
  103.  
  104. <body>
  105.  
  106.     <div class='box1'>
  107.  
  108.         <div class='box2'>
  109.  
  110.             <span style="margin-top:20px;"><br></br>欢迎使用!</span>
  111.        </div>
  112.    </div>
  113.  
  114. </body>
  115.  
  116. </html>

查看效果:效果示例

 

============ 欢迎各位老板打赏~ ===========

本文版权归Bruce's Blog所有,转载引用请完整注明以下信息:
本文作者:Bruce
本文地址:JS仿淘宝图片弹跳效果 | Bruce's Blog

发表评论

留言无头像?