<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../../public/jquery.min.js" type="text/javascript" charset="utf-8"></script>
设置样式
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../../public/jquery.min.js" type="text/javascript" charset="utf-8"></script>
设置样式
<style type="text/css">
.aa{
background-image: url(../../img/kongtiao/clean.jpg);
position: relative;
background-repeat: no-repeat;
background-position: center 0;
background-size: cover;
height: 760px;
}
.move-line {
position: absolute;
top: 0;
left: 50%;
1px;
height: 100%;
/* background: #fff; */
background: bisque;
z-index: 3;
}
.aa{
background-image: url(../../img/kongtiao/clean.jpg);
position: relative;
background-repeat: no-repeat;
background-position: center 0;
background-size: cover;
height: 760px;
}
.move-line {
position: absolute;
top: 0;
left: 50%;
1px;
height: 100%;
/* background: #fff; */
background: bisque;
z-index: 3;
}
#cca {
background-image: url(../../img/kongtiao/clean-btn.png);
position: absolute;
bottom: 120px;
left: -76px;
77px;
height: 77px;
margin-left: 38px;
background-color: #c7b69d;
border-radius: 50%;
z-index: 4;
background-repeat: no-repeat;
background-position: center 0;
background-size: 100% 100%;
cursor: pointer;
}
.img{
position: absolute;
top: 0;
right: 0;
50%;
height: 100%;
overflow: hidden;
z-index: 2;
/* border: 1px solid black; */
}
.img1{
background-image: url(../../img/kongtiao/clean-mask.png);
position: absolute;
top: 0;
right: 0;
100%;
height: 100%;
background-repeat: no-repeat;
background-position: center 0;
background-position-y: 70%;
}
</style>
</head>
background-image: url(../../img/kongtiao/clean-btn.png);
position: absolute;
bottom: 120px;
left: -76px;
77px;
height: 77px;
margin-left: 38px;
background-color: #c7b69d;
border-radius: 50%;
z-index: 4;
background-repeat: no-repeat;
background-position: center 0;
background-size: 100% 100%;
cursor: pointer;
}
.img{
position: absolute;
top: 0;
right: 0;
50%;
height: 100%;
overflow: hidden;
z-index: 2;
/* border: 1px solid black; */
}
.img1{
background-image: url(../../img/kongtiao/clean-mask.png);
position: absolute;
top: 0;
right: 0;
100%;
height: 100%;
background-repeat: no-repeat;
background-position: center 0;
background-position-y: 70%;
}
</style>
</head>
HTML代码
<body>
<div class="aa">
<div class="img">
<div class="img1">
</div>
</div>
<div class="move-line">
<span id="cca"></span>
</div>
</div>
</body>
</html>
<body>
<div class="aa">
<div class="img">
<div class="img1">
</div>
</div>
<div class="move-line">
<span id="cca"></span>
</div>
</div>
</body>
</html>
JQ代码：
<script type="text/javascript">
$(document).ready(function(){
var cca = $(".move-line");
/* 绑定鼠标左键按住事件 */
cca.bind("mousedown",function(event){
/* 获取需要拖动节点的坐标 */
var offset_x = $(this)[0].offsetLeft;//x坐标
var offset_x2 = $("html").width()-offset_x;//x坐标
//var offset_y = $(this)[0].offsetTop;//y坐标
/* 获取当前鼠标的坐标 */
var mouse_x = event.pageX;
//var mouse_y = event.pageY;
/* 绑定拖动事件 */
/* 由于拖动时，可能鼠标会移出元素，所以应该使用全局（document）元素 */
$(document).bind("mousemove",function(ev){
/* 计算鼠标移动了的位置 */
var _x = ev.pageX - mouse_x;
//var _y = ev.pageY - mouse_y;
var now_x1 = (offset_x + _x )
if (now_x1<=$("html").width()) {
/* 设置移动后的元素坐标 */
var now_x1 = (offset_x + _x ) + "px";
var now_x2 = (offset_x2 - _x ) + "px";
} else{
var now_x1 = $("html").width() + "px";
var now_x2 = 0 + "px";
}
//var now_y = (offset_y + _y ) + "px";
/* 改变目标元素的位置 */
$(".img").css({
//top:now_y,
now_x2});
$(".move-line").css({
//top:now_y,
left:now_x1
});
});
});
/* 当鼠标左键松开，接触事件绑定 */
$(document).bind("mouseup",function(){
$(this).unbind("mousemove");
});
})
</script>
<script type="text/javascript">
$(document).ready(function(){
var cca = $(".move-line");
/* 绑定鼠标左键按住事件 */
cca.bind("mousedown",function(event){
/* 获取需要拖动节点的坐标 */
var offset_x = $(this)[0].offsetLeft;//x坐标
var offset_x2 = $("html").width()-offset_x;//x坐标
//var offset_y = $(this)[0].offsetTop;//y坐标
/* 获取当前鼠标的坐标 */
var mouse_x = event.pageX;
//var mouse_y = event.pageY;
/* 绑定拖动事件 */
/* 由于拖动时，可能鼠标会移出元素，所以应该使用全局（document）元素 */
$(document).bind("mousemove",function(ev){
/* 计算鼠标移动了的位置 */
var _x = ev.pageX - mouse_x;
//var _y = ev.pageY - mouse_y;
var now_x1 = (offset_x + _x )
if (now_x1<=$("html").width()) {
/* 设置移动后的元素坐标 */
var now_x1 = (offset_x + _x ) + "px";
var now_x2 = (offset_x2 - _x ) + "px";
} else{
var now_x1 = $("html").width() + "px";
var now_x2 = 0 + "px";
}
//var now_y = (offset_y + _y ) + "px";
/* 改变目标元素的位置 */
$(".img").css({
//top:now_y,
now_x2});
$(".move-line").css({
//top:now_y,
left:now_x1
});
});
});
/* 当鼠标左键松开，接触事件绑定 */
$(document).bind("mouseup",function(){
$(this).unbind("mousemove");
});
})
</script>