css&js实现顶部banner滚动提示效果

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

以一个小例子来展示滚动提示的代码部分：

try.html

<div id="scrollobj" >
<span class="scrollTxt">本活动将于2016年8月30日结束，如有抽奖机会，请尽快使用。&nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp </span>
</div>

try.css

#scrollobj{
white-space:nowrap;
overflow:hidden;
width:100%;
height: 30px;
line-height: 30px;
background-color: #0553a9;
}
.scrollTxt{
width: 100%;
font-size: 16px;
color: #fff880;
}

try.js

function scroll(obj) {
var tmp = (obj.scrollLeft)++;
//当滚动条到达右边顶端时
if (obj.scrollLeft==tmp) { obj.innerHTML += obj.innerHTML;}
//当滚动条滚动了初始内容的宽度时滚动条回到最左端
if (obj.scrollLeft>=obj.firstChild.offsetWidth) { obj.scrollLeft=0; }

}
$interval(function(){
scroll(document.getElementById('scrollobj'));
},30);

css&js实现顶部banner滚动提示效果的更多相关文章

Vue&period;js大屏数字滚动翻转效果
================================ 大屏数字滚动翻转效果来源于最近工作中element后台管理页面一张大屏的UI图,该UI图上有一个模块需要有数字往上翻动的效果,以下是最 ...
原生html，css+js写下载按钮有提示动画效果的落地页
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&q ...
css+js回到顶部
.backToTop { display: none; width: 18px; line-height: 1.2; padding: 5px 0; background-color: #000; c ...
原生JS返回顶部，带返回效果
有些网站当滑到一定高度时右下角会有一个按钮,你只要一点就可以直接返回顶部了.那这个功能是怎么做到的呢.其实不算太难: 首先我们先在网页中创建一个按钮,上面写上返回顶部,把它的样式改成固定定位,之后想要 ...
css实现鼠标悬浮后的提示效果
一.概述很多时候网站中需要在鼠标划过小图标时,悬浮出提示性的文字.比如下图: 鼠标悬浮后的效果这种效果可以使用css中的伪类hover来实现.但有时候搞不清两个元素的嵌套关系.使用了hover却没 ...
animate&period;css配合wow&period;min&period;js实现各种页面滚动效果
有的页面在向下滚动的时候,有些元素会产生细小的动画效果.虽然动画比较小,但却能吸引你的注意.比如刚刚发布的 iPhone 6 的页面(查看).如果你希望你的页面也更加有趣,那么你可以试试 WOW.js ...
JS/CSS 各种操作信息提示效果
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
js 实现文字列表滚动效果
今天要实现抽奖名单在首页滚动展示的效果,就用js写了一个,代码如下: html代码: <style type="text/css"> *{margin:;padding ...
BootStrap入门教程 (四) ：JQuery类库插件（模态窗口，滚动监控，标签效果，提示效果，&OpenCurlyDoubleQuote;泡芙”效果，警告区域，折叠效果，旋转木马，输入提示）
上讲回顾:Bootstrap组件丰富同时具有良好可扩展性,能够很好地应用在生产环境.这些组件包括按钮(Button),导航(Navigation),缩略图( thumbnails),提醒(Alert) ...

随机推荐

窥探Swift之基本数据类型
在上一篇博客“窥探Swift编程之在Playground上尽情的玩耍”中介绍了如何使用Playground来学习Swift语言.本篇博客就使用Playground来窥探Swift语言.千里之行始于足下 ...
log4j1 插入mysql
做任务需要用到这样的需求: 使用log4j 1.2进行日志管理. 将日志输出到mysql中系统数据库表利用脚本每日生成一张,插入系统运行时特定的表中. 实现方法 properties(放在项目根目录 ...
PySe-005-基础环境配置（Win7）
之前的文章讲述了如何在 MacOX 下配置 Python + Selenium2 的 WebUI测试自动化环境配置,敬请参阅 PySe-001-基础环境配置(MacOX). 此文主要讲述如何配置 Py ...
【转】Github入门教程
原文 http://www.eoeandroid.com/thread-274556-1-1.html [初识Github] 首先让我们大家一起喊一句“Hello Github”.YEAH!就是这样. ...
localhost简介、localhost与 127&period;0&period;0&period;1 及本机IP 的区别
localhost是什么意思? 相信有人会说是本地ip,曾有人说,用127.0.0.1比localhost好,可以减少一次解析. 看来这个入门问题还有人不清楚,其实这两者是有区别的. localhos ...
uCOS-II的信号量及使用
uCOS-II的信号量及使用信号量的定义: OS_EVENT* Key1_SEM; OS_EVENT* Key2_SEM; OS_EVENT* Key3_SEM; 信号量的创建: Key1_SEM= ...
总结UIViewController的view在有navBar和tabBar影响下布局区域的问题
影响 View 布局区域的有以下三个属性: self.edgesForExtendedLayout (影响View布局区域的主要属性) self.navigationController.naviga ...
curl的Get请求，封装方法
//GET请求//参数1是请求的url//参数2是发送的数据的数组//参数3是其他GET选项private function curlGET($url, array $get = array(), a ...
BZOJ&period;5286&period;[AHOI/HNOI2018]转盘(线段树)
BZOJ LOJ 洛谷如果从$1$开始,把每个时间$t_i$减去$i$,答案取决于$\max\{t_i-i\}$.记取得最大值的位置是$p$,答案是\(t_p+1+n-1-p=\ ...
每日英语：Don&&num;39&semi;t Call Us Bossy
[Confident girls are often called the other B-word, and it can keep them from reaching their full po ...