JavaScript實現(xiàn)圖片拖曳效果
更新時間：2017年09月08日 09:15:37 作者：周森
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)圖片拖曳效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js實現(xiàn)圖片拖曳效果的具體代碼，供大家參考，具體內容如下
<!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ù)組下標
box.style.background=arr[bg];//設置顏色
box.style.top=top+"px";//設置上邊距
box.style.left=left+"px";//設置左邊距
}
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>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
今天小編就為大家分享一篇layui 監(jiān)聽表格復選框選中值的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了JS如何獲取Promise對象里面的值問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要介紹了微信小程序如何實現(xiàn)精確的日期時間選擇器,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-01-01
這篇文章主要為大家詳細介紹了javascript實現(xiàn)京東登錄顯示隱藏密碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
這篇文章主要為大家介紹了uniapp自定義多列瀑布流組件實戰(zhàn)總結,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-09-09
記得meta標簽當中有一個refresh的功能嗎？這是讓瀏覽的頁面刷新并可以轉到相應的頁面，如果刷新本頁的話就會造成重復的刷新，現(xiàn)在我們就試試用腳本來實現(xiàn)只讓頁面刷新一次.2009-07-07
本文將介紹一下Js獲取Gridview選中行的內容的過程及步驟:取得gridview中獲取選中行指定列的值.獲取鼠標點擊的元素等等，感興趣的朋友可以了解下，或許對你學習js方面知識有所幫助2013-02-02
深入理解JavaScript系列(9) 根本沒有“JSON對象”這回事！
寫這篇文章的目的是經(jīng)?？吹介_發(fā)人員說：把字符串轉化為JSON對象，把JSON對象轉化成字符串等類似的話題，所以把之前收藏的一篇老外的文章整理翻譯了一下，供大家討論，如有錯誤，請大家指出，多謝2012-01-01
觀察者模式有時也稱為發(fā)布--訂閱模式，在觀察者模式中，有一個觀察者可以管理所有的目標，等到有狀態(tài)發(fā)生改變的時候發(fā)出通知2016-03-03
這篇文章主要給大家介紹了關于js數(shù)據(jù)類型以及其判斷方法的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-03-03