jquery2014-07-24 00:20:53 5568
Jquery图片分割轮换原理就是:将要显示的图片用多个Div显示,每个Div都以背景图片的方式加载图片,然后按照自己应该显示的区域来截取图片,最后拼接成一张完整的图片。
时间div{
width:0px; height:100%; background-image:url(testImg.jpg); background-repeat:no-repeat;
}
" _ue_custom_node_="true"> 切换 div").css("background-image","url(testImg.jpg)");
for (var i = 0; i div")[i]).css("width", "0px").css("height", "300px").css("background-position", "" postionX ",0px");
$($(".childDiv>div")[i]).animate({
width: "100px"
}, 500 (i*200));
}
} else {
index = 0;
$(".childDiv>div").css("background-image","url(testImg1.jpg)");
for (var i = 0; i div")[i]).css("width", "100px").css("height", "0px").css("background-position", "" postionX ",0px");
$($(".childDiv>div")[i]).animate({
height: "300px"
}, 500 (i*200));
}
}
}
" _ue_custom_node_="true">
彭亚欧个人博客原创文章,转载请注明出处
文章关键词:html图片轮换,Jquery图片轮换,Jquery图片分割
文章固定链接:https://www.pengyaou.com/legendsz/front/codejq/NjA=.html
上一篇 Jq扇形,圆形菜单插件