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正则表达式在页面验证url网址输入是否正确
Apr 04 jQuery
jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
May 05 jQuery
jQuery实现html table行Tr的复制、删除、计算功能
Jul 10 jQuery
jQuery简单实现对数组去重及排序操作实例
Oct 31 jQuery
jQuery 防止相同的事件快速重复触发方法
Feb 08 jQuery
jquery ajax加载数据前台渲染方式 不用for遍历的方法
Aug 09 jQuery
vue-cli 引入jQuery,Bootstrap,popper的方法
Sep 03 jQuery
jQuery插件实现的日历功能示例【附源码下载】
Sep 07 jQuery
jQuery实现数字自动增加或者减少的动画效果示例
Dec 11 jQuery
jQuery ajax仿Google自动提示SearchSuggess功能示例
Mar 28 jQuery
jQuery操作cookie的示例代码
Jun 05 jQuery
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
Oct 26 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
PHP 实用代码收集
2010/01/22 PHP
php与java通过socket通信的实现代码
2013/10/21 PHP
几道坑人的PHP面试题 试试看看你会不会也中招
2014/08/19 PHP
PHP中Static(静态)关键字功能与用法实例分析
2019/04/05 PHP
laravel实现登录时监听事件,添加登录用户的记录方法
2019/09/30 PHP
悄悄用脚本检查你访问过哪些网站的代码
2010/12/04 Javascript
使用隐藏的new来创建对象
2011/03/29 Javascript
JS中eval函数的使用示例
2013/07/21 Javascript
AngularJs页面筛选标签小功能
2016/08/01 Javascript
Node.js制作简单聊天室
2017/01/12 Javascript
BootstrapValidator实现注册校验和登录错误提示效果
2017/03/10 Javascript
vue时间格式化实例代码
2017/06/13 Javascript
jquery.validate表单验证插件使用详解
2017/06/21 jQuery
PyTorch快速搭建神经网络及其保存提取方法详解
2018/04/28 Python
Python实现二叉树前序、中序、后序及层次遍历示例代码
2019/05/18 Python
python如何实现异步调用函数执行
2019/07/08 Python
python3 selenium自动化测试 强大的CSS定位方法
2019/08/23 Python
python 和c++实现旋转矩阵到欧拉角的变换方式
2019/12/04 Python
pytorch中的自定义数据处理详解
2020/01/06 Python
Python %r和%s区别代码实例解析
2020/04/03 Python
Keras 加载已经训练好的模型进行预测操作
2020/06/17 Python
pytorch快速搭建神经网络_Sequential操作
2020/06/17 Python
修复iPhone的safari浏览器上submit按钮圆角bug
2012/12/24 HTML / CSS
倩碧澳大利亚官网:Clinique澳大利亚
2019/07/22 全球购物
SmartBuyGlasses荷兰:购买太阳镜和眼镜
2020/03/16 全球购物
《童趣》教学反思
2014/02/19 职场文书
座谈会主持词
2014/03/20 职场文书
新闻发布会策划方案
2014/06/12 职场文书
销售类求职信
2014/06/13 职场文书
人力资源管理专业自荐信
2014/06/24 职场文书
群众路线个人剖析材料
2014/10/07 职场文书
2015年小学教导处工作总结
2015/05/26 职场文书
感恩教育主题班会
2015/08/12 职场文书
小组口号霸气押韵
2015/12/24 职场文书
Python如何用re模块实现简易tokenizer
2022/05/02 Python
利用nginx搭建RTMP视频点播、直播、HLS服务器
2022/05/25 Servers