用JQ判断鼠标移入DIV的方向，并从该方向移出遮罩

一个比较有意思的特效

<--html部分代码-->

    

        

图片一

        

图片二

        

图片三

        

图片四

        

图片五

        

图片六

        

图片七

        

图片八

        

图片九

        

图片十

        

图片七

        

图片八

    

<--CSS部分代码-->

<--

body,ul,li,img{margin: 0;padding: 0}

body{background: #f8f8f8}

.wrap{width: 720px;margin: 30px auto;padding: 10px;}

.list{float: left;height: auto;background: #fff;border: 1px solid #ccc;width: 100%}

.list li{cursor: pointer;margin:10px;position: relative;list-style-type: none;float: left;overflow: hidden;}

.list li img{float: left;}

.list li div{position: absolute;background:#F2528E;opacity: 0.8;filter:alpha(opacity:80);color:#fff;font-size:28px;text-align:center;line-height:150px;top:150px }

.list img,.list div{height: 150px;width: 220px;}

-->

<--JS部分代码-->

 //引入JQ

 

    

转载于:https://www.cnblogs.com/lee319/p/7097386.html