jq实现 方块式 特效 类似百叶窗效果
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } #ul1{ position: relative; width: 800px; height: 450px; margin: 50px auto 0; list-style: none; } #ul1 li{ position: absolute; left: 0; top: 0; width: 100px; height: 90px; } </style> </head> <body> <!--800*450 图片高800宽450 将他分成 8行 5列 每个小块是100*90 100*90 8 * 5 共40个li--> <ul id="ul1"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </body> <script src="js/jquery-2.2.1.min.js"></script> <script> var page = 1; //page为1的时候 是第一张图片 page为2的时候是第二张图片 所以改变page就可以实现切换的效果 再给page判断临界值 create(page);//程序执行的时 传入第一张
//用定时器控制page的改变 没3秒钟调用一次定时器 执行一次page++ 判断临界值 var time = setInterval(function(){ page++; if(page > 5) { page = 1; }
//找到每个li hide隐藏, page=2就是第二张图片 然后在传入 实现第一张每个li隐藏 第二张每个li显示 $("ul >li").hide(500,function(){ create(page); $(this).show(500); //show显示 }) },3000) function create(page){
//each每次执行传递进来的函数时,函数中的this关键字都指向一个不同的DOM元素 $("ul>li").each(function(){ var index = $(this).index(); var oLeft = (index%8)*(-100); //每行8个li 每个li定位的时候是正数所以下面 加了个-负号变成正数 ,每个背景图定位是负数 var oTop = (Math.floor(index/8))*(-90); //除以8就是到了第二列,没有除进还在第一行top值没有增加 li的高为90
//背景图定位 每个li定位 背景图大小 $(this).css({"background":"url(img/"+page+".jpg) "+oLeft+"px "+oTop+"px","left":(-oLeft),"top":(-oTop),"background-size":"800px 450px"}); }) } </script> </html>