美高梅手机平台:jQuery实现div跟随鼠标移动,jQuery实现跟随鼠标运动图层效果的方法

美高梅手机平台,所谓鼠标跟随,一般就是指鼠标移到哪张图纸上,那该张图片的加大图片就能够冒出,何况拓宽图片会趁着鼠标在该张图片上移步而运动。

正文实例呈报了jQuery完结跟随鼠标运动图层效果的章程。分享给我们供大家参照他事他说加以考察。具体分析如下:

美高梅手机平台:jQuery实现div跟随鼠标移动,jQuery实现跟随鼠标运动图层效果的方法。jQuery完成跟随鼠标运动图层效果的情势,jquery跟随

正文实例叙述了jQuery达成跟随鼠标运动图层效果的点子。分享给大家供大家参谋。具体解析如下:

一、基本对象

写三个随从鼠标运动的图层,

图层中显稳当前鼠标的职位,

如下图所示:

美高梅手机平台 1

此图层之所以采纳jQuery,并不是因为javascript,是因为jQuery的代码其便于包容当前的兼具主流的浏览器,至少IE8是未有其他难点的,不用像javascript大段大段的代码都用到包容性方面了。

二、制作进度

本次试验的大旨是jquery里面包车型客车mousemove事件,

鼠标移动则触发。

代码如下:

复制代码 代码如下:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“; 
<html xmlns=”; 
<head> 
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″
/> 
<title>mouse</title> 
<script type=”text/javascript”
src=”js/jquery-1.11.1.js”></script> 
</head> 
 
<body> 
<!–允许此图层不按任何方法对齐,能够别的游离–> 
<div id=”mousePosition” style=”position:absolute;”></div> 
<script> 
/*一对e.pageX与e.pageY则足以取到鼠标当前的坐标,注意则最初的函数注脚里面使用e方式参数*/ 
$(document).mousemove(function (e) { 
    var x; 
    var y; 
    var xy=”<br>x坐标:”+e.pageX+”,y坐标:”+e.pageY; 
    x=e.pageX; 
    y=e.pageY; 
    document .getElementById(“mousePosition”).style.left = x + “px”; 
    document .getElementById(“mousePosition”).style.top = y + “px”; 
    $(“#mousePosition”).html(xy); 
}) 
 
</script> 
</body> 
</html>

可望本文所述对大家的jQuery程序设计有着援救。

本文实例呈报了jQuery达成跟随鼠标运动图层效果的办法。共享给大家供咱们参谋。具体分…

jQuery完结div跟随鼠标移动,jquerydiv跟随鼠标

重在是弄领悟怎么着获取鼠标现地方与活动后地方,div今后任务与活动后地点:

用jQuery完成div随鼠标移动而移动,不是鼠标自己的任务!!而是div绝对于事先地点的活动

代码如下:(注意看清水蓝部分的解释)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="{utf-8}">
    <title></title>
    <script src="../jquery-3.2.0.js"></script>
    <style>
      .aa{
        height: 100px;
        width: 200px;
        position: absolute;
        background-color: green;
      }
    </style>
  </head>
  <body>
    <div class="aa"></div>
  </body>
</html>
<script>
  $(".aa").mousedown(function(e){
    //设置移动后的默认位置
    var endx=0;
    var endy=0;

    //获取div的初始位置,要注意的是需要转整型,因为获取到值带px
    var left= parseInt($(".aa").css("left"));
    var top = parseInt($(".aa").css("top"));

    //获取鼠标按下时的坐标,区别于下面的es.pageX,es.pageY
    var downx=e.pageX;
    var downy=e.pageY;   //pageY的y要大写,必须大写!!

   //  鼠标按下时给div挂事件
  $(".aa").bind("mousemove",function(es){

    //es.pageX,es.pageY:获取鼠标移动后的坐标
    var endx= es.pageX-downx+left;   //计算div的最终位置
    var endy=es.pageY-downy+top;

    //带上单位
    $(".aa").css("left",endx+"px").css("top",endy+"px")  
  });  
 })


  $(".aa").mouseup(function(){
    //鼠标弹起时给div取消事件
    $(".aa").unbind("mousemove")
  })

</script>

分别于上面这段代码:(最后促成效益是div随鼠标地点移动,具体职能想看的可以贴补复制相比较看看差别在哪)

  <script>
$(".aa").mousedown(function(e){
  $(document).bind("mousemove",function(e){
    $(".aa").css("left",e.pageX).css("top",e.pageY)
  });
})
  $(".aa").mouseup(function(){
    $(document).unbind("mousemove")
  })
  </script>

如上正是本文的全体内容,希望对大家的学习抱有帮忙,也指望我们多多辅助帮客之家。

注重是弄理解如何获取鼠标现地点与运动后地方,div未来职分与活动后地方:
用jQuery完毕div随…

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title></title>
 <style>
  *{
   margin:0;
   padding:0;
  }
  img{
   border:none;
  }
  .box{
   width:660px;
   position: relative;
  }
  .box .mark{
   position: absolute;
   width: 400px;
   height: 300px;
   display: none;
  }
  .box .mark img{
   width: 100%;
  }
  .box img{
   width: 150px;
   float: left;
   margin:5px;
  }
 </style>
</head>
<body>
<div class="box" id="box">
 <img src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=e95708d565639d99576ae7cb00729334" 
  realImg="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=5328802dc943fc046e109f70359add0a" alt="美高梅手机平台 2"/>
 <img src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=9e5459a7c0098c27adf4bdd73889caa9" 
  realImg="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=846f4d1987765dc4cfd5a06fcdd2dcc1" alt="美高梅手机平台 3"/>
 <img src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=3cd1c8e301007f0c94850139ac79cb5a" 
  realImg="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=747bf3f7092ebd2b0bf9fcd27e28bbe5" alt="美高梅手机平台 4"/>
 <img src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=f391169b2cf678aa6fd253cf40d9821d" 
  realImg="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=fec8d2f20fad1f28d540337a831e89d0" alt="美高梅手机平台 5"/>
 <div id="mark" class="mark"><img src="" alt="美高梅手机平台 6"/></div>
</div>
<script src="http://s0.kuaizhan.com/res/skin/js/lib/jquery-2.0.3.min.js"></script>
<script>
 //1.鼠标移入哪张图片的时候,让他对应的大图显示;
 //2.当鼠标在img中移动的时候,大图跟着走;
 var $box=$('.box');
 var $aImg=$box.children('img');
 var $mark=$('.mark');
 var $offset=$box.offset();
 $aImg.mouseover(function(){
  //当鼠标移入每张图片的时候,让mark显示,并且,让mark里面的img标签,src属性值为当前这个图片的realImg属性上拿到的值;
  $mark.show().find('img').attr('src',$(this).attr('realImg'));
 });
 $aImg.mousemove(function(e){
  //拿鼠标的x坐标,减去$box距离body的left位置;
  var left= e.clientX-$offset.left+10;
  var top= e.clientY-$offset.top+10;
  $mark.css({left:left,top:top})
 });
 $aImg.mouseout(function(){
  $mark.hide();
 })
</script>
</body>
</html>

一、基本对象

如上正是本文的全体内容,希望本文的从头到尾的经过对大家的就学可能专业能拉动一定的支持,同不常候也冀望多多帮衬脚本之家!

写贰个随从鼠标运动的图层,

你可能感兴趣的篇章:

  • jQuery达成鼠标跟随提醒层效果代码(可体现文本,Div,Table,Html等)
  • 传说JQuery的五个简约的鼠标跟随提醒意义
  • js案例之鼠标跟随jquery版(实例讲授)

图层中突显当前鼠标的职位,

网站地图xml地图