JS手风琴插件

最新推荐文章于 2022-10-13 12:31:54 发布

碵蝎

最新推荐文章于 2022-10-13 12:31:54 发布

阅读量419

点赞数

分类专栏：旧技术

本文链接：https://blog.csdn.net/QQ408896436/article/details/52768757

版权

旧技术专栏收录该内容

28 篇文章 0 订阅

订阅专栏

源码：（需要导入jq插件使用）

var Accordion = function(obj){

	//保存用户输入的配置    
	this.config = null; 

	this.idx = obj['startidx'] || 0;

	var self = this;

	//初始化    
    this.init = function()    
    {    
        this.config = {};    
        for(var i in obj)     
        {         
            this.config[i] = obj[i];      
        }     

        this.bind();    
    },

    this.bind = function()
    {
    	$(this.config['obj']).on(this.config['event'], function(){
    			
    		if ($('animated').length > 0) {return;}

    		var index = $(this).index();

			if (index == self.idx) {return;}

			var mode = self.config['mode'];
			var max = self.config['max'];
			var sma = self.config['sma'];

            if (mode == 'width') 
            {
                $(this).animate( { 'width': max }, self.config['speed'] );
                $(self.config['obj']).eq(self.idx).animate( { 'width' : sma }, self.config['speed'] );
            }
            else if(mode == 'height')
            {
                $(this).animate( { 'height': max }, self.config['speed'] );
                $(self.config['obj']).eq(self.idx).animate( { 'height' : sma }, self.config['speed'] );
            }

			self.idx = index;

    	});
    }    
}

html：

<!doctype html>
<html lang="en">
<head>
	<meta charset="gbk">
	<title>Accordion</title>
	<style type="text/css">
		body{margin: 0; padding: 0;}
		
		#list1,#list2{clear: both; overflow: hidden;}

		#list1{width: 990px; height: 290px; overflow: hidden;}
		#list1 .list_main{width: 1237px;}
		#list1 .list_main a{float: left;}
		
		#list2{width: 503px; height: 501px; overflow: hidden;}
		#list2 a{display: block; width: 100%; height: 70px;}

	</style>
</head>
<body>
	
	<div class='list' id='list1'>
		<div class='list_main'>
			<a style='width:162px' href="javascript:"><img src="1.jpg" width='503' height='291'></a>
			<a style='width:503px' href="javascript:"><img src="2.jpg" width='503' height='291'></a>
			<a style='width:162px' href="javascript:"><img src="3.jpg" width='503' height='291'></a>
			<a style='width:162px' href="javascript:"><img src="4.jpg" width='503' height='291'></a>
		</div>
	</div>
	
	<div class='list' id='list2'>
		<a style='height:291px' href="javascript:"><img src="1.jpg" width='503' height='291'></a>
		<a style='height:70px' href="javascript:"><img src="2.jpg" width='503' height='291'></a>
		<a style='height:70px' href="javascript:"><img src="3.jpg" width='503' height='291'></a>
		<a style='height:70px' href="javascript:"><img src="4.jpg" width='503' height='291'></a>
	</div>

	<script src="http://ossweb-img.qq.com/images/js/jquery/jquery-1.9.1.min.js"></script>
	<script src="Accordion.js"></script>
	<script>

		new Accordion({
			'obj' : '#list1 a',	//元素
			'event' : 'click',	//什么事件产生
			'speed' : 250,		//切换速度
			'startidx' : 1,		//第一个展示的模块,默认为0
			'max' : '503px',	//最宽的宽度，视mode而定
			'sma' : '162px',	//最小的宽度，视mode而定
			'mode' : 'width'	//模式是宽度还是高度
		}).init();

		new Accordion({
			'obj' : '#list2 a',
			'event' : 'click',
			'speed' : 250,
			'startidx' : 0,
			'max' : '291px',
			'sma' : '70px',
			'mode' : 'height'
		}).init();

	</script>
</body>
</html>

源码下载地址：http://download.csdn.net/detail/qq408896436/9691080

碵蝎

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS手风琴插件

源码：（需要导入jq插件使用）var Accordion = function(obj){ //保存用户输入的配置 this.config = null; this.idx = obj['startidx'] || 0; var self = this; //初始化 this.init = function() { ...
复制链接

扫一扫