图片阴影过渡效果

Html

Css


   
    我是第一张
     
   
    我是第二张
     
   
    我是第三张
     
   
    我是第四张
     
   
    我是第五张
     
   
    我是第六张

* {
	margin:0;
	padding:0;
}
ul {
	margin:10px;
	list-style-type:none;
	width:800px;
	height:460px;
}
li {
	overflow:hidden;
	top:0;
	left:0;
	float:left;
	width:200px;
	height:150px;
	padding:0.5px;
}
body ul li img {
	border:0;
	z-index:2;
	width:100%;
	height:100%;
}
body ul li a {
	position:relative;
	display:block;
	z-index:4;
	width:200px;
	height:150px;
	text-align:center;
	/*左右居中*/
	line-height:150px;
	/*上下居中*/
	color:dimgray;
	overflow:hidden;
	/*使用overflow属性设置成hidden，图片超出容器的部分就会自动隐藏*/
	filter:blur(5px);
	/*模糊*/
	/*background-color:gainsboro;
	*/
	/* for IE */
	/*filter:alpha(opacity=30);
	*/
	/* CSS3 standard */
	/*opacity:0.3;
	*/
	/* 背景透明该值 */
	background-color:rgba(250,250,250,0.5);
	/* opacity 会继承*/
}

$('li').hover(function(e) {
    e = e || event;
    var x = e.pageX;
    var y = e.pageY;
    var top = $(this).offset().top;
    var bottom = top + $(this).height();
    var left = $(this).offset().left;
    var right = left + $(this).width();
    var st = Math.abs(y - top);
    var sb = Math.abs(y - bottom);
    var sl = Math.abs(x - left);
    var sr = Math.abs(x - right);
    var less = Math.min(st, sb, sl, sr)
    switch (less) {
        case st:
            $(this).find('a').css({
                    visibility: 'visible',
                    left: 0,
                    top: '-305px'
                })
                .animate({
                    top: '-155px'
                }, 300);
            break;
        case sb:
            $(this).find('a').css({
                    visibility: 'visible',
                    left: 0,
                    top: 0
                })
                .animate({
                    top: '-155px'
                }, 300);
            break;
        case sl:
            $(this).find('a').css({
                    visibility: 'visible',
                    left: '-200px',
                    top: '-155px'
                })
                .animate({
                    left: 0
                }, 300);
            break;
        case sr:
            $(this).find('a').css({
                    visibility: 'visible',
                    left: '200px',
                    top: '-155px'
                })
                .animate({
                    left: 0
                }, 300);
            break;
    }

}, function(e) {
    e = e || event;
    var x = e.pageX;
    var y = e.pageY;
    var top = $(this).offset().top;
    var bottom = top + $(this).height();
    var left = $(this).offset().left;
    var right = left + $(this).width();
    var st = Math.abs(y - top);
    var sb = Math.abs(y - bottom);
    var sl = Math.abs(x - left);
    var sr = Math.abs(x - right);
    var less = Math.min(st, sb, sl, sr)
    switch (less) {
        case st:
            $(this).find('a').css({
                left: 0,
                top: '-155px'
            })
            $(this).find('a').animate({
                top: '-305px'
            }, 300);
            break;
        case sb:
            $(this).find('a').css({
                left: 0,
                top: '-155px'
            })
            $(this).find('a').animate({
                top: 0
            }, 300);
            break;
        case sl:
            $(this).find('a').css({
                visibility: 'visible',
                left: 0,
                top: '-155px'
            })
            $(this).find('a').animate({
                left: '-200px'
            }, 300);
            break;
        case sr:
            $(this).find('a').css({
                visibility: 'visible',
                left: 0,
                top: '-155px'
            })
            $(this).find('a').animate({
                left: '200px'
            }, 300);
            break;
    }
})

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.8.3

立即下载

图片阴影过渡效果



代码描述：鼠标经过阴影跟随,和方向感知

2

最新

发表评论全部评论

暂时没有评论！

brave heart0

2017/6/16 12:05:47

我也觉得有bug，鼠标离开的时候，动画没有停止
回复

罄?一瞥0

2017/6/14 14:05:14

有bug,animate()前面加上stop()应该就好了
回复

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

相关代码

我是第一张

我是第二张

我是第三张

我是第四张

我是第五张

我是第六张

图片阴影过渡效果

最新