javascript实现了照片拖拽点击置顶的照片墙代码

演示图

styles.css

*{ /*清空所有元素默认的外边距和内边距*/ } .photo_wall{background:url（bg.jpg）; /*定义照片墙的默认背景*/background-size:cover; /*使照片墙的背景填充照片墙*/width:1200px; /*设置照片墙的宽高*/height:500px;margin:40px auto; /*设置照片墙的外边距*/display:-webkit-box; /*使用CSS3的盒模型之流式布局*/display:-moz-box;display:box;-webkit-box-align:center; /*定义盒模型内部元素在垂直方向上居于中间位置*/-moz-box-align:center; box-align:center;-webkit-box-pack:center; /*定义盒模型内部元素在水平方向上居于中间位置*/-moz-box-pack:center; box-pack:center;} .photo_wall .photo_frame{text-align:center; /*照片内的文字都是居中显示*/padding:10px 10px 30px 10px; /*定义照片的内补白*/background-color:#f2eada; /*设置照片的背景颜色*/font-size:.8em; /*照片内文字的大小*/box-shadow:.2em .2em .8em #130c0e; /*给照片添加阴影效果，富有立体感*/} .photo_frame p{ margin-top:10px; /*设置照片内显示文字段落的外上边距*/}#photo01{position:fixed;top:90px;left:50px;-webkit-transform-origin:right bottom; /*定义照片1的旋转基点为 右下角*/-moz-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate（10deg）; /*以基点为轴，在2D空间内顺时针旋转10度*/-moz-transform:rotate（10deg）;-o-transform:rotate（10deg）;transform:rotate（10deg）;position:absolute;} #photo02{position:fixed;top:100px;left:300px;-webkit-transform-origin:right bottom; /*定义照片2的旋转基点为 右下角*/-moz-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate（-20deg）; /*以基点为轴，在2D空间内逆时针旋转20度*/-moz-transform:rotate（-20deg）;-o-transform:rotate（-20deg）;transform:rotate（-20deg）;position:absolute;} #photo03{position:fixed;top:80px;left:750px;-webkit-transform-origin:left top; /*定义照片3的旋转基点为 左上角*/-moz-transform-origin:left top;transform-origin:left top;-webkit-transform:rotate（40deg）; /*以基点为轴，在2D空间内顺时针旋转40度*/-moz-transform:rotate（40deg）;-o-transform:rotate（40deg）;transform:rotate（40deg）;position:absolute;}#vedio1{position:fixed;top:250px;left:950px;-webkit-transform-origin:right top; /*定义照片3的旋转基点为 左上角*/-moz-transform-origin:right top;transform-origin:right top;-webkit-transform:rotate（-100deg）; /*以基点为轴，在2D空间内顺时针旋转40度*/-moz-transform:rotate（50deg）;-o-transform:rotate（-50deg）;transform:rotate（50deg）;position:absolute;} div{cursor:move;}#top{right:0;top:0; width:100px;height:100%;position:fixed; padding:10px; text-align:center; font-weight:bold; background:#f2eada;opacity:0.9;}

drag.js

var zIndex = 1;window.onload = function （）{var x=document.getElementsByName（"photo"）;for（var i=0;i<x.length;i++）{drag（x[i]）;//alter（x[i].value）;}//var oDrag1 = document.getElementById（"photo01"）;//var oDrag2 = document.getElementById（"photo02"）;//var oDrag3 = document.getElementById（"photo03"）;//var oDrag4 = document.getElementById（"vedio1"）;//drag（oDrag1）;//drag（oDrag2）;//drag（oDrag3）;//drag（oDrag4）;};var cengshu=0;function drag（oDrag）{var disX = dixY = 0;oDrag.onmousedown = function （event）{var event = event || window.event;disX = event.clientX - this.offsetLeft;disY = event.clientY - this.offsetTop; oDrag.style.position="fixed";oDrag.style.zIndex=cengshu++;//var oTemp = document.createElement（"div"）;//oTemp["id"] = "temp";//oTemp.style.left = this.currentStyle ? this.currentStyle["left"] : getComputedStyle（this, null）["left"];//oTemp.style.top = this.currentStyle ? this.currentStyle["top"] : getComputedStyle（this, null）["top"];//oTemp.style.zIndex = zIndex++;//document.body.appendChild（oTemp）; document.onmousemove = function （event）{var event = event || window.event;var iL = event.clientX - disX;var iT = event.clientY - disY;var maxL = document.documentElement.clientWidth - oDrag.offsetWidth;var maxT = document.documentElement.clientHeight - oDrag.offsetHeight iL <= 0 && （iL = 0）;iT <= 0 && （iT = 0）;iL >= maxL && （iL = maxL）;iT >= maxT && （iT = maxT）; oDrag.style.left = iL + "px";oDrag.style.top = iT + "px";return false;}; document.onmouseup = function （）{document.onmousemove = null;document.onmouseup = null;oDrag.style.left = oTemp.style.left;oDrag.style.top = oTemp.style.top;oDrag.style.zIndex = oTemp.style.zIndex;document.body.removeChild（oTemp）;oDrag.releaseCapture && oDrag.releaseCapture（）}; this.setCapture && this.setCapture（）;return false}}

picwall.html

<！DOCTYPE html><html><head><style>div{cursor: move;}</style><link href="styles.css" rel="stylesheet"><script type="text/javascript" src="drag.js"></script><meta charset="UTF-8"><meta name="Generator" content="EditPlus®"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Description" content=""><title>Document</title></head><body class="photo_wall"><div name = "photo" class="photo_frame" id="photo01" name="dr"><img src="30554.jpg" width="350" height="200" alt="fuck you"><p>面对两侧金色的树木，内心莫名的喜悦！</p><p>作者: 纤上陌</p></div><div name = "photo" class="photo_frame" id="photo02" name="dr"><img src="30774.jpg" width="350" height="200" alt="fuck you"><p>很遗憾两颗心画在了沙滩上</p><p>作者: 她留我走</p></div><div name = "photo" class="photo_frame" id="photo03" name="dr"><img src="30729.jpg" width="350" height="200" alt="fuck you"><p>野花也要精彩</p><p>作者: Love&Peace</p></div><div name = "photo" class="photo_frame" id="vedio1" name="dr"><video src="VID_20141106_145936.mp4" controls="controls" width="350" height="200" alt="fuck you">您的浏览器不支持 video 标签。</video><p>嘉和秋季运动会</p><p>作者:忽左忽右</p></div></body></html>

所用到的图片

以上所述就是本文的全部内容了，希望能够对大家熟练掌握javascript有所帮助。