jQuery点击淡入淡出显示图片特效代码

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

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

以下是 jQuery点击淡入淡出显示图片特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery点击淡入淡出显示图片特效</title>
<link href="coolShow.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="coolShow.js"></script>
</head>
<body style = "background:#ecf0f1;">
<br><br><br>
<center><p style = "color:#334960">点击图标进行展示</p></center>
<div class = "main">
	<div id = "coolShow"></div>
	<div id = "handBar"></div>
</div>
<script type="text/javascript">
/*定义需要展示的图片以及图片的展示时间*/
$(document).ready(function() { 
	$('#coolShow').coolShow({
		imgSrc:['images/1.png','images/2.png','images/3.png'],
		speed:40
	});
});
</script>
</body>
</html>

JS代码(coolShow.js):

/** coolShow 1.0* Copyright (c) 2015 XiaoWangZi* 使用 coolShow 快速制作酷炫轮播*/
(function($){
	$.fn.coolShow = function(options){
	/* 初始化参数 */
var defaults ={
	imgSrc:'',speed:50}
;
	var action ={
	init:function(){
	$('#handBar').find('span').on('click',function(){
	$(this).stop();
	$('#coolShow b').remove();
	/* 生成图片的载体 */
for (var i = 0;
	i<($("#coolShow").height()/10);
	i++) $('#coolShow').append('<b></b>');
	/* 图片显示特效 */
var psn = 0;
	var imgId = $(this).children().data('img');
	$('#coolShow b').each(function(){
	$(this).css({
	opacity:0,backgroundPosition:"0 "+psn+"px",backgroundImage:'url("'+options.imgSrc[imgId]+'")'}
);
	psn -= 10;
}
);
	var time = 0;
	$('#coolShow b').each(function(){
	$(this).delay(time).animate({
	opacity:"1"}
,500);
	time += options.speed;
}
);
}
);
}
}
;
	/* 代码开始 */
return this.each(function(){
	/* 接收传参 */
options = (options)?$.extend(defaults,options):defaults;
	/* 生成按钮的载体 */
for (var i = 0;
	i<options.imgSrc.length;
	i++) $('#handBar').append('<span><img src = "'+options.imgSrc[i]+'" data-img = "'+i+'"/></span>');
	/* 特效开始 */
action.init();
}
);
}
;
}
)(jQuery);

CSS代码(coolShow.css):

@charset "utf-8";*{padding:0;margin:0;}
body{width:100%;}
.main{width:580px;height:600px;margin:0 auto;}
#coolShow{width:575px;height:400px;}
#coolShow b{opacity:0;background:url('images/1.png') no-repeat;background-position:0 0;width:100%;height:10px;display:block;}
#handBar{margin-top:50px;position:relative;}
#handBar span{opacity:0.6;width:100px;height:100px;overflow:hidden;display:inline-block;border:10px solid #217fbc;margin-left:65px;cursor:pointer;border-radius:100px;-ms-border-radius:100px;-moz-border-radius:100px;-webkit-border-radius:100px;-o-border-radius:100px;transition:all 0.5s ease-in-out;-ms-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-webkit-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;}
#handBar span:hover{opacity:1;border:10px solid #1fcf6d;transform:rotate(360deg) scale(1.1);-ms-transition:all 0.5s ease-in-out;-moz-transform:rotate(360deg) scale(1.1);-wekit-transform:rotate(360deg) scale(1.1);-o-transform:rotate(360deg) scale(1.1);}
#handBar span img{width:100%;height:100%;}
.WaterFallBox img{width:100%;height:auto;}

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