jquery jCoverflip水平滑动大小缩放翻转展示插件


jquery jCoverflip水平滑动大小缩放翻转展示插件
jquery jCoverflip水平滑动大小缩放翻转展示插件以及水平滑动、大小缩放、翻转展示等js/jquery网页特效代码下载。

1. 引入JS

<script src="jquery.min.1.5.1.js" type="text/javascript"></script>
<script src="jquery.ui.1.8.10.js" type="text/javascript"></script>
<script src="jCoverflip.js" type="text/javascript"></script>

2. HTML代码

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
/* flip */
.artist_flow_contn{background:url('images/artist_bg.jpg') no-repeat;width:620px;height:260px;margin:20px auto 0 auto;}
#flip{height:220px;overflow:hidden;position:relative;margin:0 10px;}
.ui-jcoverflip{position:relative;}
.ui-jcoverflip--item{position:absolute;display:block;background:url('images/gallery_shadow.png') repeat-x left bottom;padding-bottom:16px;}
#flip .ui-jcoverflip--title{position:absolute;bottom:0;width:618px;margin-left:1px;text-align:center;}
#flip .ui-jcoverflip--title a{color:#78500a;font-weight:700;text-decoration:none;}
#scrollbar{position:relative;width:480px;margin:10px auto 0 auto;background:url('images/artist_control_off.png') no-repeat center;height:16px;}
#scrollbar{_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='images/artist_control_off.png');}
#scrollbar .ui-slider-handle{background:url('images/artist_control_btn.png') no-repeat center;z-index:992;position:absolute;cursor:default;height:16px;width:16px;text-indent:-9999px;display:block;top:-1px;margin-left:-8px;}
</style>
<div class="artist_flow_contn">  
	<ul id="flip" class="ui-jcoverflip">
		<li class="ui-jcoverflip--item">
			<a href="javascript:;"><img src="images/small8bdc05b54db391ec8eea9dc77c9b01ae.jpg" border="0" ></a>
			<span class="title" style="display: none;"><a href="http://www.51qianduan.com/" target="_blank">jquery图片切换插件制作图片层叠缩放展示效果</a></span>
		</li>
		<li class="ui-jcoverflip--item">
			<a href="javascript:;"><img src="images/small87a2504fbdfb170aac9dbe0b02e9e09c.jpg" border="0" ></a>
			<span class="title" style="display: none;"><a href="http://www.51qianduan.com/" target="_blank">jquery图像幻灯片制作大小图片切换滚动展示</a></span>
		</li>
		<li class="ui-jcoverflip--item">
			<a href="javascript:;"><img src="images/small2e30ea83a8246e76f3a7ac81f2c7b46c.jpg" border="0" ></a>
			<span class="title" style="display: none;"><a href="http://www.51qianduan.com/" target="_blank">jquery图片放大插件鼠标滑过图片放大效果</a></span>
		</li>
		<li class="ui-jcoverflip--item">
			<a href="javascript:;"><img src="images/smallc21fccfeebda4b9c694616f947f56e05.jpg" border="0" ></a>
			<span class="title" style="display: none;"><a href="http://www.51qianduan.com/" target="_blank">jquery图片放大点击小图放大查看大图效果</a></span>
		</li>
		<li class="ui-jcoverflip--item">
			<a href="javascript:;"><img src="images/small72651df4fb1a7349b1dfa74052dd8da9.jpg" border="0" ></a>
			<span class="title" style="display: none;"><a href="http://www.51qianduan.com/" target="_blank">jquery图片切换插件制作图片与文字切换特效</a></span>
		</li>
		<li class="ui-jcoverflip--item">
			<a href="javascript:;"><img src="images/small989e3d7a1959211a37c2df254fda6b4d.jpg" border="0" ></a>
			<span class="title" style="display: none;"><a href="http://www.51qianduan.com/" target="_blank">div+css多张背景图片规范写法图片透明度显示</a></span>
		</li>
		<li class="ui-jcoverflip--item">
			<a href="javascript:;"><img src="images/small6428e2143c097f6aac4b7676eda4a966.jpg" border="0" ></a>
			<span class="title" style="display: none;"><a href="http://www.51qianduan.com/" target="_blank">CSS如何定位工程</a></span>
		</li>
	</ul>
	<div id="scrollbar">
		<a href="#" class="ui-slider-handle" style="left: 50%;"></a>
	</div>
</div>
<script type="text/javascript" >
$(document).ready(function(){
	// cover flip effects //
	//var noOfArtists = 31; //jx
	var noOfArtists = 7; //jx
	$('#flip').jcoverflip({
		current: 0,
		beforeCss: function(el, container, offset){
			return [$.jcoverflip.animationElement(el, {
				left: (container.width() / 2 - 220 - 150 * offset + 20 * offset) + 'px',
				bottom: '20px'
			}, {}), $.jcoverflip.animationElement(el.find('img'), {
				width: Math.max(10, 120 - 0 * offset * offset) + 'px'
			}, {})];
		},
		afterCss: function(el, container, offset){
			return [$.jcoverflip.animationElement(el, {
				left: (container.width() / 2 + 100 + 130 * offset) + 'px',
				bottom: '20px'
			}, {}), $.jcoverflip.animationElement(el.find('img'), {
				width: Math.max(10, 120 - 0 * offset * offset) + 'px'
			}, {})];
		},
		currentCss: function(el, container){
			return [$.jcoverflip.animationElement(el, {
				left: (container.width() / 2 - 80) + 'px',
				bottom: '20px'
			}, {}), $.jcoverflip.animationElement(el.find('img'), {
				width: '160px'
			}, {})];
		},
		change: function(event, ui){
			//jx $('#scrollbar').slider('value', ui.to * 10);
			$('#scrollbar').slider('value', ui.to * (100 / (noOfArtists - 1))); //jx
		}
	});
	$('#scrollbar').slider({
		//jx value: 50,
		value: 0, //init. pic is the beginning of the artists list, so change from 50 (middle) to 0
		//jx step: 10,
		step: 100 / (noOfArtists - 1), //jx
		stop: function(event, ui){
			if (event.originalEvent) {
				//jx var newVal = Math.round(ui.value / 10);
				var newVal = Math.round(ui.value / 100 * (noOfArtists - 1)); //jx
				$('#flip').jcoverflip('current', newVal);
				//jx $('#scrollbar').slider('value', newVal * 10);
				$('#scrollbar').slider('value', newVal / (noOfArtists - 1) * 100); //jx
			}
		}
	});
	// cover flip effects //
});
</script>

相关推荐

发表评论

相关文章