以下是 平滑缩放jQuery图片切换效果特效代码 的示例演示效果:
部分效果截图:
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=gb2312" />
<meta name="keywords" content="JS代码,{keyword},JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为{title}，属于站长常用代码" />
<title>{title}</title>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" charset="utf-8">
<script src="js/jquery-1.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/slider.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!-- 代码 开始 -->
<div id="wrapper">
<img src="images/movingboxes.png" alt="moving boxes" />
<div id="slider">
<img class="scrollButtons left" src="images/leftarrow.png">
<div style="overflow: hidden;" class="scroll">
<div class="scrollContainer">
<div class="panel" id="panel_1">
<div class="inside">
<img src="images/1.jpg" alt="picture" />
<h2>News Heading</h2>
<p>A very shot exerpt goes here... <a href="#" >more link</a></p>
</div>
</div>
<div class="panel" id="panel_2">
<div class="inside">
<img src="images/2.jpg" alt="picture" />
<h2>News Heading</h2>
<p>A very shot exerpt goes here... <a href="#" >more link</a></p>
</div>
</div>
<div class="panel" id="panel_3">
<div class="inside">
<img src="images/3.jpg" alt="picture" />
<h2>News Heading</h2>
<p>A very shot exerpt goes here... <a href="#" >more link</a></p>
</div>
</div>
<div class="panel" id="panel_4">
<div class="inside">
<img src="images/4.jpg" alt="picture" />
<h2>News Heading</h2>
<p>A very shot exerpt goes here... <a href="#" >more link</a></p>
</div>
</div>
<div class="panel" id="panel_5">
<div class="inside">
<img src="images/5.jpg" alt="picture" />
<h2>News Heading</h2>
<p>A very shot exerpt goes here... <a href="#" >more link</a></p>
</div>
</div>
</div>
<div id="left-shadow"></div>
<div id="right-shadow"></div>
</div>
<img class="scrollButtons right" src="images/rightarrow.png">
</div>
</div>
<!-- 代码 结束 -->
</body>
</html>
JS代码(slider.js):
$(function(){
var totalPanels= $(".scrollContainer").children().size();
var regWidth= $(".panel").css("width");
var regImgWidth= $(".panel img").css("width");
var regTitleSize= $(".panel h2").css("font-size");
var regParSize= $(".panel p").css("font-size");
var movingDistance = 300;
var curWidth= 350;
var curImgWidth= 326;
var curTitleSize= "20px";
var curParSize= "15px";
var $panels= $('#slider .scrollContainer > div');
var $container= $('#slider .scrollContainer');
$panels.css({
'float':'left','position':'relative'}
);
$("#slider").data("currentlyMoving",false);
$container.css('width',($panels[0].offsetWidth * $panels.length) + 100 ).css('left',"-350px");
var scroll = $('#slider .scroll').css('overflow','hidden');
function returnToNormal(element){
$(element).animate({
width:regWidth}
).find("img").animate({
width:regImgWidth}
) .end().find("h2").animate({
fontSize:regTitleSize}
).end().find("p").animate({
fontSize:regParSize}
);
}
;
function growBigger(element){
$(element).animate({
width:curWidth}
).find("img").animate({
width:curImgWidth}
) .end().find("h2").animate({
fontSize:curTitleSize}
).end().find("p").animate({
fontSize:curParSize}
);
}
//direction true = right,false = leftfunction change(direction){
//if not at the first or last panelif((direction && !(curPanel < totalPanels)) || (!direction && (curPanel <= 1))){
return false;
}
//if not currently moving if (($("#slider").data("currentlyMoving") == false)){
$("#slider").data("currentlyMoving",true);
var next = direction ? curPanel + 1:curPanel - 1;
var leftValue = $(".scrollContainer").css("left");
var movement = direction ? parseFloat(leftValue,10) - movingDistance:parseFloat(leftValue,10) + movingDistance;
$(".scrollContainer").stop().animate({
"left":movement}
,function(){
$("#slider").data("currentlyMoving",false);
}
);
returnToNormal("#panel_"+curPanel);
growBigger("#panel_"+next);
curPanel = next;
//remove all previous bound functions$("#panel_"+(curPanel+1)).unbind();
//go forward$("#panel_"+(curPanel+1)).click(function(){
change(true);
}
);
//remove all previous bound functions$("#panel_"+(curPanel-1)).unbind();
//go back$("#panel_"+(curPanel-1)).click(function(){
change(false);
}
);
//remove all previous bound functions$("#panel_"+curPanel).unbind();
}
}
// Set up "Current" panel and next and prevgrowBigger("#panel_3");
var curPanel = 3;
$("#panel_"+(curPanel+1)).click(function(){
change(true);
}
);
$("#panel_"+(curPanel-1)).click(function(){
change(false);
}
);
//when the left/right arrows are clicked$(".right").click(function(){
change(true);
}
);
$(".left").click(function(){
change(false);
}
);
$(window).keydown(function(event){
switch (event.keyCode){
case 13://enter$(".right").click();
break;
case 32://space$(".right").click();
break;
case 37://left arrow$(".left").click();
break;
case 39://right arrow$(".right").click();
break;
}
}
);
}
);
CSS代码(style.css):
*{margin:0;padding:0;}
body{font:11px Helvetica,Arial,sans-serif;}
#wrapper{width:800px;margin:25px auto;}
#intro{padding-bottom:10px;}
#slider{width:800px;margin:0 auto;position:relative;border:10px solid #ccc;}
.scroll{overflow:hidden;width:800px;margin:0 auto;position:relative;}
.scrollContainer{position:relative;}
.scrollContainer div.panel{padding:10px;width:274px;height:318px;}
#left-shadow{position:absolute;top:0;left:0;width:12px;bottom:0;background:url(../images/leftshadow.png) repeat-y;}
#right-shadow{position:absolute;top:0;right:0;width:12px;bottom:0;background:url(../images/rightshadow.png) repeat-y;}
.inside{padding:10px;border:1px solid #999;}
.inside img{display:block;border:1px solid #666;margin:0 0 10px 0;width:250px;}
.inside h2{font-weight:normal;color:#111;font-size:16px;margin:0 0 8px 0;}
.inside p{font-size:11px;color:#ccc;}
a{color:#999;text-decoration:none;border-bottom:1px dotted #ccc;}
a:hover{border-bottom:1px solid #999;}
.scrollButtons{position:absolute;top:127px;cursor:pointer;}
.scrollButtons.left{left:-45px;}
.scrollButtons.right{right:-45px;}
.hide{display:none;}
分享到QQ
分享到微博
微信扫一扫
