【括号问题】$("li:lt(" + (idx + 1) + ")") 手风琴效果注意事项

最新推荐文章于 2022-03-17 14:12:16 发布

weixin_30647065

最新推荐文章于 2022-03-17 14:12:16 发布

阅读量214

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/oklfx/p/8067406.html

版权

$("li:lt(" + (idx + 1) + ")").each(function(i){

注意，这里必须要加括号，是因为如果不加，idx与前面 "li:lt(" 先运算，就会变成字符串类型的，然后再与后面的1 相加，就变成了字符串与字符串相加，输出的结果

是字符串的拼接。

console.log("li:lt(" + (2 + 1) + ")")
VM72:1 li:lt(3)

console.log("li:lt(" + 2 + 1 + ")");
VM76:1 li:lt(21)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
padding:0;
margin:0;
}
ul,ol{
list-style: none;
}
a{
text-decoration: none;
color:#333;
}
.box{
width: 900px;
height: 300px;
border: 1px solid #000;
margin: 50px auto;
overflow: hidden;
position: relative;
}
.box ul li{
position: absolute;
left:0px;
width: 560px;
height: 300px;
}
.box ul li.no1{
left:180px;
}
.box ul li.no2{
left:360px;
}
.box ul li.no3{
left:540px;
}
.box ul li.no4{
left:720px;
}
.box ul li .mask{
position: absolute;
width: 560px;
height: 300px;
left:0;
top:0;
background-color: rgba(0,0,0,.6);
}
</style>
</head>
<body>
<div class="box">
<ul>
<li class="no0">
<div class="mask"></div>
<a href=""><img src="images/0.jpg" alt=""></a>
</li>
<li class="no1">
<div class="mask"></div>
<a href=""><img src="images/1.jpg" alt=""></a>
</li>
<li class="no2">
<div class="mask"></div>
<a href=""><img src="images/2.jpg" alt=""></a>
</li>
<li class="no3">
<div class="mask"></div>
<a href=""><img src="images/3.jpg" alt=""></a>
</li>
<li class="no4">
<div class="mask"></div>
<a href=""><img src="images/4.jpg" alt=""></a>
</li>
</ul>
</div>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script type="text/javascript">
$("li").mouseenter(function(){
// 将触发事件的对象序号保存
var idx = $(this).index();
// 小于等于序号往左移动85
$("li:lt(" + (idx + 1) + ")").each(function(i){
$(this).animate({"left": 85 * i},400);
});

// 大于信号序号往右移动
$("li:gt(" + idx + ")").each(function(i){
// console.log(i);
$(this).animate({"left": 560 + 85 * (idx + i)},400);
});

// 鼠标进入图片去掉蒙版
$(this).children(".mask").fadeOut();
// 其他兄弟加上蒙版
$(this).siblings().children(".mask").fadeIn();
});

// 鼠标离开恢复原状
$(".box").mouseleave(function(){
$("li").stop(true);
$("li").each(function(i){
// console.log(i);
$(this).animate({"left": 180 * i},400);
});
$("li").children(".mask").fadeIn();
});

</script>
</body>
</html>

转载于:https://www.cnblogs.com/oklfx/p/8067406.html

weixin_30647065

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【括号问题】$("li:lt(" + (idx + 1) + ")") 手风琴效果注意事项

$("li:lt(" + (idx + 1) + ")").each(function(i){注意，这里必须要加括号，是因为如果不加，idx与前面 "li:lt(" 先运算，就会变成字符串类型的，然后再与后面的1 相加，就变成了字符串与字符串相加，输出的结果是字符串的拼接。console.log("li:lt(" + (2 + 1) + ")")VM72:1 li:lt...
复制链接

扫一扫