几种实用的JavaScript鼠标特效,在我们平时网页设计中，鼠标特效可以说是常常会用到，那么今天我们来讲讲通过JS代码实现一些实用的鼠标特效，希望对大家有用。......
2023-03-17 528 JAVASCRIPT 鼠标
JavaScript拖拽效果代码
来源：互联网
2023-03-16 23:57:39 版权归原作者所有，如有侵权，请联系我们
JavaScript拖拽效果代码
工具/原料
- adobe dreamweaver
方法/步骤
新建html文档。
书写hmtl代码。div id="aaa">/div>
书写css代码。
style>
*{margin:0;padding:0;list-style:none;}
#aaa{position:absolute;left:30%;top:30%;width:100px;height:100px;background-color:#2bb7e4;cursor:move;}
/style>
书写并添加js代码。
script>
var oBox = document.getElementById('aaa');
oBox.onmousedown = function(e){
var oEvent =e || window.event,
disL = oEvent.clientX - oBox.offsetLeft,
disT = oEvent.clientY - oBox.offsetTop,
maxL = document.documentElement.clientWidth - oBox.offsetWidth,
maxT = document.documentElement.clientHeight - oBox.offsetHeight;
document.onmousemove = function(e){
var oEvent = e || window.event,
disX = oEvent.clientX - disL,
disY = oEvent.clientY - disT;
if(disX = 0){ disX = 0}
if(disY = 0){ disY = 0}
if(disX >= maxL){ disX = maxL}
if(disY >= maxT){ disY = maxT}
oBox.style.left = disX 'px';
oBox.style.top = disY 'px';
}
}
document.onmouseup = function(){
document.onmousemove = null;
}
/script>
代码整体结构。
查看效果。
以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！
相关文章
- 详细阅读
-
如何开始学习javascript详细阅读
如何开始学习javascript,html是网页的内容，c是网页的格式，h是网站的后台，j是网站的前端，那么如何学习j，才能高效？......
2023-03-17 256 JAVASCRIPT
- 详细阅读