JavaScript:Div層拖動(dòng)效果實(shí)例代碼
更新時(shí)間：2013年08月06日 11:43:08 作者：
這篇文章介紹了JavaScript:Div層拖動(dòng)效果實(shí)例代碼，有需要的朋友可以參考一下
Div層拖動(dòng)效果圖:
實(shí)現(xiàn)：
CSS：
復(fù)制代碼 代碼如下:
<style>
div
{
position:relative;
}
</style>
JS：
復(fù)制代碼 代碼如下:
<script type="text/javascript">
var mouseover=true
var xcoor;
var ycoor;
function coordinates()
{
if (event.srcElement.id.indexOf("wishbroad") == 0)
{
event.srcElement.style.zIndex = 1000;
mouseover=true;
pleft=event.srcElement.style.pixelLeft;
ptop=event.srcElement.style.pixelTop;
xcoor=event.clientX;
ycoor=event.clientY;
document.onmousemove=moveImage;
}
}
function moveImage()
{
if (mouseover&&event.button==1)
{
event.srcElement.style.pixelLeft=pleft+event.clientX-xcoor;
event.srcElement.style.pixelTop=ptop+event.clientY-ycoor;
return false;
}
}
function mouseup()
{
event.srcElement.style.zIndex = 1;
mouseover=false;
}
document.onmousedown=coordinates;
document.onmouseup=mouseup;
</script>
HTML：
復(fù)制代碼 代碼如下:
<html>
<head>Div層拖動(dòng)</head>
<body>
<div id="wishbroad1" style="width:200px; height:100px;border:1px solid black;background:gray;">
中國(guó)
</div>
<div id="wishbroad2" style="width:200px; height:100px;border:1px solid red;background:red;">
美國(guó)
</div>
<div id="wishbroad3" style="width:200px; height:100px;border:1px solid red;background:green;">
日本
</div>
<div id="wishbroad4" style="width:200px; height:100px;border:1px solid red;background:pink;">
巴西
</div>
</body>
</html>
您可能感興趣的文章:
- Javascript實(shí)現(xiàn)div層漸隱效果的方法
- JavaScript實(shí)現(xiàn)圖片DIV豎向滑動(dòng)的方法
- javascript實(shí)現(xiàn)點(diǎn)擊按鈕讓DIV層彈性移動(dòng)的方法
- Javascript動(dòng)態(tài)創(chuàng)建div的方法
- javascript實(shí)現(xiàn)節(jié)點(diǎn)（div）名稱編輯
- Javascript簡(jiǎn)單實(shí)現(xiàn)可拖動(dòng)的div
- JavaScript動(dòng)態(tài)創(chuàng)建div屬性和樣式示例代碼
- 如何創(chuàng)建一個(gè)JavaScript彈出DIV窗口層的效果
- Javascript實(shí)現(xiàn)div的toggle效果實(shí)例分析
相關(guān)文章
如何使用工具規(guī)范前端項(xiàng)目的commits與changelog技巧
這篇文章主要為大家介紹了如何使用工具規(guī)范前端項(xiàng)目的commits與changelog技巧詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
本文主要介紹了原生js仿淘寶網(wǎng)商品放大鏡效果的實(shí)例，具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-02-02
JS實(shí)現(xiàn)京東首頁(yè)之頁(yè)面頂部、Logo和搜索框功能
這篇文章主要實(shí)現(xiàn)京東的頁(yè)面頂部，logo和搜索框功能，本文有效果展示，頁(yè)面布局詳細(xì)分析，具體實(shí)現(xiàn)代碼，介紹的非常詳細(xì)，具有參考借鑒價(jià)值，需要的的朋友參考下吧2017-01-01
layui默認(rèn)選中table的CheckBox復(fù)選框方法
今天小編就為大家分享一篇layui默認(rèn)選中table的CheckBox復(fù)選框方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2019-09-09
JavaScript圖片旋轉(zhuǎn)效果實(shí)現(xiàn)方法詳解
這篇文章主要介紹了JavaScript圖片旋轉(zhuǎn)效果實(shí)現(xiàn)方法詳解,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-06-06
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)打卡簽到頁(yè)面，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
javascript跟隨滾動(dòng)效果插件代碼（javascript Follow Plugin）
這篇文章介紹了javascript跟隨滾動(dòng)效果插件代碼（javascript Follow Plugin），有需要的朋友可以參考一下2013-08-08
這篇文章主要為大家詳細(xì)介紹了JavaScript中參數(shù)傳遞三種方式：按值傳遞、引用傳遞和共享傳遞,文中的示例代碼講解詳細(xì),感興趣的可以了解下2023-09-09
javascript 實(shí)現(xiàn)字符串反轉(zhuǎn)的三種方法
這篇文章主要介紹了javascript 實(shí)現(xiàn)字符串反轉(zhuǎn)的三種方法，有需要的朋友可以參考一下2013-11-11
許多人對(duì)JavaScript的原型及原型鏈仍感到困惑，網(wǎng)上的文章又大多長(zhǎng)篇大論，令讀者不明覺厲。下面小編將用最簡(jiǎn)潔明了的圖文介紹JavaScript的原型及原型鏈。2016-08-08