穿墙效果

最新推荐文章于 2021-01-13 00:13:46 发布

转载最新推荐文章于 2021-01-13 00:13:46 发布 · 117 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lixuekui/p/5808738.html

本文介绍了一种使用HTML和CSS创建动态鼠标悬停效果的方法，通过JavaScript增强用户体验，当鼠标悬停在图片上时，会显示一个带有文字的红色透明遮罩层。

  1 <!doctype html>
  2 <html>
  3 <head>
  4 <meta charset="utf-8">
  5 <title>无标题文档</title>
  6 <style>
  7 <style>
  8         *{
  9             margin: 0;
 10             padding: 0;
 11             list-style: none;
 12         }
 13         #ul1{
 14             width: 880px;
 15             margin: 100px auto;
 16         }
 17         #ul1 li{
 18             width: 200px;
 19             height: 200px;
 20             margin: 10px;
 21             float: left;
 22             position: relative;
 23             overflow: hidden;
 24         }
 25         #ul1 li img{
 26             width: 100%;
 27             height: 100%;
 28         }
 29         #ul1 li span{
 30             width: 100%;
 31             height: 100%;
 32             position: absolute;
 33             left: -200px;
 34             top: 0;
 35             background: red;
 36             opacity: 0.3;
 37             font-size: 50px;
 38             line-height: 200px;
 39             text-align: center;
 40             color: #fff;
 41         }
 42 </style>
 43 <script src="move.js"></script>
 44 <script>
 45 function enter(obj,oEvent){
 46     var l=oEvent.clientX-obj.offsetLeft;
 47     var r=obj.offsetLeft+obj.offsetWidth-oEvent.clientX;
 48     var t=oEvent.clientY-obj.offsetTop;
 49     var b=obj.offsetTop+obj.offsetHeight-oEvent.clientY;        
 50     switch(Math.min(l,r,t,b)){
 51         case l:
 52             return 'l';
 53             break;
 54         case r:
 55             return 'r';
 56             break;
 57         case t:
 58             return 't';
 59             break;
 60         case b:
 61             return 'b';
 62             break;
 63     }
 64 }
 65 window.onload=function(){
 66     var aLi=document.getElementsByTagName('li');
 67     var aSpan=document.getElementsByTagName('span');
 68     for(var i=0;i<aLi.length;i++){
 69         aLi[i].onmouseenter=function(ev){
 70             var oEvent=ev ||event;
 71             var dir=enter(this,oEvent);
 72             switch(dir){
 73                 case 'l':
 74                 this.children[0].style.left=-200+'px';
 75                 this.children[0].style.top=0+'px';
 76                 move(this.children[0],{left:0,top:0});
 77                 break;    
 78                 case 'r':
 79                 this.children[0].style.left=200+'px';
 80                 this.children[0].style.top=0+'px';
 81                 move(this.children[0],{left:0,top:0});
 82                 break;    
 83                 case 't':
 84                 this.children[0].style.left=0+'px';
 85                 this.children[0].style.top=-200+'px';
 86                 move(this.children[0],{left:0,top:0});
 87                 break;    
 88                 case 'b':
 89                 this.children[0].style.left=0+'px';
 90                 this.children[0].style.top=200+'px';
 91                 move(this.children[0],{left:0,top:0});
 92                 break;    
 93             }    
 94         };
 95         aLi[i].onmouseleave=function(ev){
 96             var oEvent=ev ||event;
 97             var dir=enter(this,oEvent);
 98             switch(dir){
 99                 case 'l':
100                 move(this.children[0],{left:-200,top:0});
101                 break;    
102                 case 'r':
103                 move(this.children[0],{left:200,top:0});
104                 break;    
105                 case 't':
106                 move(this.children[0],{left:-200,top:0});
107                 break;    
108                 case 'b':
109                 move(this.children[0],{left:200,top:0});
110                 break;    
111             }    
112         };        
113     }    
114 };
115 </script>
116 </head>
117 
118 <body>
119 <ul id="ul1">
120     <li><span>猫一</span><img src="cat/1.jpg"></li>
121     <li><span>猫二</span><img src="cat/2.jpg"></li>
122     <li><span>猫三</span><img src="cat/3.jpg"></li>
123     <li><span>猫四</span><img src="cat/4.jpg"></li>
124     <li><span>猫五</span><img src="cat/5.jpg"></li>
125     <li><span>猫六</span><img src="cat/6.jpg"></li>
126     <li><span>猫七</span><img src="cat/7.jpg"></li>
127     <li><span>猫八</span><img src="cat/8.jpg"></li>
128 </ul>
129 </body>
130 </html>

转载于:https://www.cnblogs.com/lixuekui/p/5808738.html