jQuery横向手风琴效果特效代码

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

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

以下是 jQuery横向手风琴效果特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery横向手风琴效果</title>
<link href="fsbanner.css" rel="stylesheet" type="text/css">
<style>
.container {
  margin: 10px auto;
  max-width: 768px;
}
</style>
</head>

<body>

<div class="jquery-script-clear"></div>

<div class="container">
  <h2>Basic</h2>
  <div class="fsbanner" id="demo-1">
    <div style="background-image:url(img/a1.png)"> </div>
    <div style="background-image:url(img/a2.png)"> </div>
    <div style="background-image:url(img/a3.png)"> </div>
    <div style="background-image:url(img/a4.png)"> </div>
  </div>
  <h2>With labels</h2>
  <div class="fsbanner" id="demo-2">
    <div style="background-image:url(img/a1.png)"><span class="name">Image 1</span></div>
    <div style="background-image:url(img/a2.png)"><span class="name">Image 2</span></div>
    <div style="background-image:url(img/a3.png)"><span class="name">Image 3</span></div>
    <div style="background-image:url(img/a4.png)"><span class="name">Image 4</span></div>
  </div>
  <h2>Trigger: mouse hover</h2>
  <div class="fsbanner" id="demo-3">
    <div style="background-image:url(img/a1.png)"><span class="name">Image 1</span></div>
    <div style="background-image:url(img/a2.png)"><span class="name">Image 2</span></div>
    <div style="background-image:url(img/a3.png)"><span class="name">Image 3</span></div>
    <div style="background-image:url(img/a4.png)"><span class="name">Image 4</span></div>
  </div>
</div>
<script src="jquery-1.7.2.min.js"></script>
<script src="fsbanner.js"></script> 
<script>
$('#demo-1').fsBanner();
$('#demo-2').fsBanner();
$('#demo-3').fsBanner({'trigger':'mouse'});
</script>
</body>
</html>

JS代码(fsbanner.js):

var fsBanner = function(container,options){
	var self = this;
	var defaults ={
	'showName':true,'toUpdate':{
}
,'whenEmpty':{
}
,'trigger':'click','hideParent':null,'onChanged':null}
this.options = $.extend({
}
,defaults,options);
	this.ilast = -1;
	this.setup = function(){
	this.container = $(container);
	this.items = this.container.find('div');
	if (!this.container.width()) this.container.width(this.container.parent().width());
	this.part = this.container.width() / this.items.length;
	this.mini = this.part/4;
	this.widmain = this.container.width() - (this.mini*this.items.length-1);
	this.items.css({
	'height':this.container.height(),'width':this.widmain+this.mini}
);
	if (!this.options.showName) this.items.find('.name').hide();
	this.items.each(function(i){
	var $item = $(this);
	$item.css({
	'z-index':i}
);
	if (self.options.trigger == 'click') $item.on('click',function(){
	self.selectItem($item,i);
}
);
	if (self.options.trigger == 'mouse') $item.on('mouseenter',function(){
	self.selectItem($item,i,true);
}
);
}
);
	if (self.options.trigger == 'mouse'){
	this.container.on('mouseleave',function(){
	self.resetcss();
}
);
}
this.resetcss();
	this.container.show();
}
this.resetcss = function(){
	this.items.each(function(i){
	var $item = $(this);
	$item.stop().animate({
	'left':i*self.part}
);
	if (self.options.showName){
	var $name = $item.find('.name');
	if ($name.hasClass('minimized')) $name.hide().removeClass('minimized').fadeIn('fast');
}
}
);
	this.ilast = null;
	this.updateHtml();
}
;
	this.selectItem = function($expanded,iexpanded,forceClick){
	this.$lastexpanded = this.$expanded;
	if (forceClick) this.ilast = null;
	if (iexpanded == this.ilast){
	this.$expanded = null;
	this.resetcss();
}
else{
	this.$expanded = $expanded;
	this.items.each(function(i){
	var $item = $(this);
	if (i <= iexpanded){
	$item.stop().animate({
	'left':i*self.mini}
);
}
else{
	$item.stop().animate({
	'left':i*self.mini+self.widmain}
);
}
if (self.options.showName){
	var $name = $item.find('.name');
	var method = (i == iexpanded) ? 'removeClass':'addClass';
	if (method == 'addClass' && $name.hasClass('minimized')) method = '';
	if (method) $name.hide()[method]('minimized').fadeIn('fast');
}
}
);
	this.ilast = iexpanded;
	this.updateHtml($expanded);
}
this.fireChanged();
}
;
	this.updateHtml = function($expanded){
	this.$expanded = $expanded;
	var $parent = $(self.options.hideParent);
	$.each(this.options.toUpdate,function(field,selector){
	var $obj = $(selector);
	var showit = false;
	var value = '';
	if ($expanded){
	$parent.show();
	value = $expanded.find('.'+field).html();
	showit = true;
}
else{
	if ($parent.length){
	showit = false;
	$parent.hide();
}
else{
	if (self.options.whenEmpty[field]){
	value = self.options.whenEmpty[field];
	showit = true;
}
}
}
$obj.hide();
	if (showit) $obj.html(value).fadeIn('fast');
}
);
}
;
	this.fireChanged = function(){
	if (this.options.onChanged){
	this.options.onChanged(this.$expanded,this.$lastexpanded);
}
}
;
	this.setup();
}
;
	$.fn.fsBanner = function(options){
	return new fsBanner(this,options);
}
;

CSS代码(fsbanner.css):

.fsbanner,.fsbanner > div > span{/* obrigatório */
display:none;}
div.fsbanner{/* obrigatorio */
position:relative;overflow:hidden;/* opcional */
height:300px;color:white;font-size:20px;font-family:Verdana;font-weight:bold;border-radius:5px;-webkit-text-stroke:1px black;}
.fsbanner > div{position:absolute;background-size:cover;cursor:pointer;top:0px;left:0px;}
.fsbanner > div .name{display:block;position:absolute;left:10px;bottom:10px;}
.fsbanner > div .name.minimized{/* css3 */
transform:rotate(-90deg);transform-origin:left top 0;/* pode ser necessário ajustar isso dependendo da fonte escolhida */
bottom:-13px;left:7px;}

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