javascript實(shí)現(xiàn)了照片拖拽點(diǎn)擊置頂?shù)恼掌瑝Υa
更新時(shí)間：2015年04月03日 09:47:16 投稿：hebedich
這篇文章主要介紹了javascript實(shí)現(xiàn)了照片拖拽點(diǎn)擊置頂?shù)恼掌瑝Υa，效果非常不錯(cuò)，這里推薦給大家，有需要的小伙伴可以參考下。
演示圖
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)順時(shí)針旋轉(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)逆時(shí)針旋轉(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)順時(shí)針旋轉(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)順時(shí)針旋轉(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>
面對(duì)兩側(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)動(dòng)會(huì)</p>
<p>作者:忽左忽右</p>
</div>
</body>
</html>
所用到的圖片
以上所述就是本文的全部?jī)?nèi)容了，希望能夠?qū)Υ蠹沂炀氄莆誮avascript有所幫助。
相關(guān)文章
詳解如何用webpack打包一個(gè)網(wǎng)站應(yīng)用項(xiàng)目
本篇文章主要介紹了如何用webpack打包一個(gè)網(wǎng)站應(yīng)用，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)無縫輪播圖插件封裝，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-07-07
詳解微信小程序scroll-view橫向滾動(dòng)的實(shí)踐踩坑及隱藏其滾動(dòng)條的實(shí)現(xiàn)
這篇文章主要介紹了詳解微信小程序scroll-view橫向滾動(dòng)的實(shí)踐踩坑及隱藏其滾動(dòng)條的實(shí)現(xiàn)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-03-03
webpack 插件html-webpack-plugin的具體使用
本篇文章主要介紹了webpack 插件html-webpack-plugin的具體使用，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-04-04
本篇文章主要介紹了微信小程序自定義多選事件的實(shí)現(xiàn)代碼，小程序和vue一樣是沒法操作dom的，所以要利用數(shù)組的下標(biāo)和自定義屬性來進(jìn)行三元判斷，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-05-05![在JavaScript中獲取請(qǐng)求的URL參數(shù)[正則]](http://img.jbzj.com/images/xgimg/bcimg5.png)
在JavaScript中獲取請(qǐng)求的URL參數(shù)[正則]
在ASP.NET后臺(tái)代碼中，對(duì)于這樣的URL請(qǐng)求地址：http://www.abc.com?id=001,我們可以通過Request.QueryString["id"]的方法很容易的獲取到URL中請(qǐng)求的參數(shù)的值，但是要在前臺(tái)js代碼中獲取請(qǐng)求的參數(shù)的值，應(yīng)該怎么做呢？2010-12-12
Bootstrap，來自 Twitter，是目前最受歡迎的前端框架。本文給大家介紹BootStrap 柵格系統(tǒng)的相關(guān)資料,需要的朋友可以參考下2016-04-04
這篇文章主要介紹了JS實(shí)現(xiàn)前端路由功能,結(jié)合實(shí)例形式分析了js實(shí)現(xiàn)原生路由的相關(guān)原理與操作技巧,需要的朋友可以參考下2020-05-05
利用JS實(shí)現(xiàn)簡(jiǎn)單的日期選擇插件
這篇文章主要介紹了利用JS實(shí)現(xiàn)簡(jiǎn)單的日期選擇插件，文中實(shí)現(xiàn)兩種效果的日期選擇，一種是默認(rèn)參數(shù)，點(diǎn)擊日期后直接選擇該日期，另一種是顯示按鈕來設(shè)置時(shí)間，有需要的朋友可以參考借鑒，下面來一起看看吧。2017-01-01
這篇文章主要為大家詳細(xì)介紹了微信小程序自定義Dialog彈框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07