jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】


Posted in jQuery onAugust 28, 2018

本文实例讲述了jQuery实现的响应鼠标移动方向插件用法。分享给大家供大家参考,具体如下:

HTML代码如下:

<!doctype html>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
 <meta name="Generator" content="EditPlus®">
 <meta name="Author" content="">
 <meta name="Keywords" content="">
 <meta name="Description" content="">
 <title>3water.com jQuery响应鼠标移动</title>
 <style>
  *{margin:0;padding:0;}
  ul,li{list-style:none;}
  div{font-family:"Microsoft YaHei";}
  html,body{width:100%; height:100%; background:#f2f2f2;}
  ul{margin-left:50px;}
  ul li{float:left;}
  ul li .outer{width:300px; height:250px;}
  ul li .outer .inner{width:300px; height:250px; background:rgba(0, 0, 0, .3);}
 </style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
 <body>
  <ul>
    <li>
      <div class="outer">
        <img src="http://sandbox.runjs.cn/uploads/rs/253/e6wsbxul/09.jpg" width="300px" height="250px" />
        <div class="inner">
          我是图片1
        </div>
      </div>
    </li>
    <li>
      <div class="outer">
        <img src="http://sandbox.runjs.cn/uploads/rs/253/e6wsbxul/010.jpg" width="300px" height="250px" />
        <div class="inner">
          我是图片2
        </div>
      </div>
    </li>
    <li>
      <div class="outer">
        <img src="http://sandbox.runjs.cn/uploads/rs/253/e6wsbxul/011.jpg" width="300px" height="250px" />
        <div class="inner">
          我是图片3
        </div>
      </div>
    </li>
    <li>
      <div class="outer">
        <img src="http://sandbox.runjs.cn/uploads/rs/253/e6wsbxul/012.jpg" width="300px" height="250px" />
        <div class="inner">
          我是图片4
        </div>
      </div>
    </li>
    <li>
      <div class="outer">
        <img src="http://sandbox.runjs.cn/uploads/rs/253/e6wsbxul/013.jpg" width="300px" height="250px" />
        <div class="inner">
          我是图片5
        </div>
      </div>
    </li>
    <li>
      <div class="outer">
        <img src="http://sandbox.runjs.cn/uploads/rs/253/e6wsbxul/014.jpg" width="300px" height="250px" />
        <div class="inner">
          我是图片6
        </div>
      </div>
    </li>
    <li>
      <div class="outer">
        <img src="http://sandbox.runjs.cn/uploads/rs/253/e6wsbxul/015.jpg" width="300px" height="250px" />
        <div class="inner">
          我是图片7
        </div>
      </div>
    </li>
    <li>
      <div class="outer">
        <img src="http://sandbox.runjs.cn/uploads/rs/253/e6wsbxul/016.jpg" width="300px" height="250px" />
        <div class="inner">
          我是图片8
        </div>
      </div>
    </li>
  </ul>
  <script>
    (function($){
      $.fn.extend({
        show : function(div){
          var w = this.width(),
            h = this.height(),
            xpos = w/2,
            ypos = h/2,
            eventType = "",
            direct = "";
          this.css({"overflow" : "hidden", "position" : "relative"});
          div.css({"position" : "absolute", "top" : this.width()});
          this.on("mouseenter mouseleave", function(e){
            var oe = e || event;
            var x = oe.offsetX;
            var y = oe.offsetY;
            var angle = Math.atan((x - xpos)/(y - ypos)) * 180 / Math.PI;
            if(angle > -45 && angle < 45 && y > ypos){
              direct = "down";
            }
            if(angle > -45 && angle < 45 && y < ypos){
              direct = "up";
            }
            if(((angle > -90 && angle <-45) || (angle >45 && angle <90)) && x > xpos){
              direct = "right";
            }
            if(((angle > -90 && angle <-45) || (angle >45 && angle <90)) && x < xpos){
              direct = "left";
            }
            move(e.type, direct)
          });
          function move(eventType, direct){
            if(eventType == "mouseenter"){
              switch(direct){
                case "down":
                  div.css({"left": "0px", "top": h}).stop(true,true).animate({"top": "0px"}, "fast");
                  break;
                case "up":
                  div.css({"left": "0px", "top": -h}).stop(true,true).animate({"top": "0px"}, "fast");
                  break;
                case "right":
                  div.css({"left": w, "top": "0px"}).stop(true,true).animate({"left": "0px"}, "fast");
                  break;
                case "left":
                  div.css({"left": -w, "top": "0px"}).stop(true,true).animate({"left": "0px"}, "fast");
                  break;
              }
            }else{
              switch(direct){
                case "down":
                  div.stop(true,true).animate({"top": h}, "fast");
                  break;
                case "up":
                  div.stop(true,true).animate({"top": -h}, "fast");
                  break;
                case "right":
                  div.stop(true,true).animate({"left": w}, "fast");
                  break;
                case "left":
                  div.stop(true,true).animate({"left": -w}, "fast");
                  break;
              }
            }
          }
        }
      });
    })(jQuery)
    $(".outer").each(function(i){
      $(this).show($(".inner").eq(i));
    });
  </script>
 </body>
</html>

其中控制响应鼠标方向的JS代码如下:

/*
*使用说明:
*    $(".a").show($(".b"))
*    a是展示层,b是遮罩层
*    b在a的内部
*/
$(".outer").each(function(i){
  $(this).show($(".inner").eq(i));
});

这里使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun运行代码,可得到如下效果:

jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】

完整实例代码点击此处本站下载

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
为JQuery EasyUI 表单组件增加焦点切换功能的方法
Apr 13 jQuery
jQuery实现百度登录框的动态切换效果
Apr 21 jQuery
jQuery实现下拉菜单的实例代码
Jun 19 jQuery
基于jQuery封装的分页组件
Jun 26 jQuery
jQuery实现上传图片前预览效果功能
Aug 03 jQuery
使用jQuery实现购物车结算功能
Aug 15 jQuery
详解webpack3如何正确引用并使用jQuery库
Aug 26 jQuery
jQuery实现的弹幕效果完整实例
Sep 06 jQuery
jQuery事件对象的属性和方法详解
Sep 09 jQuery
jquery ajaxfileupload异步上传插件
Nov 21 jQuery
jQuery实现的3D版图片轮播示例【滑动轮播】
Jan 18 jQuery
jQuery实现放大镜案例
Oct 19 jQuery
jQuery md5加密插件jQuery.md5.js用法示例
Aug 24 #jQuery
jQuery实现鼠标移到某个对象时弹出显示层功能
Aug 23 #jQuery
jquery获取select选中值的文本,并赋值给另一个输入框的方法
Aug 21 #jQuery
JQuery扩展对象方法操作示例
Aug 21 #jQuery
解决jquery有正确返回值但不执行success函数的问题
Aug 20 #jQuery
菊花转动的jquery加载动画效果
Aug 19 #jQuery
jQuery中常用动画效果函数知识点整理
Aug 19 #jQuery
You might like
风格模板初级不完全修改教程
2006/10/09 PHP
js 将json字符串转换为json对象的方法解析
2013/11/13 Javascript
分享Javascript中最常用的55个经典小技巧
2013/11/29 Javascript
jQuery 无限级菜单的简单实例
2014/02/21 Javascript
使用CSS3的scale实现网页整体缩放
2014/03/18 Javascript
不到30行JS代码实现Excel表格的方法
2014/11/15 Javascript
node.js中的fs.futimesSync方法使用说明
2014/12/17 Javascript
JS实现跟随鼠标闪烁转动色块的方法
2015/02/26 Javascript
举例简介AngularJS的内部语言环境
2015/06/17 Javascript
字符串反转_JavaScript
2016/04/28 Javascript
jQuery实现Select左右复制移动内容
2016/08/05 Javascript
jQuery实现的自动加载页面功能示例
2016/09/04 Javascript
动态JavaScript所造成一些你不知道的危害
2016/09/25 Javascript
jQuery实现优雅的弹窗效果(6)
2017/02/08 Javascript
Javascript仿京东放大镜的效果
2017/03/01 Javascript
基于jquery实现二级联动效果
2017/03/30 jQuery
vue-resource拦截器设置头信息的实例
2017/10/27 Javascript
详解如何用模块化的方式写vuejs
2017/12/16 Javascript
javascript用rem来做响应式开发
2018/01/13 Javascript
webpack 单独打包指定JS文件的方法
2018/02/22 Javascript
基于Vue插入视频的2种方法小结
2019/04/02 Javascript
Element实现表格分页数据选择+全选所有完善批量操作
2019/06/07 Javascript
封装微信小程序http拦截器过程解析
2019/08/13 Javascript
[00:09]DOTA2全国高校联赛 精彩活动引爆全场
2018/05/30 DOTA
Python isinstance判断对象类型
2008/09/06 Python
python获取酷狗音乐top500的下载地址 MP3格式
2018/04/17 Python
美国维生素、补充剂、保健食品购物网站:Vitacost
2016/08/05 全球购物
澳洲最大的时尚奢侈品电商平台:Cettire
2020/06/15 全球购物
《我不是最弱小的》教学反思
2014/02/23 职场文书
董事长助理工作职责范本
2014/07/01 职场文书
竞选班干部演讲稿100字
2014/08/20 职场文书
员工手册编写范本
2015/05/14 职场文书
趣味运动会广播稿
2015/08/19 职场文书
公司团队口号霸气押韵
2015/12/24 职场文书
mysql数据插入覆盖和时间戳的问题及解决
2022/03/25 MySQL
MySQL创建管理RANGE分区
2022/04/13 MySQL