jquery2014-07-24 00:20:53 5139
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扇形,圆形菜单插件