<!doctype html>
<html>
<head>
< http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\">
< name=\"viewport\" content=\"width=device-width, initial-scale=1, user-scalable=no\">
< name=\"Generator\" content=\"EditPlus®\">
< name=\"Author\" content=\"\">
< name=\"Keywords\" content=\"\">
< name=\"De ion\" content=\"\">
< >Demo</ >
<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>
< id=\"jquery_183\" type=\"text/ \" class=\"library\" src=\"/js/sandbox/jquery/jquery-1.8.3.min.js\"></ >
</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\">
这是描述。。。
</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\">
这是描述。。。
</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\">
这是描述。。。
</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\">
这是描述。。。
</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\">
这是描述。。。
</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\">
这是描述。。。
</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\">
这是描述。。。
</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\">
这是描述。。。
</div>
</div>
</li>
</ul>
< type=\"text/ \" src=\"js/jquery-1.11.3.min.js\"></ >
< >
;(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));
});
</ >
</body>
</html> 继续阅读与本文标签相同的文章
下一篇 :
jquery实现的表格数据增删改查
-
VLOOKUP查找不到值，是Bug吗？
2026-05-15栏目： 教程
-
Word高手和菜鸟的区别在哪？先看看这11个小技巧吧
2026-05-15栏目： 教程
-
首批5G手机销量持续低迷，为何仅支持4GiPhone11会成最大赢家？
2026-05-15栏目： 教程
-
谷歌：Pixel 4的5G版本为时尚早
2026-05-15栏目： 教程
-
5G时代即将普及，那么刚买的4G手机怎么处理，看完终于放心了
2026-05-15栏目： 教程