全国服务热线:4008-888-888

技术知识

餐饮小程序的7种玩法_jQuery完成的响应鼠标移动方

jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】       这篇文章主要介绍了jQuery实现的响应鼠标移动方向插件用法,涉及jQuery响应鼠标事件及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下

本文实例讲述了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  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="jquery/2.0.0/jquery.min.js" /script 
 /head 
 body 
 div 
 img src="uploads/rs/253/e6wsbxul/09.jpg" width="300px" height="250px" / 
 div 
 我是图片1
 /div 
 /div 
 /li 
 div 
 img src="uploads/rs/253/e6wsbxul/010.jpg" width="300px" height="250px" / 
 div 
 我是图片2
 /div 
 /div 
 /li 
 div 
 img src="uploads/rs/253/e6wsbxul/011.jpg" width="300px" height="250px" / 
 div 
 我是图片3
 /div 
 /div 
 /li 
 div 
 img src="uploads/rs/253/e6wsbxul/012.jpg" width="300px" height="250px" / 
 div 
 我是图片4
 /div 
 /div 
 /li 
 div 
 img src="uploads/rs/253/e6wsbxul/013.jpg" width="300px" height="250px" / 
 div 
 我是图片5
 /div 
 /div 
 /li 
 div 
 img src="uploads/rs/253/e6wsbxul/014.jpg" width="300px" height="250px" / 
 div 
 我是图片6
 /div 
 /div 
 /li 
 div 
 img src="uploads/rs/253/e6wsbxul/015.jpg" width="300px" height="250px" / 
 div 
 我是图片7
 /div 
 /div 
 /li 
 div 
 img src="uploads/rs/253/e6wsbxul/016.jpg" width="300px" height="250px" / 
 div 
 我是图片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代码运行工具:运行代码,可得到如下效果:

完整实例代码点击此处。

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《》、《》、《》、《》、《》及《》

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



在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服