仿iphone手指左右滚动图片
来源：互联网 发布：java微信开发demo 编辑：程序博客网 时间：2024/05/17 05:06
<!DOCTYPE html><html> <head> <title>仿iphone手指左右滚动图片</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> <style>* {margin: 0;padding: 0;}.clip {width: 100%;max-width: 600px;overflow: hidden;}.pan {width: 400%;-o-transition: -o-transform 2s;-moz-transition: -moz-transform 2s;-webkit-transition: -webkit-transform 2s;-webkit-backface-visibility: hidden;-webkit-perspective: 1000;}.pan div {display: block;float: left;width: 23%;-moz-user-select: none;-webkit-user-select: none;-webkit-user-drag: none;}.pan div img {width: 100%;}#listSmall {width: 100%;}#listSmall ul {list-style: none;}#listSmall ul li {float: left;width: 23%;margin-right: 2.5%;}#listSmall ul li.addBor {}#listSmall ul li.addBor img {width: 100%;border: 2px #C00 solid;}#listSmall ul li img {width: 100%;border: 2px #ddd solid;}#listSmall ul li img:hover {cursor: pointer;}#btn {}#btn #left {float: left;width: 45%;text-align: right;}#btn #right {float: right;width: 45%;text-align: left;}#btn #left img, #btn #right img {cursor: pointer;}.clear {clear: both;}</style> <script> var position = 1; function next() { position -= 23; if (position <= -69) position = -68; update(); } function prev() { position += 23; if (position > 1) position = 1; update(); } function update() { var pan = document.getElementById("pan"); pan.style.OTransform = "translateX(" + position + "%)"; pan.style.MozTransform = "translateX(" + position + "%)"; pan.style.WebkitTransform = "translateX(" + position + "%)";$("#listSmall ul li").removeClass('addBor');if(position == 1){$("#listSmall ul li").removeClass('addBor'); $("#listSmall ul li img#img01").parentsUntil().addClass('addBor');}else if(position == -22){$("#listSmall ul li").removeClass('addBor'); $("#listSmall ul li img#img02").parentsUntil().addClass('addBor');}else if(position == -45){$("#listSmall ul li").removeClass('addBor'); $("#listSmall ul li img#img03").parentsUntil().addClass('addBor');}else if(position == -68){$("#listSmall ul li").removeClass('addBor'); $("#listSmall ul li img#img04").parentsUntil().addClass('addBor');} } $(function() {$("#listSmall ul li").last().css("margin-right",0);$("#img01").parentsUntil().addClass('addBor');pan.style.OTransform = "translateX(" + 1 + "%)"; pan.style.MozTransform = "translateX(" + 1 + "%)"; pan.style.WebkitTransform = "translateX(" + 1 + "%)"; $(window).bind("swipeleft", next); $(window).bind("swiperight", prev);$("#listSmall ul li img").click( function(){ var Namb = $("#listSmall ul li img").index($(this)); $("#listSmall ul li").removeClass('addBor'); $(this).parentsUntil().addClass('addBor'); pan.style.OTransform = "translateX(" + (-23*Namb+1) + "%)"; pan.style.MozTransform = "translateX(" + (-23*Namb+1) + "%)"; pan.style.WebkitTransform = "translateX(" + (-23*Namb+1) + "%)";}); $(window).bind("keydown", function(event) { if (event.which==37) prev(); else if (event.which==39) next(); }); $("img").bind("dragstart", function(ev) { ev.preventDefault(); }); }); </script> </head> <body> <div data-role="page"> <div data-role="content"> <div class="clip"> <div id="pan" class="pan"> <div><a href="#"><img src="/jscss/demoimg/wall1.jpg" id="img01"></a></div> <div><a href="#"><img src="/jscss/demoimg/wall2.jpg" id="img02"></a></div> <div><a href="#"><img src="/jscss/demoimg/wall3.jpg" id="img03"></div> <div><a href="#"><img src="/jscss/demoimg/wall4.jpg" id="img04"></a></div> </div> <div class="clear"></div> <div id="listSmall"> <ul> <li><img src="/jscss/demoimg/wall1.jpg"></li> <li><img src="/jscss/demoimg/wall2.jpg"></li> <li><img src="/jscss/demoimg/wall3.jpg"></li> <li><img src="/jscss/demoimg/wall4.jpg"></li> </ul> </div> <div class="clear"></div> <div id="btn"> <div id="left"><img src="images/left.png" onClick="prev();"></div> <div id="right"><img src="images/right.png" onClick="next();"></div> </div> </div> </div> </div></body></html>
