以下是 jQuery图片抖动滑块切换特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<title>jQuery图片拼接抖动切换</title>
<!-- META TAGS -->
<meta charset="utf-8" />
<link href="css/demo.css" rel="stylesheet" type="text/css" />
<link href="css/zeusanimations.css" rel="stylesheet" type="text/css" />
<link href="css/zeusslider.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<!-- ZEUS SLIDER -->
<div id="slide1">
<div class="zeus-slider zeus-default">
<div class="zeus-block">
<div class="zeus-slide s-25">
<img src="images/5.jpg" data-effect="bounceInUp" alt="" />
</div>
<div class="zeus-slide s-25">
<img src="images/2.jpg" data-effect="bounceInDown" alt="" />
</div>
<div class="zeus-slide s-25">
<img src="images/3.jpg" data-effect="bounceInUp" alt="" />
</div>
<div class="zeus-slide s-25">
<img src="images/1.jpg" data-effect="bounceInDown" alt="" />
</div>
<div class="zeus-info">
Lorem Ipsum Dolor </div>
</div>
<div class="zeus-block">
<div class="zeus-slide s-25">
<img src="images/6.jpg" data-effect="bounceInUp" alt="" />
</div>
<div class="zeus-slide s-25">
<img src="images/4.jpg" data-effect="bounceInDown" alt="" />
</div>
<div class="zeus-slide s-50">
<img src="images/12.jpg" data-effect="bounceInLeft" alt="" />
</div>
<div class="zeus-info">
Fusce Elementum, Nulla </div>
</div>
<div class="zeus-block">
<div class="zeus-slide s-50">
<img src="images/7.jpg" data-effect="slideRight" alt="" />
</div>
<div class="zeus-slide s-50">
<img src="images/8.jpg" data-effect="slideTop" alt="" />
</div>
<div class="zeus-info">
Consectet Adipiscing Elit </div>
</div>
<div class="zeus-block">
<div class="zeus-slide s-100">
<img src="images/9.jpg" data-effect="zoomIn" alt="" /> </div>
<div class="zeus-info">
Praesent Commodo Cursus </div>
</div>
<div class="clear">
</div>
<div class="next-block">
</div>
<div class="prev-block">
</div>
</div>
</div>
<div class="clear">
</div>
</div>
<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="js/zeusslider.min.js" type="text/javascript"></script>
<script src="js/demo.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#slide1").zeusslider();
});
</script>
</body>
</html>
JS代码(demo.js):
$(document).ready(function(){
$('pre').html(function(i,h){
return h.replace(/[<>\"\'\t\n]/g,function(m){
return{
'<':'<
','>':'>
',"'":''
','"':'"
','\t':' ','\n':'<br/>' // needed for IE}
[m]}
);
}
);
}
);
CSS代码(demo.css):
@import url('normalize.css');@import url('http://fonts.googleapis.com/css?family=Open+Sans');body{font-family:'Open Sans',sans-serif;font-weight:normal;font-size:13px;background-image:url('assets/dark.png');background-repeat:repeat;background-attachment:fixed;}
::-moz-selection{color:#fff;text-shadow:none;background:#aa1111;}
::selection{color:#fff;text-shadow:none;background:#aa1111;}
pre{color:#fff;background-color:#161616;padding:10px;margin-top:10px;margin-bottom:20px;font-size:12px;line-height:1.5;}
pre:last-child{margin-bottom:0;}
.container{width:100%;max-width:1024px;margin:105px auto 0px auto;}
.demo-content{padding-top:20px;padding-bottom:30px;padding-left:30px;padding-right:30px;background-color:#000;width:100%;height:auto;margin-top:30px;margin-bottom:30px;}
header{width:100%;background-color:#000;color:#fff;font-size:40px;padding:10px;position:absolute;top:0;left:0;text-align:center;font-weight:bold;}
.buy{position:fixed;top:0;right:0;background-image:url('assets/buy.png');background-repeat:no-repeat;background-position:center center;width:100px;height:100px;z-index:99;}
h1,h2,h3,h4,h5,h6{margin-top:0px;margin-bottom:15px;color:#fff;}
h1{font-size:40px;}
h2{font-size:34px;}
h3{font-size:28px;}
h4{font-size:24px;}
h5{font-size:20px;}
h6{font-size:18px;}
p{font-size:13px;line-height:1.5;margin-bottom:21px;margin-top:0px !important;word-spacing:0.2em;color:#c7c7c7;}
p:last-child{margin-bottom:0px;}
#slide2{margin-top:30px;margin-bottom:30px;}
.examples{list-style:none;margin:0;margin-bottom:10px;padding:0;width:100%;height:auto;display:inline-block;}
.examples li{float:left;display:inline-block;padding:10px;margin-right:5px;margin-bottom:5px;background-color:#161616;-webkit-transition:all 0.4s ease-in-out;-moz-transition:all 0.4s ease-in-out;-o-transition:all 0.4s ease-in-out;-ms-transition:all 0.4s ease-in-out;}
.examples li a{color:#fff;font-size:16px;text-decoration:none;}
.examples li:hover{background-color:#aa1111;}
.return-home{background-color:#aa1111;padding:10px;color:#fff;font-size:16px;text-decoration:none;margin-top:10px;display:inline-block;cursor:pointer;}
footer{position:fixed;bottom:0;right:0;background-image:url('assets/triangle.png');background-repeat:no-repeat;background-position:center center;width:100px;height:100px;}
@media screen and (max-width:600px){header{font-size:30px;}
}
@media screen and (max-width:480px){h1{font-size:30px;}
h2{font-size:26px;}
h3{font-size:22px;}
h4{font-size:18px;}
h5{font-size:16px;}
h6{font-size:14px;}
}
分享到QQ
分享到微博
微信扫一扫
