jQuery实现网页特效之拖拽元素

来源：互联网发布：张予曦的淘宝店铺编辑：程序博客网时间：2024/06/05 08:01

效果：

代码：

<!doctype html><!DOCTYPE html><html><head><title></title><script type="text/javascript" src="./jquery-3.2.1.min.js"></script></head><body><div id="drag_box" style="height:140px;width:300px;background:red;position:absolute;top:0px;left:0px;"></div><script type="text/javascript">$(document).ready(function(){$("#drag_box").mousedown(function(){var x = $("#drag_box").css("left").split("px");/*将drag_box的left进行加工  split()返回一个数组*/var y = $("#drag_box").css("top").split("px");var dx = event.pageX - parseInt(x[0]);/*计算距离*/var dy = event.pageY - parseInt(y[0]);$("#drag_box").mousemove(function(move){var now_x = event.pageX;var now_y = event.pageY;$("#drag_box").css("left", now_x - dx + "px");$("#drag_box").css("top", now_y - dy + "px");$("#drag_box").mouseup(function(){/*鼠标松开结束move*/$("#drag_box").unbind(move);/*移除命名为move的事件*/});});});});</script></body></html>

如果添加该特效到网页中：

就可以实现桌面WEB的部分功能。

阅读全文

2 0