不带有click
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<title>练习 拖拽高级</title>
<style>
*{
margin:0;
padding:0;
list-style:none;}
.outer{
height:350px;
width:350px;
background-color:grey;
position:relative;
left:100px;
top:100px;
background:url(images2/xiaotu.jpg) no-repeat;
border:1px solid;}
.box{
height:120px;
width:120px;
background-color:pink;
position:absolute;
opacity:0.5;
}
.show{
height:400px;
width:400px;
border:1px solid;
position:absolute;
left:500px;
top:100px;
background:url(images2/datu.jpg) no-repeat;
}
.hide{
display:none;}
</style>
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<div class="outer">
<div class="box hide">
</div>
</div>
<div class="show hide">
</div>
<script>
$(document).ready(function(e) {
//鼠标离开时候，隐藏box
$(".outer").mouseout(function(){
$(".box,.show").addClass("hide");
}
);
//鼠标 在window中移动 div跟随移动
$(".outer").mousemove(function(e){
$(".box,.show").removeClass("hide");
var boxX=e.pageX-$(".outer").offset().left-60;
var boxY=e.pageY-$(".outer").offset().top-60;
//盒子不出边框
if(e.pageX<$(".outer").offset().left+60){
boxX=0;
}
if(e.pageX>$(".outer").offset().left-60+$(".outer").outerWidth()){
console.log("gt");
boxX=$(".outer").outerWidth()-120;
}
if(e.pageY>$(".outer").offset().top-60+$(".outer").outerHeight()){
boxY=$(".outer").outerHeight()-120;
}
if(e.pageY<$(".outer").offset().top+60){
boxY=0;
}
//鼠标的move事件中改变 box位置
$(".box").css({
"left":boxX,
"top":boxY
});
//鼠标移动改变 show中图片的位置
var showX=-boxX*800/350;
var showY=-boxY*800/350;
console.log("showx"+showX);
$(".show").css({"background-position":showX+"px "+showY+"px"});
});
});
</script>
</body>
</html>
带有click的拖拽
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<title>练习 拖拽高级</title>
<style>
*{
margin:0;
padding:0;
list-style:none;}
.outer{
height:350px;
width:350px;
background-color:grey;
position:relative;
left:100px;
top:100px;
background:url(images2/xiaotu.jpg) no-repeat;
border:1px solid;}
.box{
height:120px;
width:120px;
background-color:pink;
position:absolute;
opacity:0.5;
}
.show{
height:400px;
width:400px;
border:1px solid;
position:absolute;
left:500px;
top:100px;
background:url(images2/datu.jpg) no-repeat;
}
</style>
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<div class="outer">
<div class="box">
</div>
</div>
<div class="show">
</div>
<script>
$(document).ready(function(e) {
//存储鼠标的状态
var isClick=false;
//鼠标在 div mousedown的时候变为true
$(".box").mousedown(function(){
isClick=true;
console.log(isClick);
});
//鼠标松开 变为 false 注意此处是在 window 中
$(window).mouseup(function(){
isClick=false;
console.log(isClick);
});
//鼠标 在window中移动 div跟随移动
$(window).mousemove(function(e){
if(isClick){
var boxX=e.pageX-$(".outer").offset().left-60;
var boxY=e.pageY-$(".outer").offset().top-60;
//盒子不出边框
if(e.pageX<$(".outer").offset().left+60){
boxX=0;
}
if(e.pageX>$(".outer").offset().left-60+$(".outer").outerWidth()){
console.log("gt");
boxX=$(".outer").outerWidth()-120;
}
if(e.pageY>$(".outer").offset().top-60+$(".outer").outerHeight()){
boxY=$(".outer").outerHeight()-120;
}
if(e.pageY<$(".outer").offset().top+60){
boxY=0;
}
//鼠标的move事件中改变 box位置
$(".box").css({
"left":boxX,
"top":boxY
});
//鼠标移动改变 show中图片的位置
var showX=-boxX*800/350;
var showY=-boxY*800/350;
console.log("showx"+showX);
$(".show").css({"background-position":showX+"px "+showY+"px"});
}
});
});
</script>
</body>
</html>
