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

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滚动提示效果的更多相关文章

  1. Vue.js大屏数字滚动翻转效果

    ================================ 大屏数字滚动翻转效果来源于最近工作中element后台管理页面一张大屏的UI图,该UI图上有一个模块需要有数字往上翻动的效果,以下是最 ...

  2. 原生html,css+js写下载按钮有提示动画效果的落地页

    <!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8&q ...

  3. css+js回到顶部

    .backToTop { display: none; width: 18px; line-height: 1.2; padding: 5px 0; background-color: #000; c ...

  4. 原生JS返回顶部,带返回效果

    有些网站当滑到一定高度时右下角会有一个按钮,你只要一点就可以直接返回顶部了.那这个功能是怎么做到的呢.其实不算太难: 首先我们先在网页中创建一个按钮,上面写上返回顶部,把它的样式改成固定定位,之后想要 ...

  5. css实现鼠标悬浮后的提示效果

    一.概述 很多时候网站中需要在鼠标划过小图标时,悬浮出提示性的文字.比如下图: 鼠标悬浮后的效果 这种效果可以使用css中的伪类hover来实现.但有时候搞不清两个元素的嵌套关系.使用了hover却没 ...

  6. animate.css配合wow.min.js实现各种页面滚动效果

    有的页面在向下滚动的时候,有些元素会产生细小的动画效果.虽然动画比较小,但却能吸引你的注意.比如刚刚发布的 iPhone 6 的页面(查看).如果你希望你的页面也更加有趣,那么你可以试试 WOW.js ...

  7. JS/CSS 各种操作信息提示效果

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  8. js 实现文字列表滚动效果

    今天要实现抽奖名单在首页滚动展示的效果,就用js写了一个,代码如下: html代码: <style type="text/css"> *{margin:;padding ...

  9. BootStrap入门教程 (四) :JQuery类库插件(模态窗口,滚动监控,标签效果,提示效果,“泡芙”效果,警告区域,折叠效果,旋转木马,输入提示)

    上讲回顾:Bootstrap组件丰富同时具有良好可扩展性,能够很好地应用在生产环境.这些组件包括按钮(Button),导航(Navigation),缩略图( thumbnails),提醒(Alert) ...

随机推荐

  1. EventBus使用详解(二)——EventBus使用进阶

    一.概述 前一篇给大家装简单演示了EventBus的onEventMainThread()函数的接收,其实EventBus还有另外有个不同的函数,他们分别是: 1.onEvent2.onEventMa ...

  2. SelectMany等LINQ运算符的使用

    public class Racer : IComparable<Racer>, IFormattable { public string FirstName { get; set; } ...

  3. crawler4j源码学习(1):搜狐新闻网新闻标题采集爬虫

    crawler4j是用Java实现的开源网络爬虫.提供了简单易用的接口,可以在几分钟内创建一个多线程网络爬虫.下面实例结合jsoup,采集搜狐新闻网(http://news.sohu.com/)新闻标 ...

  4. HashMap代码示例

    package com.shushine.framework.第七章Java标准类库;import java.util.HashMap;import java.util.Iterator;import ...

  5. Codeforces Round #339 (Div.2)

    A. Link/Cut Tree time limit per test 2 seconds memory limit per test 256 megabytes input standard in ...

  6. java内部类以及匿名类

    内部类 一个类内部定义的类称为内部类. 内部类允许把逻辑相关的类组织在一起,并控制内部代码的可视性. 内部类与外部类的结构层次如下. 顶层类:最外层的类 外部类:内部类所在的类 内部类:类内部定义的类 ...

  7. Oracle_下载地址

    1.http://www.oracle.com/technetwork/cn/database/enterprise-edition/downloads/index.html 1.1.现在(20161 ...

  8. MAC air 安装redis-3.0.6

    redis版本: p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 16.0px Menlo; color: #c33720; background-colo ...

  9. Android驱动之JNI编写

    要想用java去调用C函数接口那么就需要使用JNI(Java Native Interface,Java 本地调用)去访问本地的动态链接库. 关于NDK的安装,现在有linux环境下的版本,也有win ...

  10. Django1.9开发博客(11)- 富文本与代码高亮

    TinyMCE是一个轻量级的基于浏览器的所见即所得编辑器,支持目前流行的各种浏览器,由JavaScript写成. 功能配置灵活简单(两行代码就可以将编辑器嵌入网页中),支持AJAX.另一特点是加载速度 ...