您的位置：首页 > Web前端 > CSS

js+css3照片拖拽

2015-12-28 00:00 531 查看

摘要: js+css3照片拖拽初体验，入门级。

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航