Top

拉勾网图片特效实现二

效果图如下

实现源码

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>图片选项卡</title>
  6     <style type="text/css">
  7         * {
  8             margin: 0;
  9             padding: 0;
 10             font-family: Tahoma, Arial, Helvetica, "Microsoft YaHei New", "Microsoft Yahei", "微软雅黑", 宋体, SimSun, STXihei, "华文细黑", sans-serif;
 11         }
 12         .banner {
 13             width: 744px;
 14             height: 113px;
 15             margin: 10px auto;
 16             overflow: hidden;
 17         }
 18         .banner ul {
 19             list-style-type: none;
 20         }
 21         .banner ul li {
 22             float: left;
 23             position: relative;
 24         }
 25         .banner ul li+li {
 26             margin-left: 8px;
 27         }
 28 
 29         .boxLi {
 30             width: 113px;
 31             height: 113px;
 32             overflow: hidden;
 33         }
 34 
 35         .box {
 36             position: absolute;
 37             background: #333;
 38             background:rgba(0,179,138,.9);
 39             filter:alpha(opacity=90);
 40             width: 100%;
 41             height: 100%;
 42             color: #fff;
 43         }
 44         .box {
 45             transtion: all 300ms ease;
 46         }
 47         .box em {
 48             display: block;
 49             font-style: normal;
 50             height: 5px;
 51             margin: 0 8px;
 52             background: rgba(255,255,255,.3);
 53             filter:alpha(opacity=30);
 54         } 
 55         .box h2 {
 56             font-size: 24px;
 57             height: 24px;
 58             line-height: 24px;
 59             margin:10px 8px 8px;
 60             font-weight: 400;
 61             text-align: center;
 62             overflow: hidden; 
 63         }
 64 
 65         .box p {
 66             font-size: 12px;
 67             line-height: 18px;
 68             margin: 6px 8px;
 69         }
 70 
 71         .clearfix:after { 
 72             content:".";
 73             display:block;
 74             height:0;
 75             visibility:hidden;
 76             clear:both;
 77         } 
 78         .clearfix { *zoom:1; }
 79     </style>
 80     <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
 81     <script type="text/javascript">
 82         $(function() { 
 83             $(".boxLi").bind("mouseenter mouseleave",function(e) { 
 84                 var w = $(this).width();
 85                 var h = $(this).height();
 86                 //鼠标方向
 87                 var x=(e.pageX-this.offsetLeft-(w/2))*(w>h?(h/w):1);
 88                 var y=(e.pageY-this.offsetTop-(h/2))*(h>w?(w/h):1);
 89                 var direction=Math.round((((Math.atan2(y,x)*(180/Math.PI))+180)/90)+3)%4;
 91                 var eventType = e.type;
 92                 var position=[{left:0,top:-113},{left:113,top:0},{left:0,top:113},{left:-113,top:0}];
 93                 if(eventType== 'mouseenter'){ 
 94                     $(this).find(".box").css(position[direction]).animate({left:0,top:0},400);
 95                 }else{ 
 96                     $(this).find(".box").animate(position[direction],400); 
 97                 }
 98             })
 99         })
100     </script>
101 
102 </head>
103 <body>
104     <div class="banner">
105         <ul class="clearfix">
106             <li class="boxLi">
107                 <img src="images/item_01.jpg" width="113" height="113">
108                 <div class="box">
109                     <h2 class="Mokitech">倍斯特</h2>
110                     <em></em>
111                     <p>制作精良应用产品，专注欧美等国际市场。</p>
112                 </div>
113             </li>
114             <li class="boxLi">
115                 <img src="images/item_02.jpg" width="113" height="113">
116                 <div class="box">
117                     <h2 class="Mokitech">Mokitech</h2>
118                     <em></em>
119                     <p>制作精良应用产品，专注欧美等国际市场。</p>
120                 </div>
121             </li>
122             <li class="boxLi">
123                 <img src="images/item_03.jpg" width="113" height="113">
124                 <div class="box">
125                     <h2 class="Mokitech">有道事成</h2>
126                     <em></em>
127                     <p>以人为本，员工是公司最大的财富</p>
128                 </div>
129             </li>
130             <li class="boxLi">
131                 <img src="images/item_04.png" width="113" height="113">
132                 <div class="box">
133                     <h2 class="Mokitech">恒图科技</h2>
134                     <em></em>
135                     <p>我们共同打造世界一流的数字图像技术公司！</p>
136                 </div>
137             </li>
138             <li class="boxLi">
139                 <img src="images/item_05.png" width="113" height="113">
140                 <div class="box">
141                     <h2 class="Mokitech">Mokitech</h2>
142                     <em></em>
143                     <p>制作精良应用产品，专注欧美等国际市场。</p>
144                 </div>
145             </li>
146             <li class="boxLi">
147                 <img src="images/item_06.jpg" width="113" height="113">
148                 <div class="box">
149                     <h2 class="Mokitech">天峰世纪</h2>
150                     <em></em>
151                     <p>以人为本，员工是公司最大的财富</p>
152                 </div>
153             </li>
154         </ul>
155     </div>
156 </body>
157 </html>

转载 拉勾网顶部轮播图的实现（二）

      js判断鼠标从什么方向进入容器的算法分析

posted @ 2016-09-10 23:54  Avenstar  阅读(236)  评论(0)    收藏  举报