jQuery类似放大镜缩略图轮播滚动切换特效代码

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

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

以下是 jQuery类似放大镜缩略图轮播滚动切换特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery类似放大镜缩略图切换</title>
<meta name="description" content="wowslider" />
<link rel="stylesheet" type="text/css" href="style/style.css" media="screen" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/a.js"></script>
</head>

<body>

<div id="top"></div>

<div class="container" >
  <!-- end of #header -->
  <div class="ruled1">
				
				
	<!-- Start WOWSlider.com BODY section -->
	<div id="wowslider-container1">
	<div class="ws_images"><ul>
<li><img src="images/big/10211621.jpg" alt="内容 " title="Blue sea" id="wows1_0"/>内容 </li>
<li><img src="images/big/2032112.jpg" alt="内容 " title="Pier" id="wows1_1"/>内容 </li>
<li><img src="images/big/4686c697efa3077e5d691710ec3c8d82.jpg" alt="内容 " title="Purple sky" id="wows1_2"/>内容 </li>
<li><img src="images/big/681fcb3df7d8c3baaecebf78f195f147.jpg" alt="内容 " title="Noon on the sea" id="wows1_3"/>内容 </li>
<li><img src="images/big/b72f7b0cf13ed2b05999ef071d7f675f.jpg" alt="内容 " title="Palm" id="wows1_4"/>内容 </li>
<li><img src="images/big/gd359.jpg" alt="Sea Leisure : jQuery Slider Demo Download" title="Sea Leisure" id="wows1_5"/>Boats in the sea</li>
<li><img src="images/big/mertvoemore.jpg" alt="Black Sea : jQuery Slider Gallery Demo" title="Black Sea" id="wows1_6"/>Mountains along the Black Sea</li>
<li><img src="images/big/more_alushta.jpg" alt="Shore : jQuery Text Slider Demo" title="Shore" id="wows1_7"/>Black sea near Alushta</li>
<li><img src="images/big/nature_sundown_sea_sunset_005344_.jpg" alt="Sea : jQuery Slider Demonstration" title="Sea" id="wows1_8"/>Beautiful sunset</li>
<li><img src="images/big/sea.jpg" alt="Sea waves : Slider In jQuery Demo" title="Sea waves" id="wows1_9"/>Sea waves in the evening</li>
</ul></div>
<div class="ws_bullets"><div>
<a href="http;///" title="Blue sea"><img src="images/10211621.jpg" alt="Blue sea : Slider jQuery Demo"/>Slider jQuery Demo</a>
<a href="http;///" title="Pier"><img src="images/2032112.jpg" alt="Pier : Easy Slider jQuery Plugin Demo"/>Image Slider jQuery Demo</a>
<a href="http;///" title="Purple sky"><img src="images/4686c697efa3077e5d691710ec3c8d82.jpg" alt="Purple sky : jQuery Slider With Caption"/>Image Slider jQuery Demo</a>
<a href="http;///" title="Noon on the sea"><img src="images/681fcb3df7d8c3baaecebf78f195f147.jpg" alt="Noon on the sea : jQuery Image Slider With Caption"/>jQuery Image Slider With Caption</a>
<a href="http;///" title="Palm"><img src="images/b72f7b0cf13ed2b05999ef071d7f675f.jpg" alt="Palm : jQuery Photo Slider With Caption"/>jQuery Photo Slider With Caption</a>
<a href="http;///" title="Sea Leisure"><img src="images/gd359.jpg" alt="Sea Leisure : jQuery Slider Demonstration"/>Slider In jQuery Demo</a>
<a href="http;///" title="Black Sea"><img src="images/mertvoemore.jpg" alt="Black Sea : Vertical Slider jQuery Demo"/>jQuery Content Slider Demo</a>
<a href="http;///" title="Shore"><img src="images/more_alushta.jpg" alt="Shore : Photo Slider jQuery Demo"/>jQuery Text Slider Demo</a>
<a href="http;///" title="Sea"><img src="images/nature_sundown_sea_sunset_005344_.jpg" alt="Sea : jQuery Auto Slider Demo"/>Image Slider jQuery Demo</a>
<a href="http;///" title="Sea waves"><img src="images/sea.jpg" alt="Sea waves : Easy Slider jQuery Plugin Demo"/>Beautiful jQuery Slider Demo</a>
</div></div>
<a class="wsl"  href="http:///">Image Slider jQuery Demo</a>
	<div class="ws_shadow"></div>
	</div>
	<script type="text/javascript" src="js/wowslider.js"></script>
	<script type="text/javascript" src="js/script.js"></script>
	<!-- End WOWSlider.com BODY section -->
<br/>	
</div>
 
</div><!-- end of .container --><!-- end of #footer -->
<!-- end of #footer-wrap -->
</body>
</html>

JS代码(a.js):

(function($){
	$(function(){
	// resent templates description animation$('#nav>li>a').hover(function(){
	$(this).stop(1);
	$(this).animate({
	'background-position':'0px 0'}
);
}
,function(){
	$(this).stop(1);
	$(this).animate({
	'background-position':'-140px 0'}
);
}
)$('.boxgrid').each(function(){
	var $caption = $(this).find('span.boxcaption');
	var pheight = $(this).height();
	$caption.css('top',pheight );
	$(this).hover(function(){
	$caption.stop(1);
	$caption.animate({
	top:pheight - $caption.height()}
);
}
,function(){
	$caption.stop(1);
	$caption.animate({
	top:pheight}
)}
)}
);
	function showHideHead(show){
	if (show){
	$('#headerdemo').show();
	$('#work-list').show();
}
else{
	$('#headerdemo').hide();
	$('#work-list').hide();
}
}
// responsive animationif ($('input.respond').length){
	$('.container').css('max-width','1000px');
	$('.respond label').click(function(){
	var for_attr = $(this).attr('for');
	if (for_attr=="respond_desktop"){
	showHideHead(1);
	$('.container').animate({
	'max-width':'1000px'}
,400);
}
else if (for_attr=="respond_ipad"){
	$('.container').animate({
	'max-width':'800px'}
,400);
	showHideHead(1);
}
else if (for_attr=="respond_iphone"){
	$('.container').animate({
	'max-width':'480px'}
,400);
	showHideHead(0);
}
}
)}
// init mailsvar imgs = document.getElementsByTagName('img');
	var mq = /\?mquery=([^\.]+)\.(.+)/,a;
	for (var i=0;
	i<imgs.length;
	i++)if (a = mq.exec(imgs[i].src))$(imgs[i]).wrap('<a href="mai'+'lto:'+a[1]+'@'+a[2]+'.com">');
}
);
}
)(jQuery);

JS代码(script.js):

// -----------------------------------------------------------------------------------// http://wowslider.com/// JavaScript Wow Slider is a free software that helps you easily generate delicious// slideshows with gorgeous transition effects,in a few clicks without writing a single line of code.// Generated by WOW Slider 2.5////***********************************************/
/ Obfuscated by Javascript Obfuscator// http://javascript-source.com//***********************************************function ws_fade(c,a,b){
	var e=jQuery;
	var d=e("ul",b);
	var f={
	position:"absolute",left:0,top:0,width:"100%",height:"100%"}
;
	this.go=function(g,h){
	var i=e(a.get(g)).clone().css(f).hide().appendTo(b);
	if(!c.noCross){
	var j=e(a.get(h)).clone().css(f).appendTo(b);
	d.hide();
	j.fadeOut(c.duration,function(){
	j.remove()}
)}
i.fadeIn(c.duration,function(){
	d.css({
	left:-g+"00%"}
).show();
	i.remove()}
);
	return g}
}
;
	// -----------------------------------------------------------------------------------// http://wowslider.com/// JavaScript Wow Slider is a free software that helps you easily generate delicious// slideshows with gorgeous transition effects,in a few clicks without writing a single line of code.// Generated by WOW Slider 2.5////***********************************************/
/ Obfuscated by Javascript Obfuscator// http://javascript-source.com//***********************************************wowReInitor(jQuery("#wowslider-container1"),{
	effect:"fade",prev:"",next:"",duration:10*100,delay:20*100,width:960,height:360,autoPlay:true,stopOnHover:false,loop:false,bullets:true,caption:true,captionEffect:"move",controls:true,logo:"engine1/loading.gif",images:0}
);

CSS代码(style.css):

/* *generated by WOW Slider 2.5 *template Noble */
#wowslider-container1{zoom:1;position:relative;max-width:960px;margin:0 auto;z-index:100;border:none;text-align:left;/* reset align=center */
}
* html #wowslider-container1{width:960px}
#wowslider-container1 ul{position:relative;width:10000%;height:auto;left:0;list-style:none;margin:0;padding:0;border-spacing:0;overflow:visible;/*table-layout:fixed;*/
}
#wowslider-container1 .ws_images ul li{width:1%;line-height:0;/*opera*/
float:left;font-size:0;padding:0 0 0 0;margin:0 0 0 0;}
#wowslider-container1 .ws_images{position:relative;left:0;top:0;width:100%;height:100%;overflow:hidden;}
#wowslider-container1 .ws_images a{width:100%;display:block;color:transparent;}
#wowslider-container1 .ws_images img{width:100%;border:none 0;max-width:none;}
#wowslider-container1 a{text-decoration:none;outline:none;border:none;}
#wowslider-container1 .ws_bullets{font-size:0px;float:left;position:absolute;z-index:70;}
#wowslider-container1 .ws_bullets div{position:relative;float:left;}
#wowslider-container1 a.wsl{display:none;}
#wowslider-container1 .ws_bullets{padding:10px;}
#wowslider-container1 .ws_bullets a{margin-left:5px;height:10px;width:10px;float:left;border:1px solid #d6d6d6;color:#d6d6d6;text-indent:-4000px;background-image:url("data:image/gif;base64,");position:relative;color:transparent;}
#wowslider-container1 .ws_selbull{background-color:#d6d6d6;color:#FFFFFF;}
#wowslider-container1 .ws_bullets a:hover,#wowslider-container1 .ws_overbull{background-color:#d6d6d6;color:#FFFFFF;}
#wowslider-container1 a.ws_next,#wowslider-container1 a.ws_prev{position:absolute;display:block;top:50%;margin-top:-16px;z-index:60;height:67px;width:32px;background-image:url(../images/arrows.png);}
#wowslider-container1 a.ws_next{background-position:0 0;right:-7px;}
#wowslider-container1 a.ws_prev{left:-7px;background-position:0 100%;}
#wowslider-container1 a.ws_next:hover{background-position:100% 0;}
#wowslider-container1 a.ws_prev:hover{background-position:100% 100%;}
/* bottom center */
#wowslider-container1 .ws_bullets{top:0;right:0;}
#wowslider-container1 .ws-title{position:absolute;bottom:7%;left:0;margin-right:5px;z-index:50;color:#1E4553;font-family:Tahoma,Arial,Helvetica;font-size:14px;}
#wowslider-container1 .ws-title div,#wowslider-container1 .ws-title span{display:inline-block;background-color:#FFF;padding:10px;opacity:0.7;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);}
#wowslider-container1 .ws-title div{display:block;margin-top:10px;font-size:12px;}
#wowslider-container1 ul{animation:wsBasic 30s infinite;-moz-animation:wsBasic 30s infinite;-webkit-animation:wsBasic 30s infinite;}
@keyframes wsBasic{0%{left:-0%}
6.67%{left:-0%}
10%{left:-100%}
16.67%{left:-100%}
20%{left:-200%}
26.67%{left:-200%}
30%{left:-300%}
36.67%{left:-300%}
40%{left:-400%}
46.67%{left:-400%}
50%{left:-500%}
56.67%{left:-500%}
60%{left:-600%}
66.67%{left:-600%}
70%{left:-700%}
76.67%{left:-700%}
80%{left:-800%}
86.67%{left:-800%}
90%{left:-900%}
96.67%{left:-900%}
}
@-moz-keyframes wsBasic{0%{left:-0%}
6.67%{left:-0%}
10%{left:-100%}
16.67%{left:-100%}
20%{left:-200%}
26.67%{left:-200%}
30%{left:-300%}
36.67%{left:-300%}
40%{left:-400%}
46.67%{left:-400%}
50%{left:-500%}
56.67%{left:-500%}
60%{left:-600%}
66.67%{left:-600%}
70%{left:-700%}
76.67%{left:-700%}
80%{left:-800%}
86.67%{left:-800%}
90%{left:-900%}
96.67%{left:-900%}
}
@-webkit-keyframes wsBasic{0%{left:-0%}
6.67%{left:-0%}
10%{left:-100%}
16.67%{left:-100%}
20%{left:-200%}
26.67%{left:-200%}
30%{left:-300%}
36.67%{left:-300%}
40%{left:-400%}
46.67%{left:-400%}
50%{left:-500%}
56.67%{left:-500%}
60%{left:-600%}
66.67%{left:-600%}
70%{left:-700%}
76.67%{left:-700%}
80%{left:-800%}
86.67%{left:-800%}
90%{left:-900%}
96.67%{left:-900%}
}
#wowslider-container1 .ws_bullets a img{text-indent:0;display:block;top:12px;left:-120px;visibility:hidden;position:absolute;border:2px solid #B8C4CF;max-width:none;}
#wowslider-container1 .ws_bullets a:hover img{visibility:visible;}
#wowslider-container1 .ws_bulframe div div{height:90px;overflow:visible;position:relative;}
#wowslider-container1 .ws_bulframe div{left:0;overflow:hidden;position:relative;width:240px;background-color:#B8C4CF;}
#wowslider-container1 .ws_bullets .ws_bulframe{display:none;top:25px;overflow:visible;position:absolute;cursor:pointer;border:2px solid #B8C4CF;}
#wowslider-container1 .ws_bulframe span{position:absolute;}

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