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>
所用到的圖片
以上所述就是本文的全部內(nèi)容了,希望能夠?qū)Υ蠹沂炀氄莆誮avascript有所幫助。
相關(guān)文章
詳解如何用webpack打包一個網(wǎng)站應(yīng)用項(xiàng)目
本篇文章主要介紹了如何用webpack打包一個網(wǎng)站應(yīng)用,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-07-07詳解微信小程序scroll-view橫向滾動的實(shí)踐踩坑及隱藏其滾動條的實(shí)現(xiàn)
這篇文章主要介紹了詳解微信小程序scroll-view橫向滾動的實(shí)踐踩坑及隱藏其滾動條的實(shí)現(xiàn),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-03-03webpack 插件html-webpack-plugin的具體使用
本篇文章主要介紹了webpack 插件html-webpack-plugin的具體使用,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-04-04在JavaScript中獲取請求的URL參數(shù)[正則]
在ASP.NET后臺代碼中,對于這樣的URL請求地址:http://www.abc.com?id=001,我們可以通過Request.QueryString["id"]的方法很容易的獲取到URL中請求的參數(shù)的值,但是要在前臺js代碼中獲取請求的參數(shù)的值,應(yīng)該怎么做呢?2010-12-12