首页 > 代码库 > 图片3d轮放查看效果(V2.0):使用鼠标拖动实现图片的轮放
图片3d轮放查看效果(V2.0):使用鼠标拖动实现图片的轮放
上面的版本为通过左右按钮实现图片轮放,这个版本,是通过在窗口拖动鼠标,左右滑动图片。
关键点在于选择一个合适的值,使鼠标拖动时,所有图片均可显示,但是不会滑动过快或离开窗口。
不多说,直接贡献源码。
<style> img { position: absolute; top:200; left:400px; /* border: 1px solid #333;*/ padding: 2px 5px 2px 5px; -webkit-transition:ease all 0.7s; -webkit-transform-origin: 50% 50% 600px; /* background: rgba(0,0,0,.3);*/ width: 100px; height: 100px; z-index: -1; } .layerhidden { position: absolute; top:220px; width:180px; height: 200px; background: white; vertical-align: middle; text-align: center; z-index: 1; } .layerleft { left:0px; } .layerright { left:850px; } </style> <script> var imgs; var leftStart=0; var showLength=7; var step = 0; var mousedown =false; var xStart = 0; var yDegs; window.onmousedown = function(ev) { mousedown = true; var e = event || window.event; xStart=e.clientX; } window.onmouseup = function(ev) { mousedown = false; } window.onmousemove = function(ev) { if(mousedown == true ) { var e = event || window.event; var xtest = 500; var yDeg = (e.clientX - xStart) / 1024 * 10; //此处50的选择根据可显示所有图片即可 if((yDeg >= 0 && yDegs[imgs.length-1]>-50) || (yDeg < 0 && yDegs[0]<50)) { for(var i=0;i<imgs.length;i++) { yDegs[i] = yDegs[i] - yDeg; imgs[i].style.webkitTransform = "perspective(500px) rotateY("+ yDegs[i] + "deg)"; } } } } function init() { imgs = document.getElementsByTagName("img"); yDegs = new Array(); var deg = Math.floor(imgs.length/2); for(var i=0; i< imgs.length;i++) { imgs[i].style.webkitTransform = "perspective(500px) rotateY("+(deg-i)*10+"deg)"; yDegs.push((deg-i)*10); } } </script> <img src=http://www.mamicode.com/"1.png" />>
声明:所有源码均为本人原创,欢迎讨论,如果直接使用,请最好在源码中标明出处。图片3d轮放查看效果(V2.0):使用鼠标拖动实现图片的轮放
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。