点击图片后图片随鼠标移动/图片拖拽

最新推荐文章于 2024-03-03 21:56:30 发布

广东话的蛇皇

最新推荐文章于 2024-03-03 21:56:30 发布

阅读量1k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_43618136/article/details/104294648

版权

前端专栏收录该内容

352 篇文章 1 订阅

订阅专栏

点击图片后图片随鼠标移动/图片拖拽

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    img{
position: absolute;
    }
  </style>
</head>
<body>
<img src="images/tianshi.gif" alt="" id="img">
<script>
  //鼠标在页面中移动,图片跟着鼠标移动
  document.onmousemove=function (e) {
    //鼠标的移动的横纵坐标
    //可视区域的横坐标
    //可视区域的纵坐标
    document.getElementById("img").style.left=e.clientX+"px";
    document.getElementById("img").style.top=e.clientY+"px";
  };
</script>
</body>
</html>

导航例子

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    * {
      margin: 0;
      padding: 0
    }

    ul {
      list-style: none
    }

    body {
      background-color: #333;
    }

    .nav {
      width: 800px;
      height: 42px;
      margin: 100px auto;
      background: url(images/rss.png) right center no-repeat;
      background-color: #fff;
      border-radius: 10px;
      position: relative;
    }

    .nav li {
      width: 83px;
      height: 42px;
      text-align: center;
      line-height: 42px;
      float: left;
      cursor: pointer;
    }

    .nav span {
      position: absolute;
      top: 0;
      left: 0;
      width: 83px;
      height: 42px;
      background: url(images/cloud.gif) no-repeat;
    }

    ul {
      position: relative;
    }
  </style>
</head>
<body>
<div class="nav">
  <span id="cloud"></span>
  <ul id="navBar">
    <li>北京校区</li>
    <li>上海校区</li>
    <li>广州校区</li>
    <li>深圳校区</li>
    <li>武汉校区</li>
    <li>关于我们</li>
    <li>联系我们</li>
    <li>招贤纳士</li>
  </ul>
</div>

<script>
  //匀速动画
  function animate(element, target) {
    //清理定时器
    clearInterval(element.timeId);
    element.timeId = setInterval(function () {
      //获取元素的当前位置
      var current = element.offsetLeft;
      //移动的步数
      var step = (target - current) / 10;
      step = step > 0 ? Math.ceil(step) : Math.floor(step);
      current += step;
      element.style.left = current + "px";
      if (current == target) {
        //清理定时器
        clearInterval(element.timeId);
      }
      //测试代码:
      console.log("目标位置:" + target + ",当前位置:" + current + ",每次移动步数:" + step);
    }, 20);
  }


  //获取云彩
  var cloud = document.getElementById("cloud");
  //获取所有的li标签
  var list = document.getElementById("navBar").children;
  //循环遍历分别注册鼠标进入,鼠标离开,点击事件
  for (var i = 0; i < list.length; i++) {
    //鼠标进入事件
    list[i].onmouseover = mouseoverHandle;
    //点击事件
    list[i].onclick = clickHandle;
    //鼠标离开事件
    list[i].onmouseout = mouseoutHandle;
  }
  function mouseoverHandle() {//进入
    //移动到鼠标此次进入的li的位置
    animate(cloud, this.offsetLeft);
  }
  //点击的时候,记录此次点击的位置
  var lastPosition = 0;
  function clickHandle() {//点击
    lastPosition = this.offsetLeft;
  }
  function mouseoutHandle() {//离开
    animate(cloud, lastPosition);
  }


</script>
</body>
</html>

鼠标摆尾

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    body{
      height: 2000px;
    }
    img{
      position: absolute;
    }
  </style>
</head>
<body>

<img src="images/bird.png" alt="" id="img" />
<script src="common.js"></script>
<script>

  //页面的鼠标移动事件
  document.onmousemove=function (e) {
    //鼠标相对于页面的可视区域的横坐标
    //my$("im").style.left=e.clientX+"px";
    //鼠标相对于页面的可视区域的纵坐标
    //my$("im").style.top=e.clientY+"px";

    //因为IE8的浏览器中针对事件参数对象使用的是window.event,那么,事件处理函数中是没有e这个参数的,所以,使用window.event来代替e
//    my$("im").style.left=window.event.clientX+"px";
//    my$("im").style.top=window.event.clientY+"px";

    //火狐浏览器支持的事件参数对象:e,不支持window.event

    //1.=======此时window.event和事件参数对象e是需要兼容的
    //2. pageX和pageY就是鼠标相对于页面的边界的坐标

    //下面的代码在谷歌和火狐支持
//    my$("im").style.left=e.pageX+"px";
//    my$("im").style.top=e.pageY+"px";

    //下面的代码在IE8中不支持,不支持pageX和pageY的属性
//    my$("im").style.left=window.event.pageX+"px";
//    my$("im").style.top=window.event.pageY+"px";

    function getScroll() {
      return {
        left:window.pageXOffset||document.body.scrollLeft||document.documentElement.scrollLeft||0,
        top:window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop||0
      }
    }
    //可视区域横坐+向左卷曲出去的横坐标
    document.getElementById("img").style.left=window.event.clientX+getScroll().left+"px";
    //可视区域纵坐标+向上卷曲出去的纵坐标
    document.getElementById("img").style.top=window.event.clientY+getScroll().top+"px";

  };

</script>

</body>
</html>

最终版封装

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    body{
      height: 2000px;
    }
    img{
      position: absolute;
    }
  </style>
</head>
<body>
<img src="images/bird.png" alt="" id="im" />
<script src="common.js"></script>
<script>


  //图片跟着鼠标飞,可以在任何的浏览器中实现
  //window.event和事件参数对象e的兼容
  //clientX和clientY单独的使用的兼容代码
  //scrollLeft和scrollTop的兼容代码
  //pageX,pageY和clientX+scrollLeft 和clientY+scrollTop

  //把代码封装在一个函数

  //把代码放在一个对象中
  var evt={
    //window.event和事件参数对象e的兼容
    getEvent:function (evt) {
      return window.event||evt;
    },
    //可视区域的横坐标的兼容代码
    getClientX:function (evt) {
      return this.getEvent(evt).clientX;
    },
    //可视区域的纵坐标的兼容代码
    getClientY:function (evt) {
      return this.getEvent(evt).clientY;
    },
    //页面向左卷曲出去的横坐标
    getScrollLeft:function () {
      return window.pageXOffset||document.body.scrollLeft||document.documentElement.scrollLeft||0;
    },
    //页面向上卷曲出去的纵坐标
    getScrollTop:function () {
      return window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop||0;
    },
    //相对于页面的横坐标(pageX或者是clientX+scrollLeft)
    getPageX:function (evt) {
      return this.getEvent(evt).pageX? this.getEvent(evt).pageX:this.getClientX(evt)+this.getScrollLeft();
    },
    //相对于页面的纵坐标(pageY或者是clientY+scrollTop)
    getPageY:function (evt) {
      return this.getEvent(evt).pageY?this.getEvent(evt).pageY:this.getClientY(evt)+this.getScrollTop();
    }



  };
  //最终的代码

  document.onmousemove=function (e) {
    document.getElementById("im").style.left=evt.getPageX(e)+"px";
    document.getElementById("im").style.top=evt.getPageY(e)+"px";
  };



//  var obj={
//    sayHi:function () {
//      console.log("考尼奇瓦");
//      this.eat();//this就是obj这个对象
//    },
//    eat:function () {
//      console.log("饭以ok,下来密西吧");
//    }
//
//  };
//  //调用sayHi方法的同时,调用eat方法,是否可以在一个方法中调用另一个方法?
//  //在对象的方法中调用另一个方法如何调用?
//
//  obj.sayHi();



</script>
</body>
</html>