基于jQuery实现的单行公告活动轮播效果


Posted in jQuery onAugust 23, 2017

废话不多说了,直接给大家贴代码了,具体代码如下所示:

<div class="lunbo123" style="position:relative;height: 45px;overflow: hidden;background-color:white" ;>
<ul id="myul" style="margin:6px;padding:0px;position:absolute;width: 700px; height: auto;">
<li>
<a href="" style=" rel="external nofollow" rel="external nofollow" text-decoration: none;color: #000000; ">
<span style="height:36px ; line-height: 36px;">公告test1 
</span>
</a>
</br>
</li>
<li>
<a href="" style=" rel="external nofollow" rel="external nofollow" text-decoration: none;color: #000000; ">
<span style="height:36px ; line-height: 36px;">活动test2 
</span>
</a>
</br>
</li>
</ul>
</div>
<script src="//cdn.bootcss.com/jquery/2.2.2/jquery.js"></script>
<script>
function lunbo123(id, height) {
var ul = $(id);
var liFirst = ul.find('li:first');
$(id).animate({
top: height
}).animate({
"top": 0
}, 0, function() {
var clone = liFirst.clone();
$(id).append(clone);
liFirst.remove();
})
}
setInterval("lunbo123('#myul','-45px')", 2500)
</script>
<style>
#myul {
list-style-type: none;
width: 300px;
height: 45px;
font-size: 20px;
}
</style>

总结

以上所述是小编给大家介绍的基于jQuery实现的单行公告活动轮播效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
jQuery.ajax向后台传递数组问题的解决方法
May 12 jQuery
jQuery+ajax实现修改密码验证功能实例详解
Jul 06 jQuery
使用jQuery实现购物车结算功能
Aug 15 jQuery
jQuery DOM节点的遍历方法小结
Aug 15 jQuery
解决jquery appaend元素中id绑定事件失效的问题
Sep 12 jQuery
jQuery实现可兼容IE6的遮罩功能详解
Sep 19 jQuery
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
Nov 08 jQuery
使用jQuery给Table动态增加行、清空table的方法
Sep 05 jQuery
jQuery实现购物车的总价计算和总价传值功能
Nov 28 jQuery
javascript异步处理与Jquery deferred对象用法总结
Jun 04 jQuery
jquery实现自定义树形表格的方法【自定义树形结构table】
Jul 12 jQuery
jQuery列表动态增加和删除的实现方法
Nov 05 jQuery
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
Aug 23 #jQuery
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
Aug 23 #jQuery
简单实现jQuery上传图片显示预览功能
Jun 29 #jQuery
关于JS与jQuery中的文档加载问题
Aug 22 #jQuery
jQuery插件DataTables分页开发心得体会
Aug 22 #jQuery
jQuery实现广告条滚动效果
Aug 22 #jQuery
基于jQuery的表单填充实例
Aug 22 #jQuery
You might like
PHP的autoload机制的实现解析
2012/09/15 PHP
深入php 正则表达式的学习探讨
2013/06/06 PHP
解密ThinkPHP3.1.2版本之独立分组功能应用
2014/06/19 PHP
PHP获取毫秒级时间戳的方法
2015/04/15 PHP
PHP XML和数组互相转换详解
2016/10/26 PHP
JavaScript 题型问答有答案参考
2010/02/17 Javascript
jQuery 1.8 Release版本发布了
2012/08/14 Javascript
js动态生成指定行数的表格
2013/07/11 Javascript
理解javascript闭包
2015/12/15 Javascript
javascript仿百度输入框提示自动下拉补全
2016/01/07 Javascript
老生常谈JavaScript中的this关键字
2016/10/01 Javascript
详解JS中遍历语法的比较
2017/04/07 Javascript
JS实现线性表的顺序表示方法示例【经典数据结构】
2017/04/11 Javascript
Angular2的管道Pipe的使用方法
2017/11/07 Javascript
NodeJs 模仿SIP话机注册的方法
2019/06/21 NodeJs
Nuxt使用Vuex的方法示例
2019/09/06 Javascript
JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记
2020/07/15 Javascript
webpack+vue-cil 中proxyTable配置接口地址代理操作
2020/07/18 Javascript
JavaScript实现缓动动画
2020/11/25 Javascript
对python 树状嵌套结构的实现思路详解
2019/08/09 Python
python实现画循环圆
2019/11/23 Python
python操作docx写入内容,并控制文本的字体颜色
2020/02/13 Python
基于Python 的语音重采样函数解析
2020/07/06 Python
实例讲解CSS3中的border-radius属性
2015/08/18 HTML / CSS
印度尼西亚综合购物网站:Lazada印尼
2016/09/07 全球购物
大学生的应聘自我评价
2013/12/13 职场文书
竞选演讲稿范文
2013/12/28 职场文书
入党积极分子介绍信
2014/01/17 职场文书
揭牌仪式主持词
2014/03/19 职场文书
高中生班主任评语
2014/04/25 职场文书
法院反腐倡廉心得体会
2014/09/09 职场文书
乡镇干部个人对照检查材料思想汇报(原创篇)
2014/09/28 职场文书
党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
2015社区个人工作总结范文
2015/05/13 职场文书
2016年第十四个公民道德宣传日活动总
2016/04/01 职场文书
nginx共享内存的机制详解
2022/03/21 Servers