jquery图片滚动条放大效果特效代价

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery图片滚动条放大效果特效代价的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

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图片滚动条放大效果</title>
<link href="css/style.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.1.4.2-min.js"></script>
</head>

<body>

<div class="headeline"></div>

<!--演示内容开始-->
<link href="css/default.css" rel="stylesheet" type="text/css" />
	<div id="content">
		<h1>jquery图片滚动条放大效果</h1>
		<div class="scroller demo1">
			<div class="inside">
				<a href="#"><img src="images/img1.jpg" alt="jsfoot" /></a>
				<a href="#"><img src="images/img2.jpg" alt="jsfoot" /></a>
				<a href="#"><img src="images/img3.jpg" alt="jsfoot" /></a>
				<a href="#"><img src="images/img4.jpg" alt="jsfoot" /></a>
				<a href="#"><img src="images/img5.jpg" alt="jsfoot" /></a>
				<a href="#"><img src="images/img6.jpg" alt="jsfoot" /></a>
				<a href="#"><img src="images/img7.jpg" alt="jsfoot" /></a>
				<a href="#"><img src="images/img8.jpg" alt="jsfoot" /></a>
				<a href="#"><img src="images/img9.jpg" alt="jsfoot" /></a>
				<a href="#"><img src="images/img10.jpg" alt="jsfoot" /></a>
				<a href="#"><img src="images/img11.jpg" alt="jsfoot" /></a>
				<a href="#"><img src="images/img12.jpg" alt="jsfoot" /></a>
				<a href="#"><img src="images/img13.jpg" alt="jsfoot" /></a>
				<a href="#"><img src="images/img14.jpg" alt="jsfoot" /></a>
				<a href="#"><img src="images/img15.jpg" alt="jsfoot" /></a>
			</div>
		</div>
	</div>
<link href="css/demo1.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.easing.js"></script>
<script type="text/javascript" src="js/scroller.js"></script>
<script type="text/javascript">
$(function(){
	$(".demo1").scroller();
});
</script>
<!--演示内容结束-->
</body>
</html>

JS代码(scroller.js):

/* * Scroller * author:Marcin Dziewulski * web:http://www.jscraft.net * email:info@jscraft.net * license:http://www.jscraft.net/licensing.html */
(function($){
	$.fn.scroller = function(options){
	var D ={
	element:'a',direction:'horizontal',container:{
	name:'inside',easing:'easeOutBack',duration:800}
,options:{
	margin:-20,zoom:1.5,easing:['easeOutBack','easeOutBounce'],duration:[300,500]}
,onclick:function(a,img){
}
,onmouseover:function(a,img){
}
,onmouseout:function(a,img){
}
}
// default settingsvar S = $.extend(true,D,options);
	return this.each(function(){
	var M = $(this),IN = M.find('.'+S.container.name),E = M.find(S.element),P ={
	init:function(){
	this._globals.init();
	this._container.init();
	this._position.init();
	this.events.init();
}
,_globals:{
	init:function(){
	D ={
	w:M.width(),h:M.height()}
,I ={
	w:E.width(),h:E.height()}
,DIR = S.direction,MW = I.w+S.options.margin,MH = I.h+S.options.margin;
}
}
,_container:{
	init:function(){
	this.dimensions();
	this.center();
}
,dimensions:function(){
	var css ={
}
if (DIR == 'horizontal'){
	css.width = E.length*MW;
}
else if (DIR == 'vertical'){
	css.height = E.length*MH;
}
IN.css(css);
	C ={
	w:IN.width(),h:IN.height()}
}
,center:function(){
	var css ={
}
,l = E.length;
	if (DIR == 'horizontal'){
	css.left = -(l*MW)/l*2-MW/2;
}
else if (DIR == 'vertical'){
	css.top = -(l*MH)/l*2;
}
IN.css(css);
}
}
,_position:{
	init:function(){
	this.set();
}
,set:function(){
	E.each(function(i){
	var t = $(this),img = t.find('img'),src = img.attr('src');
	if (DIR == 'horizontal'){
	var x = MW*i,css ={
	left:parseInt(x),top:0}
}
else if (DIR == 'vertical'){
	var y = MH*i,css ={
	left:0,top:parseInt(y)}
}
css.background = 'url('+src+') no-repeat center';
	img.hide();
	t.css(css);
}
);
}
}
,_helper:{
	zoomin:function(){
	var zoom = S.options.zoom,easing = S.options.easing[0],duration = S.options.duration[0],animation ={
	width:I.w*zoom,height:I.h*zoom,marginLeft:(I.w-I.w*zoom)/2,marginTop:(I.h-I.h*zoom)/2}
,css ={
	zIndex:10}
return{
	animation:animation,easing:easing,css:css,duration:duration}
}
,zoomout:function(){
	var easing = S.options.easing[1],duration = S.options.duration[1],animation ={
	width:I.w,height:I.h,marginLeft:0,marginTop:0}
,css ={
	zIndex:1}
return{
	animation:animation,easing:easing,css:css,duration:duration}
}
,animate:function(t,o){
	t.css(o.css).stop(true,true).animate(o.animation,o.duration,o.easing);
}
}
,events:{
	init:function(){
	this.hover();
	this.click();
}
,hover:function(){
	E.bind('mouseover mouseleave',function(e){
	var t = $(this),img = t.find('img');
	if (e.type == 'mouseover'){
	var h = P._helper.zoomin();
	S.onmouseover.call(this,t,img);
}
else{
	var h = P._helper.zoomout();
	S.onmouseout.call(this,t,img);
}
if (!t.hasClass('active')){
	P._helper.animate(t,h);
}
}
);
}
,click:function(){
	E.click(function(){
	var t = $(this),img = t.find('img'),container = S.container,position = t.position(),y = position.top,x = position.left,animate ={
}
;
	if (DIR == 'horizontal'){
	animate.left = -x+D.w/2-MW/2;
}
else if (DIR == 'vertical'){
	animate.top = -y+D.h/2-MH/2;
}
if (!t.hasClass('active')){
	var zoomin = P._helper.zoomin(),zoomout = P._helper.zoomout();
	P._helper.animate(E,zoomout);
	P._helper.animate(t,zoomin);
	E.removeClass('active');
	t.addClass('active');
}
IN.animate(animate,container.duration,container.easing);
	S.onclick.call(this,t,img);
	return false;
}
);
}
}
}
P.init();
}
);
}
;
}
(jQuery));

CSS代码(default.css):

@importurl(http://fonts.googleapis.com/css?family=Merienda+One);/*------general-----------------------------------------------*/
html,body{padding:0;margin:0;height:100%;min-height:100%;}
body{font-family:Arial,Helvetica,sans-serif;background:url(../images/bg.jpg) no-repeat top center fixed;font-size:12px;color:#aaa;}
#content{margin:50px auto 0;width:1000px;}
#content.absolute{position:absolute;top:50%;left:50%;width:600px;height:300px;margin:-150px 0 0 -300px;}
#content h1{font-family:'Merienda One',sans-serif;font-weight:normal;color:#bbb;font-size:60px;line-height:80px;text-align:center;text-shadow:2px 2px #e1e1e1;}
.absolute h1{margin:0;margin-bottom:20px;}
.demo{text-align:center;float:left;clear:both;width:100%;}
.demo a{margin-right:15px;}
.absolute .demo{margin-bottom:20px;}
p{text-align:center;}
.title{clear:both;margin-top:0;font-family:'Merienda One',sans-serif;font-weight:normal;color:#bbb;font-size:44px;text-align:center;text-shadow:2px 2px #e1e1e1;}
a{color:#222;text-decoration:none;}

CSS代码(demo1.css):

@charset "utf-8";.demo1{float:left;clear:both;width:1000px;height:400px;overflow:hidden;position:relative;}
.demo1 .inside{position:absolute;top:50%;left:0;height:150px;margin-top:-75px;}
.demo1 a{display:block;position:absolute;width:150px;height:150px;overflow:hidden;border:5px solid #fff;-moz-border-radius:150px;-webkit-border-radius:150px;border-radius:150px;}
.scroller .active{z-index:5!important;}

附件:下载该文件资源,减少时间成本(增值服务)