基于jquery实现自动滚动叠加切换特效



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

171 683 228



特效描述:基于jquery实现 自动滚动 叠加切换特效。基于jquery实现自动滚动叠加切换特效

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/funnyNewsTicker.css">
<link href='http://fonts.useso.com/css?family=Open+Sans:400,600,300&subset=latin-ext' rel='stylesheet' type='text/css'>

2. 引入JS

<script src="js/jQuery.js"></script>

3. HTML代码

	<div class="container">
        <div style="width:50%; margin:0 auto; box-sizing:border-box;">
            <div class="funnyNewsTicker fnt-radius fnt-shadow fnt-easing" id="funnyNewsTicker2">
                <ul>
                    <li>
                        <div class="fnt-content" data-link="http://www.51qianduan.com">1. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
                    </li>
                    <li>
                        <div class="fnt-content" data-link="http://www.51qianduan.com">2. When an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries</div>
                    </li>
                    <li>
                        <div class="fnt-content" data-link="http://www.51qianduan.com">3. There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration</div>
                    </li>
                    <li>
                        <div class="fnt-content" data-link="http://www.51qianduan.com">4. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia</div>
                    </li>
                    <li>
                        <div class="fnt-content" data-link="http://www.51qianduan.com">5. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages</div>
                    </li>
                    <li>
                        <div class="fnt-content" data-link="http://www.51qianduan.com">6. Lorem Ipsum is that it has a more-or-less normal distribution</div>
                    </li>
                    <li>
                        <div class="fnt-content" data-link="http://www.51qianduan.com">7. Variations of passages of Lorem Ipsum available, but the majority have suffered</div>
                    </li>
                    <li>
                        <div class="fnt-content" data-link="http://www.51qianduan.com">8. Test content lorem Ipsum is that it has a more-or-less normal distribution</div>
                    </li>
                    <li>
                        <div class="fnt-content" data-link="http://www.51qianduan.com">9. Lorem Ipsum is that it has a more-or-less normal distribution example content </div>
                    </li>
                    <li>
                        <div class="fnt-content" data-link="http://www.51qianduan.com">10. Lorem Ipsum is that it has a more-or-less normal distribution</div>
                    </li>
                </ul>
            </div>
        </div>
        <br><br>
        <div style="width:50%; margin:0 auto; box-sizing:border-box;">
            <div class="funnyNewsTicker fnt-radius fnt-shadow fnt-easing" id="funnyNewsTicker3">
                <ul>
                    <li>
                        <div class="fnt-content" data-link="http://www.51qianduan.com">1. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
                    </li>
                    <li>
                        <div class="fnt-content" data-link="http://www.51qianduan.com">2. When an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries</div>
                    </li>
                    <li>
                        <div class="fnt-content" data-link="http://www.51qianduan.com">3. There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration <a href="#">http://envato.com</a></div>
                    </li>
                    <li>
                        <div class="fnt-content" data-link="http://www.51qianduan.com">4. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia</div>
                    </li>
                    <li>
                        <div class="fnt-content" data-link="http://www.51qianduan.com">5. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages</div>
                    </li>
                    <li>
                        <div class="fnt-content" data-link="http://www.51qianduan.com">6. Lorem Ipsum is that it has a more-or-less normal distribution</div>
                    </li>
                    <li>
                        <div class="fnt-content" data-link="http://www.51qianduan.com">7. Variations of passages of Lorem Ipsum available, but the majority have suffered</div>
                    </li>
                    <li>
                        <div class="fnt-content" data-link="http://www.51qianduan.com">8. Test content lorem Ipsum is that it has a more-or-less normal distribution</div>
                    </li>
                    <li>
                        <div class="fnt-content" data-link="http://www.51qianduan.com">9. Lorem Ipsum is that it has a more-or-less normal distribution example content </div>
                    </li>
                    <li>
                        <div class="fnt-content" data-link="http://www.51qianduan.com">10. Lorem Ipsum is that it has a more-or-less normal distribution</div>
                    </li>
                </ul>
            </div>
        </div>
    </div> 
<script>
	$(document).ready(function(){
		$("#funnyNewsTicker1").funnyNewsTicker({feed:"http://www.51qianduan.com/",width:"70%"});	
		$("#funnyNewsTicker2").funnyNewsTicker({width:"80%",timer:1000,titlecolor:"#FFF",itembgcolor:"#1faf6d",infobgcolor:"#1a935c",buttonstyle:"white",bordercolor:"#1a935c"});	
		$("#funnyNewsTicker3").funnyNewsTicker({width:"40%",itemheight:250,infobarvisible:false,pagenavi:false,timer:500,itembgcolor:"#af1f63",bordercolor:"#af1f63",titlecolor:"#FFF"});	
	});	
</script>



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



×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

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

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