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 Json数据格式排版高亮插件json-viewer.js使用方法详解
Jun 12 jQuery
jQuery回调方法使用示例
Jun 26 jQuery
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
Jan 08 jQuery
jQuery实现定时隐藏对话框的方法分析
Feb 12 jQuery
jQuery实现的页面弹幕效果【测试可用】
Aug 17 jQuery
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
Dec 10 jQuery
jQuery+vue.js实现的多选下拉列表功能示例
Jan 15 jQuery
jQuery无冲突模式详解
Jan 17 jQuery
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
Feb 27 jQuery
使vue实现jQuery调用的两种方法
May 12 jQuery
jquery实现上传文件进度条
Mar 26 jQuery
jQuery实现鼠标拖拽登录框移动效果
Sep 13 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
收音机史话 - 1960年代前后的DIY
2021/03/02 无线电
PHP 基于文件头的文件类型验证类函数
2012/05/01 PHP
PHP批量采集下载美女图片的实现代码
2013/06/03 PHP
处理单名多值表单的详解
2013/06/08 PHP
PHP多进程编程实例
2014/10/15 PHP
支持中文、字母、数字的PHP验证码
2015/05/04 PHP
10款PHP开源商城系统汇总介绍
2015/07/23 PHP
ThinkPHP实现附件上传功能
2017/04/27 PHP
jQuery实现id模糊查询的小例子
2013/03/19 Javascript
jquery select 设置默认选中的示例代码
2014/02/07 Javascript
jQuery中parentsUntil()方法用法实例
2015/01/07 Javascript
动态加载js的方法汇总
2015/02/13 Javascript
详解Vue.js基于$.ajax获取数据并与组件的data绑定
2017/05/26 Javascript
详解NODEJS的http实现
2018/01/04 NodeJs
通过js动态创建标签,并设置属性方法
2018/02/24 Javascript
Vue 菜单栏点击切换单个class(高亮)的方法
2018/08/22 Javascript
详解微信小程序调用支付接口支付
2019/04/28 Javascript
JavaScript 截取字符串代码实例
2019/09/05 Javascript
Element Card 卡片的具体使用
2020/07/26 Javascript
vue实现简易计算器功能
2021/01/20 Vue.js
[05:42]DOTA2英雄梦之声_第10期_蝙蝠骑士
2014/06/21 DOTA
Python设计实现的计算器功能完整实例
2017/08/18 Python
python交互模式下输入换行/输入多行命令的方法
2019/07/02 Python
TensorFlow实现简单的CNN的方法
2019/07/18 Python
python 中xpath爬虫实例详解
2019/08/26 Python
TensorFlow 多元函数的极值实例
2020/02/10 Python
Python Pandas 对列/行进行选择,增加,删除操作
2020/05/17 Python
五分钟学会怎么用Pygame做一个简单的贪吃蛇
2021/01/06 Python
给水排水工程专业毕业生推荐信
2013/10/28 职场文书
应聘美工求职信
2013/11/07 职场文书
老师对学生的寄语
2014/04/09 职场文书
考试诚信承诺书
2014/05/23 职场文书
社区春季防火方案
2014/06/02 职场文书
国王的演讲观后感
2015/06/03 职场文书
员工升职自我评价
2019/03/26 职场文书
Python Socket编程详解
2021/04/25 Python