自下而上滚动公告栏（可悬停）

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>文字公告滚动轮播-jq22.com</title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<style>
* {margin:0;padding:0;
}
li {list-style:none;
}
.news {height:35px;background:#fff;overflow:hidden;
}
.news .t_news {height:20px;color:#2a2a2a;margin-top:15px;overflow:hidden;position:relative;width:500px;
}
.news .news_li,.swap {line-height:20px;display:inline-block;position:absolute;top:0;right:0;font-size:14px;text-align:right;color:#585858
}
.news .swap {top:20px;
}
</style>
</head>
<body>
<div class="news"><div class="t_news"><ul class="news_li"><li>1 我爱北京天安门</li><li>2 我爱北京天安门</li><li>3 我爱北京天安门</li><li>4 我爱北京天安门</li><li>5 我爱北京天安门</li></ul><ul class="swap"></ul></div>
</div><script>
$('.swap').html($('.news_li').html());
x = $('.news_li');
y = $('.swap');
h = $('.news_li li').length * 20; //20为每个li的高度
var hh = $('.news_li li').length;
if (hh > 1)//setTimeout(b,3000);//滚动间隔时间 现在是3秒
    b();
b();function b() {t = parseInt(x.css('top'));//alert(t)
    y.css('top', '20px');x.animate({top: t - 20 + 'px'}, 'slow'); //20为每个li的高度if (Math.abs(t) == h - 20) { //20为每个li的高度
        y.animate({top: '0px'}, 'slow');z = x;x = y;y = z;}setTimeout(b, 3000); //滚动间隔时间 现在是3秒
}
</script></body>
</html>

转载于:https://www.cnblogs.com/shark1100913/p/9308973.html

自下而上滚动公告栏（可悬停）相关推荐

jq文字无缝滚动代码(鼠标悬停停止滚动)
jq实现文字无缝滚动代码(鼠标悬停停止滚动) 效果图直接copy就能运行 <!DOCTYPE html> <html lang="en"> <hea ...
php文字左右滚动通告,微信小程序左右滚动公告栏效果代码实例
这篇文章主要介绍了微信小程序左右滚动公告栏效果代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下代码如下 {{notice}} x data: ...
html 公告栏上下滚动,jquery实现上下滚动公告栏详细代码
之前做项目的时候,一直都想着做一个上下滚动的公告栏,作为展示网站的最新公告信息,因为刚开始自己的思路并不是太清晰,在网上找了很多的源码,但是却发现都不能让自己满意,有的还会出现一些小问题,比如,有时候 ...
【微信小程序-原生开发】实用教程08 - 开通微信云开发，操作云数据库新增数据（含修改数据权限），初始化云服务（含获取微信云环境 id），获取云数据，滚动公告栏
开始前,请先完成圆梦宝典中宫格导航的开发,详见 [微信小程序-原生开发]实用教程 07 - Grid 宫格导航,详情页,侧边导航(含自定义页面顶部导航文字) https://blog.csdn.net ...
java公告栏js资源_javascript制作滚动公告栏
javascript 向上滚动公告.水平滚动公告(翻页效果) 在页面中添加滚动公告栏,不但要向上滚动,而且可以向左滚动.滚动方向可以由用户选择. 以下是在Ext平台下运行的,UICtrl.Status ...
php滚动公告栏,Linux_用DHTML制作带链接的滚动公告栏，不少JavaScript高手的主页上都有 - phpStudy...
用DHTML制作带链接的滚动公告栏不少JavaScript高手的主页上都有用JavaScript编写的带链接的滚动公告栏,不但使主页有限的空间显示更多内容,也使主页增加了动态效果,令人赏心悦目,让许 ...
小程序如何做成html的滚动字幕,小程序两种滚动公告栏的实现方法
先上效果图: 横向滚动栏实现: 网上的几种方案或多或少都有一些问题: 1.setData定时器更新text view的margin-left方法,由于setData的毫秒延时,动画播放起来一卡一卡: ...
jQuery实现的上下滚动公告栏
之前做项目的时候,一直都想着做一个上下滚动的公告栏,作为展示网站的最新公告信息,因为刚开始自己的思路并不是太清晰,在网上找了很多的源码,但是却发现都不能让自己满意,有的还会出现一些小问题,比如,有时候 ...
uniapp垂直滚动公告栏，可上下拖动内容
垂直滚动公告栏效果图 <template><view><view class="an-notice-box" :style="'backg ...

自下而上滚动公告栏（可悬停）

自下而上滚动公告栏（可悬停）相关推荐

最新文章

热门文章