jQuery产品图片细节描述js代码

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

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

以下是 jQuery产品图片细节描述js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE HTML>
<html>
<head>
<title>jQuery��ƷͼƬϸ������</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.image_mapper.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="js/jquery.mCustomScrollbar.min.js"></script>
<script type="text/javascript" src="js/rollover.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/image_mapper.css">
</head>
<body>
<br>
<div id="imagemapper1-wrapper" class="imagemapper-wrapper">
	<img id="imapper1-map-image" src="images/22.jpg" />
	<div id="imapper1-pin7-wrapper" class="imapper1-pin-wrapper imapper-pin-wrapper" data-left="64.758726973802503%" data-top="79.45694305341871%" data-open-position="bottom" data-pin-color data-pin-icon>
		<img id="imapper1-pin7" class="imapper1-pin" src="images/custom-pin4.png">
		<div id="imapper1-pin7-content-wrapper" class="imapper1-pin-content-wrapper imapper-content-wrapper" data-text-color="#dbdbdb" data-back-color="#1fb896" data-border-color="#1fb896" data-border-radius="6px" data-width="200px" data-height="150px" data-font="Dosis">
			<div id="imapper1-pin7-content" class="imapper-content">
				<p class="imapper-content-header">QUALITY STITCHES</p>
				<div class="imapper-content-text">
					High quality stitching make this piece practically indestructible. 
					Perfect for a long-term solution. Along with the cutting-edge 
					design it can last for a long long time. </div>
			</div>
		</div>
	</div>
	<div id="imapper1-pin5-wrapper" class="imapper1-pin-wrapper imapper-pin-wrapper" data-left="49.25201380897584%" data-top="15.873827531819455%" data-open-position="bottom" data-pin-color data-pin-icon>
		<img id="imapper1-pin5" class="imapper1-pin" src="images/custom-pin4.png">
		<div id="imapper1-pin5-content-wrapper" class="imapper1-pin-content-wrapper imapper-content-wrapper" data-text-color="#dbdbdb" data-back-color="#1fb896" data-border-color="#1fb896" data-border-radius="6px" data-width="200px" data-height="150px" data-font="Dosis">
			<div id="imapper1-pin5-content" class="imapper-content">
				<p class="imapper-content-header">COMFORTABLE HOOD</p>
				<div class="imapper-content-text">
					Looking to invest in a really nice plain, grey white or black 
					(or navy etc) hoody that you can wear all the time, in and out 
					the house? </div>
			</div>
		</div>
	</div>
	<div id="imapper1-pin6-wrapper" class="imapper1-pin-wrapper imapper-pin-wrapper" data-left="31.758726973802503%" data-top="53.45694305341871%" data-open-position="bottom" data-pin-color data-pin-icon>
		<img id="imapper1-pin6" class="imapper1-pin" src="images/custom-pin4.png">
		<div id="imapper1-pin6-content-wrapper" class="imapper1-pin-content-wrapper imapper-content-wrapper" data-text-color="#dbdbdb" data-back-color="#1fb896" data-border-color="#1fb896" data-border-radius="6px" data-width="200px" data-height="150px" data-font="Dosis">
			<div id="imapper1-pin6-content" class="imapper-content">
				<p class="imapper-content-header">QUALITY STITCHES</p>
				<div class="imapper-content-text">
					High quality stitching make this piece practically indestructible. 
					Perfect for a long-term solution. Along with the cutting-edge 
					design it can last for a long long time. </div>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">
		(function($) {
			$(window).load(function() {
				$('#imagemapper1-wrapper').imageMapper({itemOpenStyle: 'click', itemDesignStyle: 'responsive'});
			});
		})(jQuery);
	</script>
</body>
</html>

JS代码(rollover.js):

(function($){
	$(document).ready(function(){
	timelineImage();
}
);
	function timelineImage(){
	$('.timeline_rollover_top').unbind('hover').timelineRollover('top');
	$('.timeline_rollover_right').unbind('hover').timelineRollover('right');
	$('.timeline_rollover_bottom').unbind('hover').timelineRollover('bottom');
	$('.timeline_rollover_left').unbind('hover').timelineRollover('left');
}
$.fn.timelineRollover = function(type){
	var lstart,lend;
	var tstart,tend;
	$(this).append('\n<div class="image_roll_glass"></div><div class="image_roll_zoom"></div>');
	switch (type){
	case 'top':lstart='0';
	lend='0';
	tstart='-100%';
	tend='0';
	break;
	case 'right':lstart='100%';
	lend='0';
	tstart='0';
	tend='0';
	break;
	case 'bottom':lstart='0';
	lend='0';
	tstart='100%';
	tend='0';
	break;
	case 'left':lstart='-100%';
	lend='0';
	tstart='0';
	tend='0';
	break;
}
$(this).find('.image_roll_zoom').css({
	left:lstart,top:tstart}
);
	$(this).hover(function(){
	$(this).find('.image_roll_zoom').stop(true,true).animate({
	left:lend,top:tend}
,200);
	$(this).find('.image_roll_glass').stop(true,true).fadeIn(200);
}
,function(){
	$(this).find('.image_roll_zoom').stop(true).animate({
	left:lstart,top:tstart}
,200);
	$(this).find('.image_roll_glass').stop(true,true).fadeOut(200);
}
);
}
}
)(jQuery);

CSS代码(style.css):

.imapper-content-header{font-size:17px;}
.imapper-content-text{font-size:14px;}
.imagemapper-wrapper{margin:0 auto;}

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

.rar

236.97 KB

立即下载(CNY 2.9￥)

打赏收藏

分享到QQ

分享到微博

微信扫一扫

留言

该资源可下载

.rar

236.97 KB

立即下载

朱环嘉

了解

打赏作者鼓励作者

jquery特效1