jQuery鼠标划入出现遮罩层动画

最新推荐文章于 2024-03-10 18:19:17 发布

厚积薄发的Cicci

最新推荐文章于 2024-03-10 18:19:17 发布

阅读量379

点赞数 1

分类专栏： jquery 文章标签：鼠标划入出现遮罩层动画鼠标移入动画 jquery移入动画

本文链接：https://blog.csdn.net/WuqibuHuan/article/details/115114611

版权

jquery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

上代码，看效果：

html

<ul id="container" class="clearfix">
    <li>
        <div class="img"></div>
        <p>
            <span>如果有来生，我要做一棵树，站成永恒，没有悲欢的姿势。</span>
            <a target="_blank" href="#"></a>
            <i></i>
        </p>
    </li>
    <li>
        <div class="img"></div>
        <p>
            <span>一半在土里安详，一半在风里飞扬，一半洒落阴凉，一半沐浴阳光。</span>
            <a target="_blank" href="#"></a>
            <i></i>
        </p>
    </li>
    <li>
        <div class="img"></div>
        <p>
            <span>非常沉默非常骄傲，从不依靠从不寻找。</span>
            <a target="_blank" href="#"></a>
            <i></i>
        </p>
    </li>
    <li>
        <div class="img"></div>
        <p>
            <span>如果有来生，有没有人爱，我也要努力做一个可爱的人。</span>
            <a target="_blank" href="#"></a>
            <i></i>
        </p>
    </li>
    <li>
        <div class="img"></div>
        <p>
            <span>不埋怨谁，不嘲笑谁，也不羡慕谁，阳光下灿烂，风雨中奔跑，做自己的梦，走自己的路。</span>
            <a target="_blank" href="#"></a>
            <i></i>
        </p>
    </li>
    <li>
        <div class="img"></div>
        <p>
            <span>如果有来生??三毛</span>
            <a target="_blank" href="#"></a>
            <i></i>
        </p>
    </li>
</ul>

css

body,div,li,p,ul {
	margin:0;
	padding:0;
	font-size:14px;
	font-family:"Microsoft Yahei","微软雅黑",sans-serif;
}
.clearfix::after {
	clear:both;
	display:block;
	height:0;
	content:'';
}
li,ul {
	list-style:none;
}
#container {
	margin:0 auto;
	width:100%;
}
#container li {
	position:relative;
	float:left;
	overflow:hidden;
	margin:1%;
	width:30%;
	height:160px;
	border:1px solid #ccc;
	text-align:center;
	line-height:160px;
	cursor:pointer;
}
#container li img {
	width:100%;
}
#container li p {
	position:absolute;
	top:-160px;
	left:0;
	z-index:2;
	width:100%;
	height:160px;
	color:#fff;
}
#container li .img {
	display:block;
	width:100%;
	height:160px;
	-webkit-transition:.5s ease-in;
	-moz-transition:.5s ease-in;
	-o-transition:.5s ease-in;
	transition:.5s ease-in;
	-ms-transition:.5s ease-in;
}
#container li:nth-child(1) .img {
	background-color:#E97305;
}
#container li:nth-child(2) .img {
	background-color:#FFAAAA;
}
#container li:nth-child(3) .img {
	background-color:#FFFF00;
}
#container li:nth-child(4) .img {
	background-color:aqua;
}
#container li:nth-child(5) .img {
	background-color:blueviolet;
}
#container li:nth-child(6) .img {
	background-color:cadetblue
}
#container li:hover .img {
	-webkit-transform:scale(1.1,1.1);
	-moz-transform:scale(1.1,1.1);
	-o-transform:scale(1.1,1.1);
	transform:scale(1.1,1.1);
}
#container li p i {
	position:absolute;
	top:0;
	left:0;
	z-index:-1;
	display:block;
	width:100%;
	height:100%;
	background:#000;
	font-size:16px;
	opacity:.7;
	-moz-opacity:.7;
	filter:alpha(opacity=70);
}
#container li p span {
	display:block;
	margin:0 auto;
	padding-top:60px;
	width:94%;
	font-size:12px;
	line-height:24px;
}
#container li p a {
	position:absolute;
	top:20px;
	left:50%;
	display:block;
	margin-left:-16px;
	width:32px;
	height:32px;
	background:url(自己放点小图标.png) no-repeat 0 0;
}
.explain {
	display:block;
	margin:0 auto;
}

js（含封装好的函数及注释详情）

$("#container li").each(function() {
    $(this).on('mouseenter', function(e) { //当鼠标移入元素对象边界内时，激活mouseenter事件。(不会冒泡）
        var e = e || window.event;
        var angle = direct(e, this)
        mouseEvent(angle, this, 'in')
    })
    $(this).on('mouseleave', function(e) { //当鼠标移出元素对象边界内时，激活mouseleave事件。(不会冒泡)
        var e = e || window.event;
        var angle = direct(e, this)
        mouseEvent(angle, this, 'off')
    })
})

function direct(e, o) {
    var w = o.offsetWidth;
    var h = o.offsetHeight;
    var top = o.offsetTop; //包含滚动条滚动的部分
    var left = o.offsetLeft;
    var scrollTOP = document.body.scrollTop || document.documentElement.scrollTop;
    var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
    var offTop = top - scrollTOP;
    var offLeft = left - scrollLeft;
    //console.log(offTop+";"+offLeft)
    //e.pageX|| e.clientX;
    //pageX 是从页面0 0 点开始  clientX是当前可视区域0 0开始  即当有滚动条时clientX  小于  pageX
    //ie678不识别pageX
    //PageY=clientY+scrollTop-clientTop;(只讨论Y轴,X轴同理,下同) 页面上的位置=可视区域位置+页面滚动条切去高度-自身border高度
    var ex = (e.pageX - scrollLeft) || e.clientX;
    var ey = (e.pageY - scrollTOP) || e.clientY;
    var x = (ex - offLeft - w / 2) * (w > h ? (h / w) : 1);
    var y = (ey - offTop - h / 2) * (h > w ? (w / h) : 1);

    var angle = (Math.round((Math.atan2(y, x) * (180 / Math.PI) + 180) / 90) + 3) % 4 //atan2返回的是弧度 atan2(y,x)
    var directName = ["上", "右", "下", "左"];
    return directName[angle]; //返回方向  0 1 2 3对应 上 右 下 左
}

function mouseEvent(angle, o, d) { //方向  元素  鼠标进入/离开

    var w = o.offsetWidth;
    var h = o.offsetHeight;

    if (d == 'in') {
        switch (angle) {
            case '上':
                $(o).find("p").css({
                    left: 0,
                    top: -h + "px"
                }).stop(true).animate({
                    left: 0,
                    top: 0
                }, 300)
                setTimeout(function() {
                    $(o).find("p a").css({
                        left: '50%',
                        top: -h + "px"
                    }).stop(true).animate({
                        left: '50%',
                        top: '20px'
                    }, 300)
                }, 200)
                break;
            case '右':
                $(o).find("p").css({
                    left: w + "px",
                    top: 0
                }).stop(true).animate({
                    left: 0,
                    top: 0
                }, 300)
                setTimeout(function() {
                    $(o).find("p a").css({
                        left: w + "px",
                        top: '20px'
                    }).stop(true).animate({
                        left: '50%',
                        top: '20px'
                    }, 300)
                }, 200)
                break;
            case '下':
                $(o).find("p").css({
                    left: 0,
                    top: h + "px"
                }).stop(true).animate({
                    left: 0,
                    top: 0
                }, 300)
                setTimeout(function() {
                    $(o).find("p a").css({
                        left: '50%',
                        top: h + "px"
                    }).stop(true).animate({
                        left: '50%',
                        top: '20px'
                    }, 300)
                }, 200)
                break;
            case '左':
                $(o).find("p").css({
                    left: -w + "px",
                    top: 0
                }).stop(true).animate({
                    left: 0,
                    top: 0
                }, 300)
                setTimeout(function() {
                    $(o).find("p a").css({
                        left: -w + "px",
                        top: '20px'
                    }).stop(true).animate({
                        left: '50%',
                        top: '20px'
                    }, 300)
                }, 200)
                break;
        }
    } else if (d == 'off') {
        switch (angle) {
            case '上':
                $(o).find("p a").stop(true).animate({
                    left: '50%',
                    top: -h + "px"
                }, 300)
                setTimeout(function() {
                    $(o).find("p").stop(true).animate({
                        left: 0,
                        top: -h + "px"
                    }, 300)
                }, 200)
                break;
            case '右':
                $(o).find("p a").stop(true).animate({
                    left: w + "px",
                    top: '20px'
                }, 300)
                setTimeout(function() {
                    $(o).find("p").stop(true).animate({
                        left: w + "px",
                        top: 0
                    }, 300)
                }, 200)
                break;
            case '下':
                $(o).find("p a").stop(true).animate({
                    left: '50%',
                    top: h + "px"
                }, 300)
                setTimeout(function() {
                    $(o).find("p").stop(true).animate({
                        left: 0,
                        top: h + "px"
                    }, 300)
                }, 200)
                break;
            case '左':
                $(o).find("p a").stop(true).animate({
                    left: -w + "px",
                    top: '20px'
                }, 300)
                setTimeout(function() {
                    $(o).find("p").stop(true).animate({
                        left: -w + "px",
                        top: 0
                    }, 300)
                }, 200)
                break;
        }
    }
}

效果图

在这里插入图片描述
还不错吧！！！

注：

**
背景色页可换成图片，只需将li下面的div换成img即可，可直接复用div的class样式。li中a标签可添加自己所需的链接地址。

厚积薄发的Cicci

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
jQuery鼠标划入出现遮罩层动画

上代码，看效果：**html**<ul id="container" class="clearfix"> <li> <div class="img"></div> <p> <span>如果有来生，我要做一棵树，站成永恒，没有悲欢的姿势。</span> <a target="_blank" href="#"></a
复制链接

扫一扫

专栏目录