*{ /*清空所有元素默認的外邊距和內邊距*/ } .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;}

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

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