产品展示Smooth Products插件js代码

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

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

以下是产品展示Smooth Products插件js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html lang="en">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta charset='gb2312'>
    <title>产品展示Smooth Products插件</title>
    <link rel="stylesheet" href="css/smoothproducts.css">
</head>
<body>
<br><center>
<div class="page">
	<div class="sp-wrap">
	<a href="images/1.jpg"><img src="images/1_tb.jpg" alt="标题"></a>
	<a href="images/2.jpg"><img src="images/2_tb.jpg" alt="标题"></a>
	<a href="images/3.jpg"><img src="images/3_tb.jpg" alt="标题"></a>
	<a href="images/4.jpg"><img src="images/4_tb.jpg" alt="标题"></a>
	</div>
</div>
</center>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/smoothproducts.js"></script>
</body>
</html>

JS代码(smoothproducts.js):

// Add some markup & set some CSS$('.sp-wrap').append('<div class="sp-large"></div><div class="sp-thumbs sp-tb-active"></div>');
	$('.sp-wrap a').appendTo('.sp-thumbs');
	$('.sp-thumbs a:first').addClass('sp-current').clone().removeClass('sp-current').appendTo('.sp-large');
	$('.sp-wrap').css('display','inline-block');
	var slideTiming = 300;
	var maxWidth = $('.sp-large img').width();
	// Prevent clicking while things are happening$(document.body).on('click','.sp-thumbs',function(event){
	event.preventDefault();
}
);
	// Clicking a thumbnail $(document.body).on('click','.sp-tb-active a',function(event){
	$('.sp-current').removeClass();
	$('.sp-thumbs').removeClass('sp-tb-active');
	$('.sp-zoom').remove();
	var currentHeight = $('.sp-large').height();
	$('.sp-large').css({
	overflow:'hidden',height:currentHeight + 'px'}
);
	$('.sp-large a').remove();
	$(this).addClass('sp-current').clone().hide().removeClass('sp-current').appendTo('.sp-large').fadeIn(slideTiming,function (){
	var autoHeight = $('.sp-large img').height();
	$('.sp-large').height(currentHeight).animate({
	height:autoHeight}
,'fast',function (){
	$('.sp-large').css('height','auto');
}
);
	$('.sp-thumbs').addClass('sp-tb-active');
}
);
	event.preventDefault();
}
);
	// Zoom In$(document.body).on('click','.sp-large a',function(event){
	var largeUrl = $(this).attr('href');
	$('.sp-large').append('<div class="sp-zoom"><img src="' + largeUrl + '"/></div>');
	$('.sp-zoom').fadeIn();
	$('.sp-large').css({
	left:0,top:0}
);
	event.preventDefault();
}
);
	// Panning zoomed image$(document).ready(function (){
	$('.sp-large').mousemove(function (e){
	var viewWidth = $('.sp-large').width();
	var viewHeight = $('.sp-large').height();
	var largeWidth = $('.sp-zoom').width();
	var largeHeight = $('.sp-zoom').height();
	var parentOffset = $(this).parent().offset();
	var relativeXPosition = (e.pageX - parentOffset.left);
	var relativeYPosition = (e.pageY - parentOffset.top);
	var moveX = Math.floor((relativeXPosition * (viewWidth - largeWidth) / viewWidth));
	var moveY = Math.floor((relativeYPosition * (viewHeight - largeHeight) / viewHeight));
	$('.sp-zoom').css({
	left:moveX,top:moveY}
);
}
).mouseout(function (){
	//}
);
}
);
	// Panning on mobile devices using Gyroscope. Aw Yeah.window.ondeviceorientation = function(event){
	var viewWidth = $('.sp-large').width();
	var viewHeight = $('.sp-large').height();
	var largeWidth = $('.sp-zoom').width();
	var largeHeight = $('.sp-zoom').height();
	var pitchInit = Math.floor(event.beta)+90;
	var pitch = Math.floor((-(largeHeight - viewHeight)/(150-100))*(pitchInit-100));
	var rollInit = Math.floor(event.gamma)+180;
	var roll = Math.floor((-(largeWidth - viewWidth)/(200-160))*(rollInit-160));
	// Prevent moving too far on X axis if (roll < -(largeWidth - viewWidth)){
	//}
else if(roll > 0){
	//}
else{
	$('.sp-zoom').css({
	left:roll + 'px'}
);
}
// Prevent moving too far on Y axis if (pitch < -(largeHeight - viewHeight)){
	//}
else if(pitch > 0){
	//}
else{
	$('.sp-zoom').css({
	top:pitch + 'px'}
);
}
}
// Zoom out$(document.body).on('click','.sp-zoom',function(event){
	$(this).fadeOut(function (){
	$(this).remove();
}
);
}
);

CSS代码(smoothproducts.css):

html,body{height:100%:width:100%;}
.sp-wrap{display:none;line-height:0;font-size:0;background:#eee;position:relative;margin:0 25px 15px 0;border:1px solid #E4E4E4;}
.sp-large{position:relative;overflow:hidden;}
.sp-large a img{max-width:100%;height:auto;cursor:-webkit-zoom-in;cursor:-moz-zoom-in;}
.sp-large a{display:inline-block;}
.sp-thumbs{width:100%;text-align:left;}
.sp-thumbs img{width:50px;height:50px;}
.sp-thumbs a:link,.sp-thumbs a:visited{border:5px solid #eee;display:inline-block;}
.sp-thumbs a:hover,.sp-thumbs a:active,.sp-current{border:5px solid #5BC9B7!important;}
.sp-zoom{position:absolute;left:0;top:0;cursor:zoom;cursor:-webkit-zoom-out;cursor:-moz-zoom-out;display:none;}

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