您的位置：首页 > Web前端 > JQuery

jquery的扩展学习之offset()以及blind()的用法

2017-02-24 00:00 633 查看

offset()

作用是获取目标的top和left的坐标值，通过$(div).offset().top以及$(div).offset().left可以获得这两个值。

blind()

作用是将某个方法和某个事件结合起来，比如在点击一个图片的同时拖动鼠标，可以改变这个图片的某个属性，那么就可以在$img.mousedown方法中添加一行代码$(this).blind("mousemove",myfunction)，其中传入的第一个参数是事件名称，第二个参数是我们自定义的方法

那么问题来了

这有什么用呢？？？

通过上述的两个方法可以实现对某个框体或者图片的拖拽。具体效果如下图





这个效果用途我觉得还是挺广的，比如说制作网页游戏、制作类似QQ空间的展示网页、拖动选项至收藏栏等等

话不多说，代码如下

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-3.1.1.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.movediv {
line-height: 30px;
background: blue;
width: 120px;
text-align: center;
border: 1px solid black;
float: left;
margin: 10px;
}
</style>
<script type="text/javascript">
$(function() {
//创建一个接收拖拽目标top坐标的变量
var divtop;
//创建一个接收拖拽目标left坐标的变量
var divleft;
//创建一个接收鼠标top坐标的变量
var mousetop;
//创建一个接收鼠标left坐标的变量
var mouseleft;
//创建一个在拖拽目标上按下鼠标的事件
$(".movediv").mousedown(function(e) {
//获得按下鼠标时拖拽目标以及鼠标的top和left坐标
divtop = $(this).offset().top;
divleft = $(this).offset().left;
mousetop = e.pageY;
mouseleft = e.pageX;
//创建一个移动拖拽目标的连接，使目标在移动的过程中不断调用自定义的movediv方法
$(this).bind('mousemove', movediv);

})
//创建一个动态获取鼠标和拖拽目标当前坐标的方法
function movediv(event) {
var newdivtop = divtop + (event.pageY - mousetop);
var newdivleft = divleft + (event.pageX - mouseleft);
//将获取到的坐标添加到拖拽目标中，使得拖拽目标不断跟随鼠标移动
$(this).css({
'top' : newdivtop + 'px',
'left' : newdivleft + 'px',
'position' : 'absolute'
})
}
//创建一个松开鼠标的方法，并且在鼠标松开时断开blind连接
$(".movediv").mouseup(function() {
$(this).unbind("mousemove");
})

})
</script>
</head>

<body>
<div class="movediv">
拖啊拖啊拖
</div>
<div class="movediv">
我再拖啊拖啊拖
</div>
</body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  offset() blind() jQuery 拖拽
相关文章推荐
新的分享
章节导航