以下是 jQuery悬停动画HoverEx插件代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery悬停动画HoverEx插件</title>
<link rel="stylesheet" href="css/demo.css" />
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/hoverex-all.css" />
<link rel="stylesheet" href="css/templates.css" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.hoverex.js"></script>
</head>
<body >
<div class="header cf a_slow fadeInDown">
<div class="header-inner">
<a href="#" class="logo">HoverEx</a>
<ul>
<li><a href="#" class="active">Templates / Demo</a></li>
<li><a href="#">All Animations</a></li>
<li><a href="#" style="text-decoration:line-through">Documentation</a></li>
</ul>
</div>
</div>
<div class="page a_slow elasticInLeft" >
<!--template 1-->
<div class="title cf"><h3>Template 1</h3></div>
<div class="demowrap cf">
<div class="box">
<div class="he-wrap tpl1">
<img src="img/1.jpg" alt="" />
<div class="he-view">
<div class="sider-right a0" data-animate="fadeInRight">
<a href="#" class="a1 zoom" data-animate="fadeInRight"></a>
<a href="#" class="a2 undo" data-animate="fadeInRight"></a>
<a href="#" class="a3 check" data-animate="fadeInRight"></a>
<a href="#" class="a4 close" data-animate="fadeInRight"></a>
</div>
</div>
</div>
</div>
<div class="box">
<div class="he-wrap tpl1">
<img src="img/2.jpg" alt="" />
<div class="he-view">
<div class="sider-right a0" data-animate="fadeInRight">
<a href="#" class="a1 zoom" data-animate="rotateIn"></a>
<a href="#" class="a2 undo" data-animate="rotateIn"></a>
<a href="#" class="a3 check" data-animate="rotateIn"></a>
<a href="#" class="a4 close" data-animate="rotateIn"></a>
</div>
</div>
</div>
</div>
<div class="box">
<div class="he-wrap tpl1">
<img src="img/3.jpg" alt="" />
<div class="he-view">
<div class="sider-right a0" data-animate="fadeInRight">
<a href="#" class="a1 zoom" data-animate="pendulum"></a>
<a href="#" class="a1 undo" data-animate="pendulum"></a>
<a href="#" class="a1 check" data-animate="pendulum"></a>
<a href="#" class="a1 close" data-animate="pendulum"></a>
</div>
</div>
</div>
</div>
</div>
<!--template 2-->
<div class="title cf"><h3>Template 2</h3></div>
<div class="demowrap cf">
<div class="box">
<div class="he-wrap tpl2">
<img src="img/4.jpg" alt="" />
<div class="he-view">
<div class="bg a0" data-animate="fadeIn">
<div class="center-bar">
<a href="#" class="twitter a0" data-animate="elasticInDown"></a>
<a href="#" class="facebook a1" data-animate="elasticInDown"></a>
<a href="#" class="google a2" data-animate="elasticInDown"></a>
<a href="#" class="in a3" data-animate="elasticInDown"></a>
</div>
</div>
</div>
</div>
</div>
<div class="box">
<div class="he-wrap tpl2">
<img src="img/5.jpg" alt="" />
<div class="he-view">
<div class="bg a0" data-animate="fadeIn">
<div class="center-bar">
<a href="#" class="twitter a0" data-animate="fadeInUp"></a>
<a href="#" class="facebook a1" data-animate="fadeInUp"></a>
<a href="#" class="google a2" data-animate="fadeInUp"></a>
<a href="#" class="in a3" data-animate="fadeInUp"></a>
</div>
</div>
</div>
</div>
</div>
<div class="box">
<div class="he-wrap tpl2">
<img src="img/6.jpg" alt="" />
<div class="he-view">
<div class="bg a0" data-animate="fadeIn">
<div class="center-bar">
<a href="#" class="twitter a0" data-animate="rotateInLeft"></a>
<a href="#" class="facebook a1" data-animate="rotateInLeft"></a>
<a href="#" class="google a2" data-animate="rotateInLeft"></a>
<a href="#" class="in a3" data-animate="rotateInLeft"></a>
</div>
</div>
</div>
</div>
</div>
</div>
<!--template 3-->
<div class="title cf"><h3>Template 3</h3></div>
<div class="demowrap cf">
<div class="box">
<div class="he-wrap tpl3">
<img src="img/10.jpg" alt="" />
<div class="he-view">
<div class="info-bottom a0" data-animate="fadeInUp">
HoverEx - jQuery Hover Animation Plugin
</div>
</div>
</div>
</div>
<div class="box">
<div class="he-wrap tpl3">
<img src="img/11.jpg" alt="" />
<div class="he-view">
<div class="info-top a0" data-animate="fadeInDown">
HoverEx - jQuery Hover Animation Plugin
</div>
</div>
</div>
</div>
<div class="box">
<div class="he-wrap tpl3">
<img src="img/12.jpg" alt="" />
<div class="he-view">
<div class="info-fly a0" data-animate="flipInV">
HoverEx - jQuery Hover Animation Plugin
</div>
</div>
</div>
</div>
</div>
<!--template 4-->
<div class="title cf"><h3>Template 4</h3></div>
<div class="demowrap cf">
<div class="box">
<div class="he-wrap tpl4">
<img src="img/7.jpg" alt="" />
<div class="he-view">
<div class="bg">
<div class="a0" data-animate="fadeInDown"></div><div class="a0" data-animate="fadeInUp"></div><div class="a0" data-animate="fadeInDown"></div><div class="a0" data-animate="fadeInUp"></div><div class="a0" data-animate="fadeInDown"></div>
</div>
<div class="content">
<h3 class="info-title a2" data-animate="fadeInDown">HoverEx - jQuery Plugin</h3>
<div class="detail a2" data-animate="fadeInUp">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text.</div>
<a href="#" class="more a2" data-animate="fadeInRight">View Detail</a>
</div>
</div>
</div>
</div>
<div class="box">
<div class="he-wrap tpl4">
<img src="img/8.jpg" alt="" />
<div class="he-view">
<div class="bg">
<div class="a0" data-animate="fadeIn"></div><div class="a1" data-animate="fadeIn"></div><div class="a2" data-animate="fadeIn"></div><div class="a3" data-animate="fadeIn"></div><div class="a4" data-animate="fadeIn"></div>
</div>
<div class="content">
<h3 class="info-title a3" data-animate="rotateInLeft">HoverEx - jQuery Plugin</h3>
<div class="detail a4" data-animate="rotateInLeft">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text.</div>
<a href="#" class="more a5" data-animate="fadeInUp">View Detail</a>
</div>
</div>
</div>
</div>
<div class="box">
<div class="he-wrap tpl4">
<img src="img/9.jpg" alt="" />
<div class="he-view">
<div class="bg">
<div class="a0" data-animate="fadeInUp"></div><div class="a1" data-animate="fadeInUp"></div><div class="a2" data-animate="fadeInUp"></div><div class="a3" data-animate="fadeInUp"></div><div class="a4" data-animate="fadeInUp"></div>
</div>
<div class="content">
<h3 class="info-title a3" data-animate="fadeInLeft">HoverEx - jQuery Plugin</h3>
<div class="detail a4" data-animate="fadeInRight">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text.</div>
<a href="#" class="more a5" data-animate="fadeInRight">View Detail</a>
</div>
</div>
</div>
</div>
</div>
<!--template 5-->
<div class="title cf"><h3>Template 5</h3></div>
<div class="demowrap cf">
<div class="box">
<div class="he-wrap tpl5">
<img src="img/13.jpg" alt="" />
<div class="he-view">
<a href="#" class="buy a0" data-animate="jellyInDown">Buy Now</a>
<a class="price a1" data-animate="jellyInDown" href="#">$45</a>
</div>
</div>
</div>
<div class="box">
<div class="he-wrap tpl5">
<img src="img/14.jpg" alt="" />
<div class="he-view">
<a href="#" class="buy a0" data-animate="rotateInLeft">Buy Now</a>
<a class="price a1" data-animate="rotateInLeft" href="#">$45</a>
</div>
</div>
</div>
<div class="box">
<div class="he-wrap tpl5">
<img src="img/15.jpg" alt="" />
<div class="he-view">
<a href="#" class="buy a0" data-animate="bounceInDown">Buy Now</a>
<a class="price a2" data-animate="bounceInDown" href="#">$45</a>
</div>
</div>
</div>
</div>
<!--template 6-->
<div class="title cf"><h3>Template 6</h3></div>
<div class="demowrap cf">
<div class="box">
<div class="he-wrap tpl6">
<img src="img/1.jpg" alt="" />
<div class="he-view">
<div class="bg a0" data-animate="fadeIn">
<h3 class="a1" data-animate="fadeInDown">HoverEx Plugin</h3>
<a href="#" class="btn a2" data-animate="rotateInLeft"><span>564</span>Likes</a>
<a href="#" class="btn a2" data-animate="rotateInRight"><span>115</span>Dislikes</a>
</div>
</div>
</div>
</div>
<div class="box">
<div class="he-wrap tpl6">
<img src="img/2.jpg" alt="" />
<div class="he-view">
<div class="bg a0" data-animate="fadeIn">
<h3 class="a1" data-animate="fadeInDown">HoverEx Plugin</h3>
<a href="#" class="btn a2" data-animate="bounceInLeft"><span>564</span>Likes</a>
<a href="#" class="btn a2" data-animate="bounceInRight"><span>115</span>Dislikes</a>
</div>
</div>
</div>
</div>
<div class="box">
<div class="he-wrap tpl6">
<img src="img/3.jpg" alt="" />
<div class="he-view">
<div class="bg a0" data-animate="fadeIn">
<h3 class="a1" data-animate="fadeInDown">HoverEx Plugin</h3>
<a href="#" class="btn a2" data-animate="zoomIn"><span>564</span>Likes</a>
<a href="#" class="btn a2" data-animate="zoomIn"><span>115</span>Dislikes</a>
</div>
</div>
</div>
</div>
</div>
<!-- zoom demo -->
<div class="title cf"><h3>Inline Zoom Demo</h3></div>
<div class="cf">
<div class="box">
<div class="he-wrap">
<img src="img/1.jpg" alt="" />
<div class="he-zoom" data-zoom="1.5" data-zoomrange="1,4" data-zoomstep="0.5">
<img src="img/1-l.jpg" alt="" />
</div>
</div>
</div>
<div class="info">
<strong>Image zoom effect</strong><br />
Features:
<ul>
<li>Support mousewheel to control zoom state!</li>
<li>InitZoomState: the init zoom state,can be set a number or 'auto'.</li>
<li>ZoomRange : the min/max zoom state of the image.default 1X to 4X.</li>
<li>ZoomStep : zoom state change step.default 0.5.</li>
</ul>
</div>
</div>
<div class="title cf"><h3>Dynamic Zoom Demo</h3></div>
<div class="cf">
<div class="cf" style="float:left; width:370px">
<div class="box">
<div class="he-wrap" id="zoomblock">
<img src="img/1.jpg" alt="" />
<div class="he-zoom" data-zoom="1.5" data-zoomrange="1,3" data-zoomstep="0.5">
<img src="img/1-l.jpg" alt="" />
</div>
</div>
</div>
<ul class="thumb-list">
<li><img src="img/1.jpg" alt="" data-large="img/1-l.jpg" /></li>
<li><img src="img/2.jpg" alt="" data-large="img/2-l.jpg" /></li>
<li><img src="img/3.jpg" alt="" data-large="img/3-l.jpg" /></li>
</ul>
</div>
<script type="text/javascript">
$(function(){
$(".thumb-list img").click(function(){
var src = $(this).attr("src");
var large = $(this).data("large");
$("#zoomblock>img").attr("src",src);
$("#zoomblock .he-zoom>img").attr("src",large);
});
});
</script>
<div class="info" style="width:670px">
<strong>Work with Dynamic Zoom </strong><br />
It is just easy to use it for dynamic zoom.You need only to chang the original image and the large image src attr.
For example:
<pre>$(function(){
$(".thumb-list img").click(function(){
var src = $(this).attr("src");
var large = $(this).data("large");
$("#zoomblock>img").attr("src",src);
$("#zoomblock .he-zoom>img").attr("src",large);
});
});
</pre>
</div>
</div>
<!-- slider demo -->
<div class="title cf" style="margin-top:20px"><h3>Slider Demo random animations</h3></div>
<div class="box">
<div class="he-wrap">
<div class="he-sliders" >
<img class="a0" src="img/1.jpg" alt="" />
<img class="a0" src="img/2.jpg" alt="" />
<img class="a0" src="img/3.jpg" alt="" />
</div>
<div class="he-view" >
<span class="he-pre a0" data-animate="fadeInLeft"></span>
<span class="he-next a0" data-animate="fadeInRight"></span>
</div>
</div>
</div>
<div class="info">
<strong>Support Mouse wheel to control the slider!</strong><br />
Features:
<ul>
<li>Over 36 animate can be use. </li>
<li>Mouse wheel control support.</li>
<li>Easy to customize the pre and next button show animation</li>
<li>Can specify the animation or random.</li>
</ul>
</div>
</div>
</body>
</html>
JS代码(jquery.hoverex.js):
var a={
fn:{
moveZoom:function(b,c){
var d=b.height(),e=b.width(),f=c.pageY-b.offset().top,g=c.pageX-b.offset().left;
var h=b.find("\x69\x6d\x67");
var i=b.data("\x7a\x6f\x6f\x6d");
if(i&&i!="\x61\x75\x74\x6f"){
var j=parseFloat(i);
h.css({
"\x77\x69\x64\x74\x68":e*j+"\x70\x78","\x68\x65\x69\x67\x68\x74":d*j+"\x70\x78","\x74\x6f\x70":-f*(j-0x1)+"\x70\x78","\x6c\x65\x66\x74":-g*(j-0x1)+"\x70\x78"}
)}
else{
var j=h.width()/e;
h.css({
"\x74\x6f\x70":-f*(j-0x1)+"\x70\x78","\x6c\x65\x66\x74":-g*(j-0x1)+"\x70\x78"}
)}
}
,changeZoom:function(b,c,d,e,f){
var g=b.find("\x69\x6d\x67");
var h=b.data("\x7a\x6f\x6f\x6d");
h=h=="\x61\x75\x74\x6f"?g.width()/b.width():parseFloat(h);
var i=b.data("\x7a\x6f\x6f\x6d\x73\x74\x65\x70");
i=i?parseFloat(i):0.5;
var j=b.data("\x7a\x6f\x6f\x6d\x72\x61\x6e\x67\x65");
j=j?j.split("\x2c"):"\x31\x2c\x34";
var k=parseFloat(j[0x0]),l=parseFloat(j[0x1])>h?parseFloat(j[0x1]):h;
var m=f>0x0?0x1:-0x1;
var n=Math.round((h+i*m)*0xa)/10.0;
if(n>=k&&n<=l){
b.data("\x7a\x6f\x6f\x6d",n);
a.fn.showZoomState(b,n);
a.fn.moveZoom(b,c)}
}
,showZoomState:function(b,c){
var d=b.find("\x2e\x68\x65\x2d\x7a\x6f\x6f\x6d\x73\x74\x61\x74\x65");
if(d.length==0x0){
d=$('\x3c\x73\x70\x61\x6e\x20\x63\x6c\x61\x73\x73\x3d\x22\x68\x65\x2d\x7a\x6f\x6f\x6d\x73\x74\x61\x74\x65\x22\x3e'+c+'\x58\x3c\x2f\x73\x70\x61\x6e\x3e').appendTo(b)}
;
d.text(c+"\x58").stop(true,true).fadeIn(0x12c).delay(0xc8).fadeOut(0x12c)}
,switchImg:function(b,c){
var d=b.data("\x61\x6e\x69\x6d\x61\x74\x65");
d=d?animation:"\x72\x61\x6e\x64\x6f\x6d";
if(d=="\x72\x61\x6e\x64\x6f\x6d"){
var f=["\x66\x61\x64\x65\x49\x6e","\x66\x61\x64\x65\x49\x6e\x4c\x65\x66\x74","\x66\x61\x64\x65\x49\x6e\x52\x69\x67\x68\x74","\x66\x61\x64\x65\x49\x6e\x55\x70","\x66\x61\x64\x65\x49\x6e\x44\x6f\x77\x6e","\x72\x6f\x74\x61\x74\x65\x49\x6e","\x72\x6f\x74\x61\x74\x65\x49\x6e\x4c\x65\x66\x74","\x72\x6f\x74\x61\x74\x65\x49\x6e\x52\x69\x67\x68\x74","\x72\x6f\x74\x61\x74\x65\x49\x6e\x55\x70","\x72\x6f\x74\x61\x74\x65\x49\x6e\x44\x6f\x77\x6e","\x62\x6f\x75\x6e\x63\x65","\x62\x6f\x75\x6e\x63\x65\x49\x6e\x4c\x65\x66\x74","\x62\x6f\x75\x6e\x63\x65\x49\x6e\x52\x69\x67\x68\x74","\x62\x6f\x75\x6e\x63\x65\x49\x6e\x55\x70","\x62\x6f\x75\x6e\x63\x65\x49\x6e\x44\x6f\x77\x6e","\x65\x6c\x61\x73\x74\x69\x63\x49\x6e\x4c\x65\x66\x74","\x65\x6c\x61\x73\x74\x69\x63\x49\x6e\x52\x69\x67\x68\x74","\x65\x6c\x61\x73\x74\x69\x63\x49\x6e\x55\x70","\x65\x6c\x61\x73\x74\x69\x63\x49\x6e\x44\x6f\x77\x6e","\x7a\x6f\x6f\x6d\x49\x6e","\x7a\x6f\x6f\x6d\x49\x6e\x4c\x65\x66\x74","\x7a\x6f\x6f\x6d\x49\x6e\x52\x69\x67\x68\x74","\x7a\x6f\x6f\x6d\x49\x6e\x55\x70","\x7a\x6f\x6f\x6d\x49\x6e\x44\x6f\x77\x6e","\x6a\x65\x6c\x6c\x79\x49\x6e\x4c\x65\x66\x74","\x6a\x65\x6c\x6c\x79\x49\x6e\x52\x69\x67\x68\x74","\x6a\x65\x6c\x6c\x79\x49\x6e\x44\x6f\x77\x6e","\x6a\x65\x6c\x6c\x79\x49\x6e\x55\x70","\x66\x6c\x69\x70\x49\x6e\x4c\x65\x66\x74","\x66\x6c\x69\x70\x49\x6e\x52\x69\x67\x68\x74","\x66\x6c\x69\x70\x49\x6e\x55\x70","\x66\x6c\x69\x70\x49\x6e\x44\x6f\x77\x6e","\x66\x6c\x69\x70\x49\x6e\x56","\x66\x6c\x69\x70\x49\x6e\x48"];
d=f[Math.floor(Math.random()*f.length)]}
;
var e=b.find("\x69\x6d\x67");
if(e.length>0x1){
if(c>0x0){
e.eq(0x0).attr("\x63\x6c\x61\x73\x73","\x61\x30").appendTo(b);
e.eq(0x1).attr("\x63\x6c\x61\x73\x73","\x61\x30\x20"+d)}
else{
e.eq(e.length-0x1).attr("\x63\x6c\x61\x73\x73","\x61\x30\x20"+d).prependTo(b);
e.eq(0x0).attr("\x63\x6c\x61\x73\x73","\x61\x30")}
}
}
}
}
;
$(function(){
$("\x2e\x68\x65\x2d\x77\x72\x61\x70").live({
mouseenter:function(){
var b=$(this).find("\x2e\x68\x65\x2d\x76\x69\x65\x77").addClass("\x68\x65\x2d\x76\x69\x65\x77\x2d\x73\x68\x6f\x77");
$("\x5b\x64\x61\x74\x61\x2d\x61\x6e\x69\x6d\x61\x74\x65\x5d",b).each(function(){
var c=$(this).data("\x61\x6e\x69\x6d\x61\x74\x65");
$(this).addClass(c)}
);
$(this).find("\x2e\x68\x65\x2d\x7a\x6f\x6f\x6d").addClass("\x68\x65\x2d\x76\x69\x65\x77\x2d\x73\x68\x6f\x77")}
,mouseleave:function(){
var b=$(this).find("\x2e\x68\x65\x2d\x76\x69\x65\x77").removeClass("\x68\x65\x2d\x76\x69\x65\x77\x2d\x73\x68\x6f\x77");
$("\x5b\x64\x61\x74\x61\x2d\x61\x6e\x69\x6d\x61\x74\x65\x5d",b).each(function(){
var c=$(this).data("\x61\x6e\x69\x6d\x61\x74\x65");
$(this).removeClass(c)}
);
$(this).find("\x2e\x68\x65\x2d\x7a\x6f\x6f\x6d").removeClass("\x68\x65\x2d\x76\x69\x65\x77\x2d\x73\x68\x6f\x77")}
,mousewheel:function(b,c,d,e){
if($(this).find("\x2e\x68\x65\x2d\x73\x6c\x69\x64\x65\x72\x73").length==0x1){
var f=$(this).find("\x2e\x68\x65\x2d\x73\x6c\x69\x64\x65\x72\x73");
var g=e>0x0?0x1:-0x1;
a.fn.switchImg(f,g);
b.preventDefault()}
else if($(this).find("\x2e\x68\x65\x2d\x7a\x6f\x6f\x6d").length==0x1){
var f=$(this).find("\x2e\x68\x65\x2d\x7a\x6f\x6f\x6d");
a.fn.changeZoom(f,b,c,d,e);
b.preventDefault()}
}
}
);
$("\x2e\x68\x65\x2d\x7a\x6f\x6f\x6d").live({
mousemove:function(b){
a.fn.moveZoom($(this),b)}
}
);
$("\x2e\x68\x65\x2d\x70\x72\x65").live("\x63\x6c\x69\x63\x6b",function(){
var b=$(this).parents("\x2e\x68\x65\x2d\x77\x72\x61\x70").find("\x2e\x68\x65\x2d\x73\x6c\x69\x64\x65\x72\x73");
a.fn.switchImg(b,-0x1)}
);
$("\x2e\x68\x65\x2d\x6e\x65\x78\x74").live("\x63\x6c\x69\x63\x6b",function(){
var b=$(this).parents("\x2e\x68\x65\x2d\x77\x72\x61\x70").find("\x2e\x68\x65\x2d\x73\x6c\x69\x64\x65\x72\x73");
a.fn.switchImg(b,0x1)}
)}
);
(function(b){
var c=['\x44\x4f\x4d\x4d\x6f\x75\x73\x65\x53\x63\x72\x6f\x6c\x6c','\x6d\x6f\x75\x73\x65\x77\x68\x65\x65\x6c'];
if(b.event.fixHooks){
for(var e=c.length;
e;
){
b.event.fixHooks[c[--e]]=b.event.mouseHooks}
}
;
b.event.special.mousewheel={
setup:function(){
if(this.addEventListener){
for(var e=c.length;
e;
){
this.addEventListener(c[--e],d,false)}
}
else{
this.onmousewheel=d}
}
,teardown:function(){
if(this.removeEventListener){
for(var e=c.length;
e;
){
this.removeEventListener(c[--e],d,false)}
}
else{
this.onmousewheel=null}
}
}
;
b.fn.extend({
mousewheel:function(e){
return e?this.bind("\x6d\x6f\x75\x73\x65\x77\x68\x65\x65\x6c",e):this.trigger("\x6d\x6f\x75\x73\x65\x77\x68\x65\x65\x6c")}
,unmousewheel:function(e){
return this.unbind("\x6d\x6f\x75\x73\x65\x77\x68\x65\x65\x6c",e)}
}
);
function d(e){
var f=e||window.event,g=[].slice.call(arguments,0x1),h=0x0,i=true,j=0x0,k=0x0;
e=b.event.fix(f);
e.type="\x6d\x6f\x75\x73\x65\x77\x68\x65\x65\x6c";
if(f.wheelDelta){
h=f.wheelDelta/0x78}
;
if(f.detail){
h=-f.detail/0x3}
;
k=h;
if(f.axis!==undefined&&f.axis===f.HORIZONTAL_AXIS){
k=0x0;
j=-0x1*h}
;
if(f.wheelDeltaY!==undefined){
k=f.wheelDeltaY/0x78}
;
if(f.wheelDeltaX!==undefined){
j=-0x1*f.wheelDeltaX/0x78}
;
g.unshift(e,h,j,k);
return(b.event.dispatch||b.event.handle).apply(this,g)}
}
)(jQuery);
CSS代码(demo.css):
@charset "utf-8";/* CSS Document */
@import url('reset.css');html,body{margin:0;padding:0;font-family:Arial,sans-serif;font-size:14px;line-height:1.5em;}
.header{border-top:4px solid #c00;}
.header-inner{width:1100px;margin:0 auto;}
.header li{float:left;margin-right:10px;}
.header li a{display:block;height:49px;border-bottom:2px solid #fff;line-height:49px;padding:0 20px;color:#c00;}
.logo{background-color:#c00;color:#fff;float:left;font-size:24px;padding:15px 20px;text-decoration:none;text-shadow:1px 1px 1px rgba(0,0,0,.1);margin-right:20px;}
.header li a.active{border-bottom:2px solid #c00;}
.page{width:1100px;margin:0 auto;padding:20px 0;}
.box{float:left;padding:1px;box-shadow:0 0 2px rgba(0,0,0,.1);margin:20px 40px 20px 0;}
.title{border-bottom:3px solid #ddd;line-height:2em;clear:both;}
.title h3{float:left;margin-bottom:-3px;border-bottom:3px solid #c00;color:#c00;padding:0 5px;}
pre{background:none repeat scroll 0 0 #f5f5f5;border-left:2px solid #c00;display:block;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;line-height:150%;margin:30px 0 18px 2px;overflow:auto;padding:8px 0 8px 16px;white-space:pre;letter-spacing:.6px;text-shadow:1px 1px 1px #fff;}
table{border-collapse:collapse;}
th,td{padding:5px 15px;}
.a_slow{-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-ms-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:1.6s;-moz-animation-duration:1.6s;-ms-animation-duration:1.6s;-o-animation-duration:1.6s;animation-duration:1.6s;}
.info{float:left;padding:30px;}
.thumb-list{float:left;}
.thumb-list li{padding:1px;border:1px solid #ddd;float:left;margin-right:20px;cursor:pointer;}
.thumb-list li img{width:60px;float:left;}
.demowrap{}
分享到QQ
分享到微博
微信扫一扫
