基于jQuery实现列表递推手风琴特效



73 289 97



特效描述:基于jQuery实现 列表递推 手风琴特效,基于jQuery实现列表递推手风琴特效

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/newsWidget.css" />
<link rel="stylesheet" href="css/newsWidget_color.css" />
<link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">

2. 引入JS

<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/greensocks/TweenMax.min.js"></script>
<script src="js/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="js/jquery.jfeed.pack.js"></script>
<script src="js/jquery.newsWidget.min.js"></script>

3. HTML代码

    <div class="container">
            <section class="col-lg-10 col-lg-offset-1">
		<div style="width:960px; margin:0 auto;position:relative;">
			<ul id="mainNewsWidget">
				<li data-title="Press on Read More to Open" data-date="12-2-2013" data-image="images/img/1.jpg">
				<h2>2 Different Styles to continue reading this.</h2>
				<br />
				<strong>The Full page Style</strong> and <strong>In-Widget Style</strong>.<p>
				This is the full page view. Check examples for the In-widget.<br />
				</p>
				<br />
				<p>Lorem ipsum dolor <strong>sit</strong> amet, <span>consectetuer</span>
				<em>adipiscing elit</em>, sed diam nonummy nibh euismod tincidunt 
				ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim 
				veniam, quis nostrud exerci tation ullamcorper suscipit lobortis 
				nisl ut aliquip ex ea commodo consequat.</p>
				<ul style="list-style:square; margin-bottom:5px;">
					<li>sdasd</li>
					<li>dsdd</li>
				</ul>
				Duis autem vel eum iriure dolor in hendrerit in vulputate velit 
				esse molestie consequat, vel illum dolore eu feugiat nulla facilisis 
				at vero eros et accumsan et iusto odio dignissim qui blandit praesent 
				luptatum zzril.<p></p>
				<img src="images/img/1.jpg" width="200" height="120" class="img-rounded">
				<p>link <strong>Strong Text</strong>,
				<em>em</em></p>
				<p><button type="button" class="btn btn-primary">Primary
				</button></p>
				<p>delenit augue duis dolore te feugait nulla facilisi. Nam liber 
				tempor cum soluta nobis eleifend option congue nihil imperdiet doming 
				id quod mazim placerat facer possim assum. Typi non habent claritatem 
				insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes 
				demonstraverunt lectores legere me lius quod ii legunt saepius. 
				Claritas est etiam processus dynamicus, qui sequitur mutationem 
				consuetudium lectorum. Mirum est notare quam littera gothica, quam 
				nunc putamus parum claram, anteposuerit litterarum formas humanitatis 
				per seacula quarta decima et quinta decima. Eodem modo typi, qui 
				nunc nobis videntur parum clari, fiant sollemnes in futurum. Lorem 
				ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
				nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
				Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper 
				suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis 
				autem vel eum iriure dolor in hendrerit in vulputate velit esse 
				molestie consequat, vel illum dolore eu feugiat nulla facilisis 
				at vero eros et accumsan et iusto odio dignissim qui blandit praesent 
				luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 
				Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet 
				doming id quod mazim placerat facer possim assum. Typi non habent 
				claritatem insitam; est usus legentis in iis qui facit eorum claritatem. 
				Investigationes demonstraverunt lectores legere me lius quod ii 
				legunt saepius. Claritas est etiam processus dynamicus, qui sequitur 
				mutationem consuetudium lectorum. Mirum est notare quam littera 
				gothica, quam nunc putamus parum claram, anteposuerit litterarum 
				formas humanitatis per seacula quarta decima et quinta decima. Eodem 
				modo typi, qui nunc nobis videntur parum clari, fiant sollemnes 
				in futurum.</p>
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed 
				diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam 
				erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci 
				tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo 
				consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate 
				velit esse molestie consequat, vel illum dolore eu feugiat nulla 
				facilisis at vero eros et accumsan et iusto odio dignissim qui blandit 
				praesent luptatum zzril delenit augue duis dolore te feugait nulla 
				facilisi. Nam liber tempor cum soluta nobis eleifend option congue 
				nihil imperdiet doming id quod mazim placerat facer possim assum. 
				Typi non habent claritatem insitam; est usus legentis in iis qui 
				facit eorum claritatem. Investigationes demonstraverunt lectores 
				legere me lius quod ii legunt saepius. Claritas est etiam processus 
				dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum 
				est notare quam littera gothica, quam nunc putamus parum claram, 
				anteposuerit litterarum formas humanitatis per seacula quarta decima 
				et quinta decima. Eodem modo typi, qui nunc nobis videntur parum 
				clari, fiant sollemnes in futurum.</p>
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed 
				diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam 
				erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci 
				tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo 
				consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate 
				velit esse molestie consequat, vel illum dolore eu feugiat nulla 
				facilisis at vero eros et accumsan et iusto odio dignissim qui blandit 
				praesent luptatum zzril delenit augue duis dolore te feugait nulla 
				facilisi. Nam liber tempor cum soluta nobis eleifend option congue 
				nihil imperdiet doming id quod mazim placerat facer possim assum. 
				Typi non habent claritatem insitam; est usus legentis in iis qui 
				facit eorum claritatem. Investigationes demonstraverunt lectores 
				legere me lius quod ii legunt saepius. Claritas est etiam processus 
				dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum 
				est notare quam littera gothica, quam nunc putamus parum claram, 
				anteposuerit litterarum formas humanitatis per seacula quarta decima 
				et quinta decima. Eodem modo typi, qui nunc nobis videntur parum 
				clari, fiant sollemnes in futurum.</p>
				</li>
				<li data-title="Links can be direct or as Read More buttons inside the News Reader" data-date="12-2-2013" data-image="images/img/2.jpg" data-link="http://51qianduan.com" data-link-type="readmore">
				Links can be 2 types <strong>&quot;readmore&quot;</strong> links and
				<strong>&quot;direct&quot;</strong> links. <br />
				The readmore type will add a Continue reading button at the end 
				of the article however the direct type will open the article in 
				a new tab (can be self). <br>
				To define a readmore link, add <strong>data-link-type</strong> to 
				the list item. Otherwise the link will be direct.<br>
				<br />
				Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam 
				nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat 
				volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation 
				ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
				Duis autem vel eum iriure dolor in hendrerit in vulputate velit 
				esse molestie consequat, vel illum dolore eu feugiat nulla facilisis 
				at vero eros et accumsan et iusto odio dignissim qui blandit praesent 
				luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 
				Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet 
				doming id quod mazim placerat facer possim assum. Typi non habent 
				claritatem insitam; est usus legentis in iis qui facit eorum claritatem. 
				Investigationes demonstraverunt lectores legere me lius quod ii 
				legunt saepius. Claritas est etiam processus dynamicus, qui sequitur 
				mutationem consuetudium lectorum. Mirum est notare quam littera 
				gothica, quam nunc putamus parum claram, anteposuerit litterarum 
				formas humanitatis per seacula quarta decima et quinta decima. Eodem 
				modo typi, qui nunc nobis videntur parum clari, fiant sollemnes 
				in futurum.</li>
				<li data-title="This item is an external link" data-date="12-2-2013" data-image="images/img/2.jpg" data-link="http://51qianduan.com">
				When this is pressed, the user will be redirected to a link predefined. 
				You can set the target.</li>
				<li data-title="Custome Link Text, hover when chosen to check." data-date="12-2-2013" data-link-text="View " data-title-in-link="after">
				<div class="cssCustomization">
					<h3>You can add custom link text to any specific item.</h3>
					You can also choose to show the title or not, and where.<br />
					<br />
					Add to any news item the following code and viola!: <br />
					<br />
					<pre>data-link-text=&quot;CUSTOM LINK TEXT!&quot; <br />data-title-in-link=&quot;none&quot;</pre>
					<br />
					<p><span>data-title-in-link</span>: Control whether the title 
					is included in the custom link text. Values: <span>&quot;before&quot;</span>,
					<span>&quot;after&quot;</span> or <span>&quot;none&quot;</span></p>
				</div>
				</li>
				<li data-title="8 Different Arrow Layouts" data-date="12-2-2013">
				The plugin includes 8 different Arrow layouts including:
				<ul style="margin-left:290px; list-style:square">
					<li>left </li>
					<li>right </li>
					<li>sides </li>
					<li>top-left </li>
					<li>top-right </li>
					<li>bottom-left </li>
					<li>bottom-right </li>
					<li>top/bottom </li>
				</ul>
				<br />
				<br />
				<img src="images/img/arrows.jpg" width="500" /> Lorem ipsum dolor 
				sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod 
				tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi 
				enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit 
				lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel 
				eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, 
				vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan 
				et iusto odio dignissim qui blandit praesent luptatum zzril delenit 
				augue duis dolore te feugait nulla facilisi. Nam liber tempor cum 
				soluta nobis eleifend option congue nihil imperdiet doming id quod 
				mazim placerat facer possim assum. Typi non habent claritatem insitam; 
				est usus legentis in iis qui facit eorum claritatem. Investigationes 
				demonstraverunt lectores legere me lius quod ii legunt saepius. 
				Claritas est etiam processus dynamicus, qui sequitur mutationem 
				consuetudium lectorum. Mirum est notare quam littera gothica, quam 
				nunc putamus parum claram, anteposuerit litterarum formas humanitatis 
				per seacula quarta decima et quinta decima. Eodem modo typi, qui 
				nunc nobis videntur parum clari, fiant sollemnes in futurum.</li>
				<li data-title="Supports RSS Feeds!" data-date="12-2-2013">The plugin 
				supports external/internal RSS Feeds. You can set the number of 
				items to load. You must use a proxy to load external rss feeds, 
				i included one. It is a basic one. Prefferable to use a more advanced 
				and secure one. Google links to many.<br />
				<br />
				Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam 
				nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat 
				volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation 
				ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
				Duis autem vel eum iriure dolor in hendrerit in vulputate velit 
				esse molestie consequat, vel illum dolore eu feugiat nulla facilisis 
				at vero eros et accumsan et iusto odio dignissim qui blandit praesent 
				luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 
				Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet 
				doming id quod mazim placerat facer possim assum. Typi non habent 
				claritatem insitam; est usus legentis in iis qui facit eorum claritatem. 
				Investigationes demonstraverunt lectores legere me lius quod ii 
				legunt saepius. Claritas est etiam processus dynamicus, qui sequitur 
				mutationem consuetudium lectorum. Mirum est notare quam littera 
				gothica, quam nunc putamus parum claram, anteposuerit litterarum 
				formas humanitatis per seacula quarta decima et quinta decima. Eodem 
				modo typi, qui nunc nobis videntur parum clari, fiant sollemnes 
				in futurum.</li>
				<li data-title="Set Height or Set Number of News" data-date="10-1-2013" data-image="images/img/5.jpg">
				The plugin is smart. You can either set the height of the plugin 
				and it will calcualte the number of news to initially display on 
				screen. If you prefer to choose them yourself, you can! Simply set 
				the numberOfNews option to any number and the plugin will calculate 
				the new height! </li>
				<li data-title="Multiple Animations Included" data-date="17-11-2012" data-image="images/img/girl.jpg">
				<h2>You can customize all animations and control all their aspects.</h2>
				<br />
				You can choose how the widget appears, how the article shows, how 
				it closes and how the items react to your hovers. You can also set 
				teh animations duration, delay and easing. <br />
				<br />
				I&#39;ve included 10 animations:
				<ul style="list-style:square; margin:20px; margin-left:100px;">
					<li>left </li>
					<li>right </li>
					<li>sides </li>
					<li>top-left </li>
					<li>top-right </li>
					<li>bottom-left </li>
					<li>bottom-right </li>
					<li>top/bottom </li>
				</ul>
				Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam 
				nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat 
				volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation 
				ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
				Duis autem vel eum iriure dolor in hendrerit in vulputate velit 
				esse molestie consequat, vel illum dolore eu feugiat nulla facilisis 
				at vero eros et accumsan et iusto odio dignissim qui blandit praesent 
				luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 
				Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet 
				doming id quod mazim placerat facer possim assum. Typi non habent 
				claritatem insitam; est usus legentis in iis qui facit eorum claritatem. 
				Investigationes demonstraverunt lectores legere me lius quod ii 
				legunt saepius. Claritas est etiam processus dynamicus, qui sequitur 
				mutationem consuetudium lectorum. Mirum est notare quam littera 
				gothica, quam nunc putamus parum claram, anteposuerit litterarum 
				formas humanitatis per seacula quarta decima et quinta decima. Eodem 
				modo typi, qui nunc nobis videntur parum clari, fiant sollemnes 
				in futurum.</li>
				<li data-title="Image with Overrided options" data-date="12-2-2013" data-image="images/img/girl.jpg" data-image-cropping="false">
				A Sexy Girl.</li>
				<li data-title="Title of the News" data-date="12-2-2013" data-image="images/img/1.jpg">
				Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam 
				nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat 
				volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation 
				ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
				Duis autem vel eum iriure dolor in hendrerit in vulputate velit 
				esse molestie consequat, vel illum dolore eu feugiat nulla facilisis 
				at vero eros et accumsan et iusto odio dignissim qui blandit praesent 
				luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 
				Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet 
				doming id quod mazim placerat facer possim assum. Typi non habent 
				claritatem insitam; est usus legentis in iis qui facit eorum claritatem. 
				Investigationes demonstraverunt lectores legere me lius quod ii 
				legunt saepius. Claritas est etiam processus dynamicus, qui sequitur 
				mutationem consuetudium lectorum. Mirum est notare quam littera 
				gothica, quam nunc putamus parum claram, anteposuerit litterarum 
				formas humanitatis per seacula quarta decima et quinta decima. Eodem 
				modo typi, qui nunc nobis videntur parum clari, fiant sollemnes 
				in futurum.</li>
				<li data-title="Easy Styling using Css." data-date="12-2-2013" data-image="images/img/2.jpg">
				You can dramatically change everything using css. You can edit the 
				sizes, colors, animtions and the whole feel. You can also add custom 
				style to the News Readers. All documented.<br />
				<br />
				Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam 
				nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat 
				volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation 
				ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
				Duis autem vel eum iriure dolor in hendrerit in vulputate velit 
				esse molestie consequat, vel illum dolore eu feugiat nulla facilisis 
				at vero eros et accumsan et iusto odio dignissim qui blandit praesent 
				luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 
				Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet 
				doming id quod mazim placerat facer possim assum. Typi non habent 
				claritatem insitam; est usus legentis in iis qui facit eorum claritatem. 
				Investigationes demonstraverunt lectores legere me lius quod ii 
				legunt saepius. Claritas est etiam processus dynamicus, qui sequitur 
				mutationem consuetudium lectorum. Mirum est notare quam littera 
				gothica, quam nunc putamus parum claram, anteposuerit litterarum 
				formas humanitatis per seacula quarta decima et quinta decima. Eodem 
				modo typi, qui nunc nobis videntur parum clari, fiant sollemnes 
				in futurum.</li>
			</ul>
		</div>
      	    </section>
    </div>
<script>			
		jQuery(document).ready(function() {	
			$("#mainNewsWidget").newsWidget({
				currentNewsWidth: 600,
				currentNewsHeight:250,
				fullArticleType : "full" ,
				navBtns: "sides", 
				closedNewsWidth:600,
				closedNewsPosition:"left", 
				closedNewsOffset:0,
				widgetOpenType: "fadeLeft",
				fullArticleOpen: "fadeDown",
				fullArticleClose: "fadeUp",
				linkText:"Open > " , 
				titleInLink : "after"
				});
		});
	</script>
<div style="text-align:center;clear:both">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 瀑布流 收藏 预览 自适应页面大小 响应式区块列表布局 摇摆 烟花 清单样式 照相机 注释 下划线 结构图 鼠标悬停 条形码 弹幕 画板 朋友圈样式 红包 css绘制样式 支付 图文布局 导航切换 收缩导航菜单 文字标签 二维码 文字收缩展开 彩色文字 地图 图片切换 图片收缩展开 文字闪烁 计算器 文字切换 打字机 计时器 背景切换 文字列表 桌面 手风琴 跳转 文字弹幕 选项卡自动切换 步骤 文字高亮 视频切换 键盘 列表切换 签到 分享 渐隐切换 点赞 投票 全屏切换 雪花 切换按钮 打印 缩放切换 答题 震动 图表 鼠标滑过 抽奖 表情 qq空间 头像截图 星星打分评分 编辑器 播放器 电子杂志 排行榜 分页翻页 排序 表格隔行变色 table表格 进度条 多功能 文字叠加 滚动切换 滑动选项卡切换 文字拖动 文字提示框 文字收缩展开 文字放大缩小 文字翻转旋转 文字淡出淡进 文字全屏 文字延迟加载 360全景 html5文字动画 文字滚动 文字滑动 文字切换 选项卡切换 滑动手风琴 滑动星星打分 收缩收起展开 图片文字 文字导航菜单 文字 其他更多

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到