基于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常见面试题之DOM操作详析
Jul 05 jQuery
jQuery实现的文字逐行向上间歇滚动效果示例
Sep 06 jQuery
jQuery实现对网页节点的增删改查功能示例
Sep 18 jQuery
jquery select插件异步实时搜索实例代码
Oct 20 jQuery
原生JS与jQuery编写简单选项卡
Oct 30 jQuery
jQuery插件Validation表单验证详解
May 26 jQuery
JS/jQuery实现简单的开关灯效果【案例】
Feb 19 jQuery
jquery实现Ajax请求的几种常见方式总结
May 28 jQuery
layui+jquery支持IE8的表格分页方法
Sep 28 jQuery
jquery 键盘事件 keypress() keydown() keyup()用法总结
Oct 23 jQuery
jQuery实现开关灯效果
Aug 02 jQuery
jQuery treeview树形结构应用
Mar 24 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的安全
2006/10/09 PHP
jQuery 源码分析笔记
2011/05/25 PHP
php图片上传存储源码并且可以预览
2011/08/26 PHP
apache中为php 设置虚拟目录
2014/12/17 PHP
Yii2中datetime类的使用
2016/12/17 PHP
实例解析php的数据类型
2018/10/24 PHP
Yii 实现数据加密和解密
2021/03/09 PHP
JS类定义原型方法的两种实现的区别评论很多
2007/09/12 Javascript
扩展JavaScript功能的正确方法(译文)
2012/04/12 Javascript
$(&quot;&quot;).click与onclick的区别示例介绍
2014/09/25 Javascript
js 操作符汇总
2014/11/08 Javascript
JavaScript如何调试有哪些建议和技巧附五款有用的调试工具
2015/10/28 Javascript
JavaScript获取URL中参数querystring的方法详解
2016/10/11 Javascript
详谈js遍历集合(Array,Map,Set)
2017/04/06 Javascript
react-native ListView下拉刷新上拉加载实现代码
2017/08/03 Javascript
微信小程序实现动态设置页面标题的方法【附源码下载】
2017/11/29 Javascript
vue和webpack项目构建过程常用的npm命令详解
2018/06/15 Javascript
vue.js配合$.post从后台获取数据简单demo分享
2018/08/11 Javascript
vuejs 制作背景淡入淡出切换动画的实例
2018/09/01 Javascript
koa2使用ejs和nunjucks作为模板引擎的使用
2018/11/27 Javascript
从零到一详聊创建Vue工程及遇到的常见问题
2019/04/25 Javascript
Python中shape计算矩阵的方法示例
2017/04/21 Python
Python获取SQLite查询结果表列名的方法
2017/06/21 Python
Python守护线程用法实例
2017/06/23 Python
pycharm 解除默认unittest模式的方法
2018/11/30 Python
Python学习笔记之视频人脸检测识别实例教程
2019/03/06 Python
使用python判断jpeg图片的完整性实例
2019/06/10 Python
Django中reverse反转并且传递参数的方法
2019/08/06 Python
详解如何在cmd命令窗口中搭建简单的python开发环境
2019/08/29 Python
python使用多线程编写tcp客户端程序
2019/09/02 Python
德国团购网站:Groupon德国
2018/03/13 全球购物
幼儿园标语大全
2014/06/19 职场文书
室内趣味活动方案
2014/08/24 职场文书
幼儿园毕业致辞
2015/07/29 职场文书
面试提问mysql一张表到底能存多少数据
2022/03/13 MySQL
使用Postman测试需要授权的接口问题
2022/06/21 Java/Android