javascript實(shí)現(xiàn)了照片拖拽點(diǎn)擊置頂?shù)恼掌瑝Υa

更新時間：2015年04月03日 09:47:16 投稿：hebedich

這篇文章主要介紹了javascript實(shí)現(xiàn)了照片拖拽點(diǎn)擊置頂?shù)恼掌瑝Υa，效果非常不錯，這里推薦給大家，有需要的小伙伴可以參考下。

演示圖

styles.css

*{ /*清空所有元素默認(rèn)的外邊距和內(nèi)邊距*/
 
}
 
.photo_wall{
background:url(bg.jpg); /*定義照片墻的默認(rèn)背景*/
background-size:cover; /*使照片墻的背景填充照片墻*/
width:1200px; /*設(shè)置照片墻的寬高*/
height:500px;
margin:40px auto; /*設(shè)置照片墻的外邊距*/
display:-webkit-box; /*使用CSS3的盒模型之流式布局*/
display:-moz-box;
display:box;
-webkit-box-align:center; /*定義盒模型內(nèi)部元素在垂直方向上居于中間位置*/
-moz-box-align:center;
 box-align:center;
-webkit-box-pack:center; /*定義盒模型內(nèi)部元素在水平方向上居于中間位置*/
-moz-box-pack:center;
 box-pack:center;
}
 
.photo_wall .photo_frame{
text-align:center; /*照片內(nèi)的文字都是居中顯示*/
padding:10px 10px 30px 10px; /*定義照片的內(nèi)補(bǔ)白*/
background-color:#f2eada; /*設(shè)置照片的背景顏色*/
font-size:.8em; /*照片內(nèi)文字的大小*/
box-shadow:.2em .2em .8em #130c0e; /*給照片添加陰影效果，富有立體感*/
}
 
.photo_frame p{
 
margin-top:10px; /*設(shè)置照片內(nèi)顯示文字段落的外上邊距*/
}
#photo01{
position:fixed;top:90px;left:50px;
-webkit-transform-origin:right bottom; /*定義照片1的旋轉(zhuǎn)基點(diǎn)為 右下角*/
-moz-transform-origin:right bottom;
transform-origin:right bottom;
-webkit-transform:rotate(10deg); /*以基點(diǎn)為軸，在2D空間內(nèi)順時針旋轉(zhuǎn)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的旋轉(zhuǎn)基點(diǎn)為 右下角*/
-moz-transform-origin:right bottom;
transform-origin:right bottom;
-webkit-transform:rotate(-20deg); /*以基點(diǎn)為軸，在2D空間內(nèi)逆時針旋轉(zhuǎn)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的旋轉(zhuǎn)基點(diǎn)為 左上角*/
-moz-transform-origin:left top;
transform-origin:left top;
-webkit-transform:rotate(40deg); /*以基點(diǎn)為軸，在2D空間內(nèi)順時針旋轉(zhuǎn)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的旋轉(zhuǎn)基點(diǎn)為 左上角*/
-moz-transform-origin:right top;
transform-origin:right top;
-webkit-transform:rotate(-100deg); /*以基點(diǎn)為軸，在2D空間內(nèi)順時針旋轉(zhuǎn)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>
      面對兩側(cè)金色的樹木，內(nèi)心莫名的喜悅！</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 標(biāo)簽。</video>
    <p>嘉和秋季運(yùn)動會</p>
    <p>作者:忽左忽右</p>
  </div>
</body>
</html>

所用到的圖片