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插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
Mar 21 jQuery
jQuery插件FusionCharts绘制2D双折线图效果示例【附demo源码】
Apr 14 jQuery
jQuery中的deferred对象和extend方法详解
May 08 jQuery
jQuery ajax读取本地json文件的实例
Oct 31 jQuery
jquery中有哪些api jQuery主要API
Nov 20 jQuery
jQuery图片查看插件Magnify开发详解
Dec 25 jQuery
jQuery实现菜单的显示和隐藏功能示例
Jul 24 jQuery
Jquery的Ajax技术使用方法
Jan 21 jQuery
jQuery提示框插件SweetAlert用法分析
Aug 05 jQuery
jQuery实现弹幕特效
Nov 29 jQuery
深入分析jQuery.one() 函数
Jun 03 jQuery
JQuery+drag.js上传图片并且实现图片拖曳
Nov 18 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
dede3.1分页文字采集过滤规则详说(图文教程)续二
2007/04/03 PHP
WordPress主题制作之模板文件的引入方法
2015/12/28 PHP
CodeIgniter 完美解决URL含有中文字符串
2016/05/13 PHP
用tip解决Ext列宽度不够的问题
2008/12/13 Javascript
Node.js和PHP根据ip获取地理位置的方法
2014/03/14 Javascript
JavaScript列表框listbox全选和反选的实现方法
2015/03/18 Javascript
jquery实现简单的banner轮播效果【实例】
2016/03/30 Javascript
Bootstrap CSS布局之图像
2016/12/17 Javascript
js canvas实现擦除效果示例代码
2017/04/26 Javascript
jQuery实现多张图片上传预览(不经过后端处理)
2017/04/29 jQuery
bootstrap fileinput插件实现预览上传照片功能
2018/01/23 Javascript
详解npm 配置项registry修改为淘宝镜像
2018/09/07 Javascript
解决vue 界面在苹果手机上滑动点击事件等卡顿问题
2018/11/27 Javascript
微信小程序性能优化之checkSession的使用
2019/03/06 Javascript
微信小程序云开发(数据库)详解
2019/05/17 Javascript
JS中的算法与数据结构之栈(Stack)实例详解
2019/08/20 Javascript
vue各种事件监听实例(小结)
2020/06/24 Javascript
[01:00:04]DOTA2上海特级锦标赛B组小组赛#1 Alliance VS Spirit第二局
2016/02/26 DOTA
[05:24]TI9采访——教练
2019/08/24 DOTA
Python2中的raw_input() 与 input()
2015/06/12 Python
Python实现简单截取中文字符串的方法
2015/06/15 Python
Python访问纯真IP数据库脚本分享
2015/06/29 Python
python使用writerows写csv文件产生多余空行的处理方法
2019/08/01 Python
Django admin禁用编辑链接和添加删除操作详解
2019/11/15 Python
基于h5py的使用及数据封装代码
2019/12/26 Python
通过实例学习Python Excel操作
2020/01/06 Python
泰国汽车、火车和轮渡票预订网站:Bus Online Ticket
2017/09/09 全球购物
优纳科技软件测试面试题
2012/05/15 面试题
晚宴邀请函范文
2014/01/15 职场文书
《美丽的小兴安岭》教学反思
2014/02/26 职场文书
学校就业推荐信范文
2014/05/19 职场文书
警察群众路线整改措施
2014/09/26 职场文书
自愿离婚协议书2015
2015/01/26 职场文书
督导岗位职责
2015/02/04 职场文书
会议简报格式范文
2015/07/20 职场文书
Java实现二维数组和稀疏数组之间的转换
2021/06/27 Java/Android