jquery滚动公告demo

实现公告栏目循环的滚动效果,直接放代码:

<!doctype html>
<!--jq110-->
<html>
</body>
</html>
<head>
<meta charset="utf-8">
<title>tianzi  code</title>
<script type="text/javascript" src="jquery-2.1.3.min.js"></script>
<script type="text/javascript">
$(function(){
    setInterval(function(){
        var x=$("ul>:first").clone(true);
        $("ul").append(x);
        $("ul>:first").remove();
    }, 2000)
})
</script>
<style type="text/css">
*{
    padding: 0;
    margin: 0;
}
body{
    margin: 50px;
}
ul{
    list-style: none;
}
li{
    height: 30px;
    line-height: 30px;
}
</style>
</head>
<body>
<ul>
    <li>第一条公告1</li>
    <li>第二条公告2</li>
    <li>第三条公告3</li>
    <li>第四条公告4</li>
    <li>第五条公告5</li>
    <li>第六条公告6</li>
    <li>第七条公告7</li>
    <li>第八条公告8</li>
    <li>第九条公告9</li>
    <li>第十条公告10</li>
</ul>
</body>
</html>

时间: 2024-10-10 22:35:46

jquery滚动公告demo的相关文章

jQuery 实现公告无缝滚动

HTML<div id="hotTopic">              <div class="wrap"><ul id="talking">    <li><a href="#">世界经典音乐剧<妈妈咪呀>1</a></li>    <li><a href="#">阿童木</a&

利用10行js代码实现上下滚动公告效果

解决方案 1. HTML 先建一个div层作为公告显示区,里面包裹一个公告列表(ul); <div class="notice"> <ul> <li>第1条公告第1条公告第1条公告第1条公告第1条公告第1条公告</li> <li>第2条公告第2条公告第2条公告第2条公告第2条公告第2条公告</li> <li>第3条公告第3条公告第3条公告第3条公告第3条公告第3条公告</li> <li

jQuery滚动延迟加载执行代码

滚动条延迟加载 jQuery(function($){ var topicBoxTopHeight = jQuery('#topicBox').offset().top; var topicBoxTopHeight_show = 1 $(window).scroll(function(event){ if($(this).scrollTop() > topicBoxTopHeight-$(window).height()-200 && topicBoxTopHeight_show==

jquery 滚动效果插件

1.css <style> .fl { float: left; } .slider0 img { display: block; width:100px; padding: 2px; } .slider0 li { background: url("http://www.lampbrother.net/php/statics/images/lamp/php_qiye_bg.png") no-repeat scroll 120px 5px ; color: #000000;

代码:jquery自定义插件 demo

jquery自定义插件 demo 2016-1-13 只是一个简易的示例 <script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $.fn.portamento = function

jQuery.Callbacks之demo

jQuery.Callbacks是jquery在1.7版本之后加入的,是从1.6版中的_Deferred对象中抽离的,主要用来进行函数队 列的add.remove.fire.lock等操作,并提供once.memory.unique.stopOnFalse四个option进行一些特 殊的控制,这是jquery的官方文档:http://api.jquery.com/jQuery.Callbacks/ 这个函数常见的应用场景是事件触发机制,也就是设计模式中的观察者(发布.订阅机制),目前Callba

滚动公告

前端时间有个做也卖弄滚动公告的需求,开始偷懒百度了下,发现大多数人都是用 marquee 标签来实现,的确,用这个标签,简单,快捷,不用操心,直接在marquee标签里边塞你要滚动的内容就可以了, 但是在测浏览器兼容性的时候,就发现了一个小小的瑕疵, 1.在滚动的时候,速度是没有办法控制成一样的. 2.marquee实现的滚动条是在每次滚动完了之后在再循环,无法做到首部和尾部滚动链接,中间没有空位 所以完了之后,想用js 来重写一次公告,大体实现了下,做起来还是不难的. 用marquee表签来写

JQuery UI dialog Demo

原文:JQuery UI dialog Demo 源代码下载地址:http://www.zuidaima.com/share/1550463533812736.htm 小例子

jQuery滚动捕捉内容块

jQuery滚动捕捉内容块,jQuery,滚动效果,内容块,捕捉,jQuery滚动捕捉内容块是一款滚动后捕捉内容块的jQuery插件.本素材由52dvd素材网为您提供免费下载,更多更精致的脚本下载尽在52dvd素材网.jquery滚动代码 下载地址:http://www.huiyi8.com/gundongdaima/jquery/(转载请注明此处)