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



34 135 46



特效描述:基于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>



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


热门标签: 文字叠加 文字层叠 文字放大缩小 文字缩放 文字大小 文字放大 文字缩小 文字变大 文字变小 文字收缩展开 文字收缩 文字展开 文字翻转 文字旋转 文字拖动 文字拖拽 文字淡出淡进 文字淡出 文字淡进 文字全屏 滑动选项卡 滑动切换 滚动切换 滚动条切换 文字延迟加载 文字延迟 文字加载 文字提示框 提示文字 360全景 360度全景 h5文字动画 h5文字边框动画 html5文字动画 html5文字边框动画 文字滑动 文字滑块 文字滚动 文字无缝滚动 文字间歇滚动 文字切换 文字选项卡 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 滑动星星打分 收缩展开 展开收缩 收缩 展开 图片文字 文字导航菜单 文字导航 文字菜单 文字 文字插件 其他 收缩菜单 收缩导航 文字切换 文字选项卡 文字列表 手风琴 水平手风琴 垂直手风琴 图片手风琴 文字手风琴 手风琴插件 鼠标滑过 鼠标悬停 跟随鼠标移动

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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