照片墙
照片墙，兼容各浏览器：
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style> * {margin:0; padding:0; } body { background:url(Images/miaov2.png) no-repeat center top; margin:0 auto; width:1024px; padding-top:127px; } #ul1 { position:relative; } #ul1 li { position:absolute; list-style:none; border:3px solid #ffd6de; width:200px; height:200px; box-shadow:2px 2px 2px 2px rgba(0,0,0,0.6); z-index:1;-webkit-transition:0.2s box-shadow ease; } #ul1 li img { display:block; width:200px; height:200px; } .pos1 { top:220px; left:70px; -webkit-transform:rotate(-30deg); } .pos2 { top:110px; left:184px; -webkit-transform:rotate(15deg); } .pos3 { top:260px; left:426px; -webkit-transform:rotate(10deg); } .pos4 { top:110px; left:480px; -webkit-transform:rotate(0deg); } .pos5 { top:108px; left:740px; -webkit-transform:rotate(24deg); } </style> <script> window.onload = function () { var oUl = document.getElementById("ul1"); var oli = oUl.getElementsByTagName("li"); z = 1; for (var i = 0; i < oli.length; i++) { var oDrag = new Drag(oli[i]); oDrag.onDragStart = function () { z++; this.style.zIndex = z; this.style.boxShadow = '10px 10px 45px 9px rgba(0,0,0,0.7)'; }; oDrag.onDragEnd = function () { this.style.boxShadow = '2px 2px 2px 2px rgba(0,0,0,0.6)'; } } } function Drag(obj) { var oBj = this; this._obj = obj; this._mouseStart = {}; this._divStart = {}; this._obj.onmousedown = function (ev) { oBj._starDrag(ev); return false; } } Drag.prototype._starDrag = function (ev) { var obj = this; var oEvent = ev || event; this._mouseStart.x = oEvent.clientX; this._mouseStart.y = oEvent.clientY; this._divStart.x = this._obj.offsetLeft; this._divStart.y = this._obj.offsetTop; if (this._obj.setCapture) { this._obj.onmousemove = function (ev) { obj._doDrag(ev); } this._obj.onmouseup = function (ev) { obj._stopDrag(ev); } this._obj.setCapture(); } else { this._doDrags = function (ev) { obj._doDrag(ev); } this._stopDrags = function (ev) { obj._stopDrag(ev); } document.addEventListener("mousemove", this._doDrags, true); document.addEventListener("mouseup", this._stopDrags, true); } if (this.onDragStart) { this.onDragStart.call(this._obj); } return false; } Drag.prototype._doDrag = function (ev) { var oEvent = ev || event; var l = oEvent.clientX - this._mouseStart.x + this._divStart.x; var t = oEvent.clientY - this._mouseStart.y + this._divStart.y; this._obj.style.left = l + "px"; this._obj.style.top = t + "px"; } Drag.prototype._stopDrag = function (ev) { if (this._obj.releaseCapture) { this._obj.onmousemove = null; this._obj.onmouseup = null; this._obj.releaseCapture(); } else { document.removeEventListener("mousemove", this._doDrags, true); document.removeEventListener("mouseup", this._stopDrags, true); this._doDrags = this._stopDrags = null; } if (this.onDragEnd) { this.onDragEnd.call(this._obj); } return false; } </script> </head> <body> <ul id="ul1"> <li class="pos1"><img src="Images/a1.jpg" /></li> <li class="pos2"><img src="Images/a2.jpg" /></li> <li class="pos3"><img src="Images/a3.jpg" /></li> <li class="pos4"><img src="Images/a4.jpg" /></li> <li class="pos5"><img src="Images/a5.jpg" /></li> </ul> </body> </html>
