jq 拖拽练习


不带有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>
阅读更多
个人分类: js
上一篇offset() position()
下一篇html5 流式布局 弹式布局 flex
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭