jQuery新闻列表滚动特效



69 275 92



特效描述:jQuery 新闻列表 滚动特效,jQuery新闻列表滚动特效

代码结构

1. 引入CSS

<link href='http://fonts.googleapis.com/css?family=Ubuntu:400,700&subset=latin-ext' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/ideaboxNews.css">
<link rel="stylesheet" type="text/css" href="css/jquery.mCustomScrollbar.min.css">

2. 引入JS

<script src="js/jQuery.js"></script>
<script src="js/jquery.mCustomScrollbar.min.js"></script>

3. HTML代码

<div class="container">
    <div class="ideaboxNews in-easing" id="idx1">
    	<!--<h3>LATEST NEWS</h3>-->
        <ul>
        	<li>
            	<div class="in-image">
                	<img src="trash/img1.jpg">
                    <span class="in-red"><h6>Read more</h6></span>
                </div>
                <div class="in-content">
                	<h2>LOREM IPSUM DOLAR</h2>
                    <span>10 APRIL 2015, SUNDAY</span>
                    <div>
                    111Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
                    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
                    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
                    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident</p>
                    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
                    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
                    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident</p>
                    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
                    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident</p>
                    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident</p>
                    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
                    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
                    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident</p>
                    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident</p>
                    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
                    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
                    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident</p>
                    </div>
                </div>
            </li>
            <li>
            	<div class="in-image">
                	<img src="trash/img3.jpg">
                    <span class="in-turquoise"><h6>Read more</h6></span>
                </div>
                <div class="in-content">
                	<h2>SIT AMET</h2>
                    <span>11 APRIL 2015, SUNDAY</span>
                    <div>
                    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
                    </div>
                </div>
            </li>
            <li>
            	<div class="in-image">
                	<img src="trash/img7.jpg">
                    <span class="in-yellow"><h6>Read more</h6></span>
                </div>
                <div class="in-content">
                	<h2>text of the printing</h2>
                    <span>12 APRIL 2015, SUNDAY</span>
                    <div>
                    Aenean id rutrum libero, eu elementum enim. Quisque cursus mattis velit. Donec ac ex luctus, blandit ante vel, feugiat magna. Maecenas vitae nisi nulla.<br><br> Sed nibh risus, maximus in imperdiet in, auctor eget nisl. Nullam venenatis ac nunc a feugiat. Pellentesque nulla est, scelerisque id ligula non, convallis euismod odio. Proin tortor est, tincidunt ac libero consequat, venenatis pulvinar purus. Maecenas a feugiat velit<
                    /div>
                </div>
            </li>
            <li>
            	<div class="in-image">
                	<img src="trash/img2.jpg">
                    <span class="in-blue"><h6>Read more</h6></span>
                </div>
                <div class="in-content">
                	<h2>ARE MANY VARIATIONS</h2>
                    <span>13 APRIL 2015, SUNDAY</span>
                    <div>
                    Maecenas vitae nisi nulla. Sed nibh risus, maximus in imperdiet in, auctor eget nisl. Nullam venenatis ac nunc a feugiat. <br><br>Pellentesque nulla est, scelerisque id ligula non, convallis euismod odio. Proin tortor est, tincidunt ac libero consequat, venenatis pulvinar purus. <br><br>Maecenas a feugiat velit. Aliquam quis sodales ligula, id rhoncus purus. Morbi ac justo ut eros lacinia volutpat. Donec id vestibulum lectus. Cras vitae velit mauris. Sed dignissim luctus tristique. Vivamus augue odio, ullamcorper egestas risus a, convallis ultricies velit.
                    </div>
                </div>
            </li>
            <li>
            	<div class="in-image">
                	<img src="trash/img8.jpg">
                    <span class="in-orange"><h6>Read more</h6></span>
                </div>
                <div class="in-content">
                	<h2>SET UT PERSPICIATIS</h2>
                    <span>14 APRIL 2015, SUNDAY</span>
                    <div>
                    Donec et bibendum mauris, a pretium neque. Quisque dignissim non risus eu hendrerit. Ut finibus luctus erat at porttitor. Nam ut congue mauris. Mauris tempor eleifend nisi, eget bibendum purus vestibulum quis. Vestibulum aliquam dapibus porttitor. Quisque tempor non ex at tincidunt. Cras hendrerit nunc et ante hendrerit ultricies id quis quam.
                    </div>
                </div>
            </li>
            <li>
            	<div class="in-image">
                	<img src="trash/img6.jpg">
                    <span class="in-darkblue"><h6>Read more</h6></span>
                </div>
                <div class="in-content">
                	<h2>simply dummy text of the</h2>
                    <span>12 APRIL 2015, SUNDAY</span>
                    <div>
                    Aenean semper maximus mi, eget laoreet odio ornare et. Vestibulum in neque nisl. Nam sodales rhoncus placerat. Fusce turpis ex, venenatis at sapien ac, eleifend eleifend ligula. Integer interdum dapibus sapien, at feugiat tortor facilisis non. <br><br>Aliquam vel diam volutpat, hendrerit leo fermentum, vehicula odio. Ut ac urna in nisi consectetur varius. Aliquam euismod cursus dolor, hendrerit auctor metus pulvinar et. Cras consequat enim id urna volutpat, at interdum nisi elementum. <br><br>Donec eget erat vitae nisi porta cursus nec vel lorem. Etiam luctus posuere diam, et congue lectus pharetra in. Praesent facilisis pharetra diam, in vestibulum augue laoreet quis. Mauris maximus fermentum vehicula. Aliquam vel nibh eu justo efficitur aliquet.
                    </div>
                </div>
            </li>
            <li>
            	<div class="in-image">
                	<img src="trash/img9.jpg">
                    <span class="in-yellow"><h6>Read more</h6></span>
                </div>
                <div class="in-content">
                	<h2>Praesent tristique accumsan</h2>
                    <span>12 APRIL 2015, SUNDAY</span>
                    <div>
                    Vestibulum id ex blandit, euismod magna a, ullamcorper enim. Aliquam porta justo eu diam venenatis consequat. Praesent tristique accumsan luctus. Sed dictum, nisl at condimentum mattis
                    </div>
                </div>
            </li>
            <li>
            	<div class="in-image">
                	<img src="trash/img10.jpg">
                    <span class="in-orange"><h6>Read more</h6></span>
                </div>
                <div class="in-content">
                	<h2>porttitor eu dui</h2>
                    <span>12 APRIL 2015, SUNDAY</span>
                    <div>
                    Sed dictum, nisl at condimentum mattis, lectus nisl rutrum dolor, vitae dictum erat nunc id ex. Ut ipsum lorem, auctor eu interdum vel, mollis eget felis. Aliquam faucibus ullamcorper nibh, a vestibulum tellus rhoncus a. Sed eros odio, porttitor eu dui tempor, tempus rhoncus elit.
                    </div>
                </div>
            </li>
            <li>
            	<div class="in-image">
                	<img src="trash/img11.jpg">
                    <span class="in-grey"><h6>Read more</h6></span>
                </div>
                <div class="in-content">
                	<h2>Vestibulum neque urna</h2>
                    <span>12 APRIL 2015, SUNDAY</span>
                    <div>
                    	Nulla egestas eleifend arcu, quis venenatis libero imperdiet non. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum neque urna, commodo nec dui nec, laoreet commodo neque. Donec posuere pretium dictum. Fusce eget quam at odio sagittis fermentum. Vestibulum mollis metus nisi, sit amet varius metus dapibus gravida. Morbi sed est sapien. Phasellus porta mauris id ullamcorper faucibus
                    </div>
                </div>
            </li>
            <li>
            	<div class="in-image">
                	<img src="trash/img12.jpg">
                    <span class="in-red"><h6>Read more</h6></span>
                </div>
                <div class="in-content">
                	<h2>Etiam leo libero</h2>
                    <span>12 APRIL 2015, SUNDAY</span>
                    <div>
                    	Etiam leo libero, fermentum non efficitur non, faucibus non neque. Nulla accumsan mauris nisl, id malesuada sem ultrices eget. Cras ut scelerisque sem. Fusce nec mi non ipsum finibus gravida et sed mauris. Curabitur aliquet ornare urna, eget iaculis orci lacinia a. Cras vulputate tellus et erat sodales, vel pretium neque imperdiet. Maecenas imperdiet, velit non consequat rhoncus
                    </div>
                </div>
            </li>
            <li>
            	<div class="in-image">
                	<img src="trash/img13.jpg">
                    <span class="in-turquoise"><h6>Read more</h6></span>
                </div>
                <div class="in-content">
                	<h2>Quisque et tempor diam</h2>
                    <span>12 APRIL 2015, SUNDAY</span>
                    <div>
                    	Nam porta lobortis mollis. Quisque et tempor diam. Quisque at ipsum id ipsum pretium interdum. Nunc sit amet purus sit amet sapien blandit finibus. Vivamus non orci diam. Fusce accumsan massa a convallis semper. Aliquam erat volutpat. Nulla neque est, suscipit quis sagittis a, rhoncus at felis.
                    </div>
                </div>
            </li>
            <li>
            	<div class="in-image">
                	<img src="trash/img14.jpg">
                    <span class="in-darkblue"><h6>Read more</h6></span>
                </div>
                <div class="in-content">
                	<h2>simply dummy text of the</h2>
                    <span>12 APRIL 2015, SUNDAY</span>
                    <div>
                    	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam augue nec neque dapibus, at condimentum tellus ultrices. Duis semper varius nulla, sit amet aliquet sapien efficitur eu. Mauris convallis, augue placerat lacinia rhoncus, eros est congue mi, in vestibulum orci arcu maximus nulla. Mauris in blandit lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas
                    </div>
                </div>
            </li>
            <li>
            	<div class="in-image">
                	<img src="trash/img15.jpg">
                    <span class="in-purple"><h6>Read more</h6></span>
                </div>
                <div class="in-content">
                	<h2>tellus augue tempus tellus</h2>
                    <span>12 APRIL 2015, SUNDAY</span>
                    <div>
                    	 Morbi pulvinar, metus in interdum elementum, tellus augue tempus tellus, eu condimentum quam leo in arcu. Donec urna felis, fringilla eu enim nec, elementum fermentum ex. Donec placerat, ante eget tempus aliquam, magna magna placerat dolor, vestibulum hendrerit velit nunc facilisis ligula. Integer nec diam justo. Etiam id tincidunt magna. Duis efficitur non massa et aliquet. Nullam vestibulum sem a convallis sollicitudin. Vestibulum finibus maximus ligula, vel tincidunt leo lobortis eget. Integer gravida scelerisque urna quis tristique.
                    </div>
                </div>
            </li>
            <li>
            	<div class="in-image">
                	<img src="trash/img16.jpg">
                    <span class="in-yellow"><h6>Read more</h6></span>
                </div>
                <div class="in-content">
                	<h2>senectus et netus et malesuada</h2>
                    <span>12 APRIL 2015, SUNDAY</span>
                    <div>
                    	 Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi pulvinar, metus in interdum elementum, tellus augue tempus tellus, eu condimentum quam leo in arcu. Donec urna felis, fringilla eu enim nec, elementum fermentum ex. 
                    </div>
                </div>
            </li>
            <li>
            	<div class="in-image">
                	<img src="trash/img17.jpg">
                    <span class="in-green"><h6>Read more</h6></span>
                </div>
                <div class="in-content">
                	<h2>Fusce eu quam</h2>
                    <span>12 APRIL 2015, SUNDAY</span>
                    <div>
                    	 Nullam id varius nulla, a varius eros. Fusce eu quam ac velit venenatis molestie vel eu libero. In hac habitasse platea dictumst. Suspendisse sagittis eget leo non porta.
                    </div>
                </div>
            </li>
            <li>
            	<div class="in-image">
                	<img src="trash/img18.jpg">
                    <span class="in-orange"><h6>Read more</h6></span>
                </div>
                <div class="in-content">
                	<h2>Etiam leo libero</h2>
                    <span>12 APRIL 2015, SUNDAY</span>
                    <div>
                    	 Vestibulum mollis metus nisi, sit amet varius metus dapibus gravida. Morbi sed est sapien. Phasellus porta mauris id ullamcorper faucibus. Etiam leo libero, fermentum non efficitur non, faucibus non neque. Nulla accumsan mauris nisl, id malesuada sem ultrices eget
                    </div>
                </div>
            </li>
            <li>
            	<div class="in-image">
                	<img src="trash/img19.jpg">
                    <span class="in-turquoise"><h6>Read more</h6></span>
                </div>
                <div class="in-content">
                	<h2>Mauris tristique</h2>
                    <span>12 APRIL 2015, SUNDAY</span>
                    <div>
                    	 Mauris tristique consectetur interdum. Suspendisse potenti. Donec eget elit vel quam sollicitudin vulputate. Nam pellentesque gravida ante a ultricies. Sed neque massa, pharetra sed turpis et, maximus luctus turpis. Nullam id varius nulla, a varius eros. Fusce eu quam ac velit venenatis molestie vel eu libero. In hac habitasse platea dictumst. Suspendisse sagittis eget leo non porta.
                    </div>
                </div>
            </li>
        </ul>
        <div class="in-viewer">
        	<div class="in-viewer-header">
            	<img src="trash/img1.jpg">
                <div>
                	<h2>no title...</h2>
                    <span>no date...</span>
                </div>
            </div>
            <div class="in-viewer-content">
            	no content...
            </div>
            <span class="in-viewer-close"></span>
        </div>
    </div>
</div>
<script>
$(document).ready(function(e) {
	$(".ideaboxNews").ideaboxNews({
		maxwidth		:'100%',
		newscount		:5,
		position		:'relative',
		openspeed		:'fast'
	});
});
</script>



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


热门标签: 文字叠加 文字层叠 滚动 滚动条 页面滚动 滚动插件 滚动条插件 滚动条美化 文字翻转 文字旋转 文字淡出淡进 文字淡出 文字淡进 文字放大缩小 文字缩放 文字大小 文字放大 文字缩小 文字变大 文字变小 文字收缩展开 文字收缩 文字展开 文字提示框 提示文字 文字拖动 文字拖拽 文字延迟加载 文字延迟 文字加载 文字全屏 h5文字动画 h5文字边框动画 html5文字动画 html5文字边框动画 360全景 360度全景 自动滚动图片轮播 文字滚动 文字无缝滚动 文字间歇滚动 文字切换 文字选项卡 文字滑动 文字滑块 图片文字 文字导航菜单 文字导航 文字菜单 文字 文字插件 文字滚动 文字无缝滚动 文字间歇滚动 文字列表

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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