01缩略图案例
这步操作就是要理解 $(this).index()
//添加小图的鼠标悬浮案例
$('#smallImgBox img').on('mouseover', function(evt){
$("#bigImgBox img").attr('src','img/' + imageArray[$(this).index()].bigImg)
console.log($(this).index())
})
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--添加jQuery-->
<script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
<div id="bigImgBox"></div>
<div id="smallImgBox"></div>
</body>
</html>
<script type="text/javascript">
//创建图片对象构造方法
function MYImage(smallImg,bigImg,title=''){
this.smallImg = smallImg
this.bigImg = bigImg
this.title = title
}
//通过数组保存图片对象
imageArray = [
new MYImage('thumb-1.jpg','picture-1.jpg'),
new MYImage('thumb-2.jpg','picture-2.jpg'),
new MYImage('thumb-3.jpg','picture-3.jpg')
]
//添加一个大图
//创建大图节点
bigImgNode = $("<img id='bigImg' src='img/picture-1.jpg' />")
$('#bigImgBox').append(bigImgNode)
//jQuery添加小图
for(i=0;i<imageArray.length;i++){
//获取图片名
imgObject = imageArray[i]
//jQuery创建小图节点
smallImg = $("<img />")
smallImg.attr('src', 'img/'+imgObject.smallImg)
smallImg.imgMode = imgObject
// console.log(smallImg.imgMode)
// console.log(smallImg.imgMode.bigImg)
$('#smallImgBox').append(smallImg)
}
//添加小图的鼠标悬浮案例
$('#smallImgBox img').on('mouseover', function(evt){
$("#bigImgBox img").attr('src','img/' + imageArray[$(this).index()].bigImg)
console.log($(this).index())
})
</script>
02闪烁效果案例
选中哪个标签很重要，通过$选中的节点可以同时修改，所以选择的时候要注意选中的是哪一个
function addBox(){
littleBoxNode = $("<div id='littleBox'></div>")
console.log(littleBoxNode)
//特别重要！！！！！！每次点击一次事件都会重新开始选择标签
$('#box').prepend(littleBoxNode)
//选中哪一个标签修改颜色也很关键
$('#box div:first-child').css('background-color',randomColor())
if($('#box').children().length>50){
$('#box *:last-child').remove()
}
}
遍历父节点中的子节点的时候，要用eq(i) ，记住 $('#box').children().eq(i)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="js/tool.js">
</script>
<style type="text/css">
body{
text-align: center;
}
#box{
width: 600px;
height: 300px;
border: 1px solid black;
margin: 10px auto;
}
button{
width: 60px;
height: 30px;
background-color: red;
color: white;
border: none;
}
#littleBox{
width: 60px;
height: 60px;
float: left;
/*background-color: red*/
}
</style>
</head>
<body>
<div id="box"></div>
<button id="add" onclick="addBox()">添加</button>
<button id="blink" onclick="blink()">闪烁</button>
</body>
<script type="text/javascript">
function addBox(){
littleBoxNode = $("<div id='littleBox'></div>")
console.log(littleBoxNode)
//特别重要！！！！！！每次点击一次事件都会重新开始选择标签
$('#box').prepend(littleBoxNode)
//选中哪一个标签修改颜色也很关键
$('#box div:first-child').css('background-color',randomColor())
if($('#box').children().length>50){
$('#box *:last-child').remove()
}
}
function blink(){
if($('#blink').text()=='闪烁'){
$('#blink').text('暂停')
console.log($('#box').children())
timer = setInterval(function(){
for(i=0;i<$('#box').children().length;i++){
boxChildNode = $('#box').children().eq(i)
boxChildNode.css('background-color',randomColor())
}
},200)
}else{
$('#blink').text('闪烁')
clearInterval(timer)
}
}
</script>
</html>
网友评论