JavaScript實現(xiàn)圖片拖曳效果
更新時間：2017年09月08日 09:15:37 作者：周森
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)圖片拖曳效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js實現(xiàn)圖片拖曳效果的具體代碼，供大家參考，具體內(nèi)容如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#pbox{
width: 100%;
height:100%;
}
#box{
width: 200px;
height: 200px;
background:red;
position: absolute;
}
</style>
</head>
<body>
<input type="button" id="btn" value="隨機生成">
<div id="pbox">
<div id="box">
</div>
</div>
</body>
<script>
var btn=document.getElementById("btn");//獲取按鈕
var box=document.getElementById("box");//獲取box
var pbox=document.getElementById("pbox");//獲取pbox
var arr=['#fff143','#ff7500','#a3d900','#eedeb0','#ae7000','#b35c44','#392f41','#ff461f','#44cef6','#edd1db','#003371'];//隨機顏色
//給btn注冊點擊事件ain
btn.onclick=function(){
pbox.innerHTML="";//清空pbo
for(var i=0;i<=10;i++){
var newTip =box.cloneNode(true);
pbox.appendChild(newTip);
var left=parseInt(Math.random()*(900-100+1) + 100);//隨機生成左邊距
var top=parseInt(Math.random()*(500-100+1) + 100);//隨機生成上邊距
var bg=Math.floor((Math.random()*arr.length));//生成數(shù)組隨機數(shù)獲得隨機數(shù)組下標(biāo)
box.style.background=arr[bg];//設(shè)置顏色
box.style.top=top+"px";//設(shè)置上邊距
box.style.left=left+"px";//設(shè)置左邊距
}
var c=pbox.children;
for(var i=0;i< c.length;i++){
c[i].onmousedown=function (e) {
// alert(this.offsetLeft);
var spacex=e.pageX-this.offsetLeft;
var spacey=e.pageY-this.offsetTop;
this.onmousemove=function (e) {
this.style.left=e.pageX-spacex+"px";
this.style.top=e.pageY-spacey+"px";
}
};
c[i].onmouseup=function () {
this.onmousemove=null;
}
}
}
</script>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家介紹了js前端獲取用戶位置及ip屬地信息示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
下拉緩沖菜單效果想必大家都有見過吧，在本文使用JS輕松實現(xiàn)下，想學(xué)習(xí)的朋友可以參考下2013-08-08
使用watch在微信小程序中實現(xiàn)全局狀態(tài)共享
這篇文章主要給大家介紹了關(guān)于如何使用watch在小程序中實現(xiàn)全局狀態(tài)共享的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家學(xué)習(xí)或者使用微信小程序具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
擴展javascript的Date方法實現(xiàn)代碼(prototype)
長期從事C#的開發(fā)，被C#影響著我的思維。C#中DateTime的操作就很方便，于是就參考它對js的Date做了擴展。2010-11-11
這篇文章主要為大家詳細介紹了js實現(xiàn)打字小游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-12-12
這篇文章主要為大家詳細介紹了js實現(xiàn)移動端輪播圖效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
JavaScript是單線程的腳本語言,所以代碼在執(zhí)行的時候,只有一個主線程來執(zhí)行所有的任務(wù),同一個時間只能做同一件事情。本文就為大家詳細講解一下它的件循環(huán)機制，需要的可以參考一下2022-04-04
這篇文章主要給大家介紹了關(guān)于在JavaScript中如何使用宏的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
上部分我們逐一分析了各瀏覽器的可行方法，這部分將搞鼓出一個統(tǒng)一的類來實現(xiàn)跨瀏覽器的線性漸變。2009-10-10
圖片完美縮放...2006-09-09