<!DOCTYPE HTML onselectstart="return false">
<html>
<head>
<title> 照片拖拽 </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="xx">
</head>
<style type="text/css">
* {
margin:0;padding:0;
}
body{
background:#000;
}
#wrap {
width:120px;height:180px;margin:200px auto;
position:relative;transform-style:preserve-3d;
}
#wrap img {
position:absolute;width:100%;height:100%;top:0;left:0;border-radius:3px;box-shadow:0px 0px 0px 5px #fff;
-webkit-box-reflect:below 8px -webkit-linear-gradient(top,rgba(0,0,0,0) 40% ,rgba(0,0,0,.5) 100%);
}
</style>
<script type="text/javascript">
window.onload=function(){
var Xn=0,Yn=-10;
var oWrap = document.getElementById("wrap");
var oImg = oWrap.getElementsByTagName("img");
var oImgL = oImg.length;
var deg = 360/11;
for (var i = 0;i<oImgL ;i++ )
{
oImg[i].style.transform='rotateY('+deg*i+'deg) translateZ(400px)';
}
//禁止鼠标拖动图片事件
document.ondragstart=function(){
return false;
}
//鼠标点击事件
document.onmousedown=function(ev){
var evX0,evY0,evX,evY,evXn,evYn;
ev = ev || window.event;
evX0 = ev.clientX;
evY0 = ev.clientY;
//鼠标移动事件
this.onmousemove=function(ev){
ev = ev || window.event;
evX = ev.clientX;
evY = ev.clientY;
evXn = evX0-evX;
evYn = evY0-evY;
Xn-=evXn*0.003;
Yn-=evYn*0.003;
var numYn = Number(Yn);
if (numYn<90 || numYn>-90)
{
oWrap.style.transform="perspective(800px) rotateY("+Xn+"deg) rotateX("+Yn+"deg)"
}
//鼠标点击抬起事件
this.onmouseup=function(){
//当鼠标抬起时，应该禁用鼠标移动事件
this.onmousemove=function(){
return false;
};
}
}
}
}
</script>
<body>
<div id="wrap" style="transform: perspective(800px) rotateY(0deg) rotateX(-10deg)">
<img src="img/1.jpg"/>
<img src="img/2.jpeg" />
<img src="img/3.jpeg" />
<img src="img/4.jpeg" />
<img src="img/5.jpeg" />
<img src="img/6.jpeg" />
<img src="img/7.jpeg" />
<img src="img/8.jpeg" />
<img src="img/9.jpeg" />
<img src="img/10.jpeg" />
<img src="img/11.jpeg" />
</div>
</body>
</html>转载于:https://my.oschina.net/u/2527296/blog/552135
428
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
