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的选中方法(实例讲解)
Jun 27 jQuery
浅谈jQuery框架Ajax常用选项
Jul 08 jQuery
jQuery选择器中的特殊符号处理方法
Sep 08 jQuery
jQuery实现所有验证通过方可提交的表单验证
Nov 21 jQuery
jquery+css3实现熊猫tv导航代码分享
Feb 12 jQuery
jquery操作select常见方法大全【7种情况】
May 28 jQuery
jQuery创建折叠式菜单
Jun 15 jQuery
jquery图片预览插件实现方法详解
Jul 18 jQuery
jQuery实现图片随机切换、抽奖功能(实例代码)
Oct 23 jQuery
jQuery实现高度灵活的表单验证功能示例【无UI】
Apr 30 jQuery
JQuery实现折叠式菜单的详细代码
Jun 03 jQuery
jQuery zTree如何改变指定节点文本样式
Oct 16 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
什么是调频(FM)、调幅(AM)、短波(SW)、长波(LW)
2021/03/01 无线电
咖啡与牛奶
2021/03/03 冲泡冲煮
字符串长度函数strlen和mb_strlen的区别示例介绍
2014/09/09 PHP
QQ互联一键登录审核不通过的解决方案
2014/09/10 PHP
PHP的引用详解
2015/02/22 PHP
详谈php中 strtr 和 str_replace 的效率问题
2017/05/14 PHP
PHP与SQL语句写一句话木马总结
2019/10/11 PHP
jquery控制select的text/value值为选中状态
2014/06/03 Javascript
常见JS验证脚本汇总
2015/12/01 Javascript
Javascript 基础---Ajax入门必看
2016/07/06 Javascript
Angularjs根据json文件动态生成路由状态的实现方法
2017/04/17 Javascript
JavaScript对象的浅拷贝与深拷贝实例分析
2018/07/25 Javascript
vue移动端微信授权登录插件封装的实例
2018/08/28 Javascript
vue实现div拖拽互换位置
2020/07/29 Javascript
基于JS实现web端录音与播放功能
2019/04/17 Javascript
ES6函数和数组用法实例分析
2020/05/23 Javascript
JS箭头函数和常规函数之间的区别实例分析【 5 个区别】
2020/05/27 Javascript
js实现ajax的用户简单登入功能
2020/06/18 Javascript
原生js实现弹幕效果
2020/11/29 Javascript
[51:32]Optic vs Serenity 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
跟老齐学Python之再深点,更懂list
2014/09/20 Python
Python求两个文本文件以行为单位的交集、并集与差集的方法
2015/06/17 Python
深入解析Python中的list列表及其切片和迭代操作
2016/03/13 Python
Python简单生成8位随机密码的方法
2017/05/24 Python
python编程实现随机生成多个椭圆实例代码
2018/01/03 Python
小米5s微信跳一跳小程序python源码
2018/01/08 Python
Flask配置Cors跨域的实现
2019/07/12 Python
Python爬取智联招聘数据分析师岗位相关信息的方法
2019/08/13 Python
体育教育专业毕业生自荐信
2013/11/15 职场文书
2014最新自愿离婚协议书范本
2014/11/19 职场文书
2014员工聘用协议书(最新版)
2014/11/24 职场文书
2014年高数考试作弊检讨书
2014/12/14 职场文书
适合毕业生创业的项目怎么找?
2019/08/08 职场文书
导游词之太行山青龙峡
2020/01/14 职场文书
详解MySQL的半同步
2021/04/22 MySQL
HTML基础详解(上)
2021/10/16 HTML / CSS