页面布局

     <div id="scroll_div" class="fl"> 
        <div id="scroll_begin">
            恭喜793765***获得 <span class="pad_right">50元巨人点卡奖励</span>
            恭喜793765***获得 <span class="pad_right">50元巨人点卡奖励</span>
            恭喜793765***获得 <span class="pad_right">50元巨人点卡奖励</span>
            恭喜793765***获得 <span class="pad_right">50元巨人点卡奖励</span>
            恭喜793765***获得 <span class="pad_right">50元巨人点卡奖励</span>
            恭喜793765***获得 <span class="pad_right">50元巨人点卡奖励</span>
            恭喜793765***获得 <span class="pad_right">50元巨人点卡奖励</span>
        </div>
        <div id="scroll_end"></div>
    </div> 样式:
.pad_right{ padding-right:2em;}
#scroll_div {height:26px;overflow: hidden;white-space: nowrap;width:535px;margin-left:10px;}
#scroll_begin,#scroll_end {display: inline;}

js代码:

//文字横向滚动
function ScrollImgLeft(){
var speed=50;
var MyMar = null;
var scroll_begin = document.getElementById("scroll_begin");
var scroll_end = document.getElementById("scroll_end");
var scroll_div = document.getElementById("scroll_div");
scroll_end.innerHTML=scroll_begin.innerHTML;
function Marquee(){
if(scroll_end.offsetWidth-scroll_div.scrollLeft<=0)
scroll_div.scrollLeft-=scroll_begin.offsetWidth;
else
scroll_div.scrollLeft++;
}
MyMar=setInterval(Marquee,speed);
scroll_div.onmouseover = function(){
       clearInterval(MyMar);
     }
     scroll_div.onmouseout = function(){
       MyMar = setInterval(Marquee,speed);      
     }  
}
ScrollImgLeft();

js实现文字横向滚动的更多相关文章

  1. jQuery实现文字横向滚动效果

    HTML代码: <div id="aaa" style="width:100px; position:relative; white-space:nowrap; o ...

  2. js实现文字上下滚动效果

    大家都知道,做html页面时,为了提升网页的用户体验,我们需要在网页中加入一些特效,比如单行区域文字上下滚动就是经常用到的特效.如下图示效果: <html> <head> &l ...

  3. js标题文字向上滚动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

  4. Vue开发组件之替代marquee标签,超出宽度文字横向滚动效果

    一.npm 安装 如果你想安装插件(自己写的)安装 install dependencies npm i marquee-components 使用 在main.js引入 import marquee ...

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

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

  6. js实现文字上下滚动

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

  7. 文字横向滚动marquee

    <div style="width:200px; height:300px"> <marquee behavior="scroll" cont ...

  8. js实现文字字幕滚动

    <div class="dggd_r" id="h" style="height:400px;overflow:hidden;display:i ...

  9. 利用js来实现文字的滚动(也就是我们常常见到的新闻版块中的公示公告)

    首先先看一下大致效果图(因为是动态的,在页面无法显示出来) 具体的实现代码如下: 1.首先是css代码: <style type="text/css"> body,ul ...

随机推荐

  1. VB.NET之错误异常处理

    相对于VB而言,VB.NET中引入了很多特色.当中最吸引我的就是引入了结构化异常处理. 尽管VB.NET仍然支持OnError Goto类型的异常处理,可是这样做并非非常好.相比而言,结构化异常处理更 ...

  2. git - 简明指南(转)

    安装 下载 git OSX 版 下载 git Windows 版 下载 git Linux 版 创建新仓库 创建新文件夹,打开,然后执行  git init 以创建新的 git 仓库. 检出仓库 执行 ...

  3. MVC中下拉框显示枚举项

    原文:MVC中下拉框显示枚举项 本篇将通过3种方式,把枚举项上的自定义属性填充到下拉框: 1.通过控制器返回List<SelectListItem>类型给前台视图 2.通过为枚举类型属性打 ...

  4. C++它 typedef void *HANDLE

    阅读时编写代码的代码,经常看到一个代码: typedef void *HANDLE ,这是它背后的故事?怎么理解呢? 不明白的时候.这是非常美妙的感觉,后来我才知道这,这是typedef定义,就在vo ...

  5. 写的好帮手项目官员 - Evernote 5.4(Evernote的) 中国绿色版

    Evernote (中国名:Evernote的) 是一个自由和优秀的笔记软件或个人知识管理软件.它可以帮助你有效地管理所有类型的电子票据.信息等:xbeta 我写了很多信息化管理或 Evernote ...

  6. 比float更好的页面布局inline-block

    一:页面布局的发展过程 桌格设计 表格+css div+css的浮动布局 div+css的内联块布局 二:流行多年的浮动布局的优劣 优势: div+css浮动布局的优势,主要是相对于table布局来说 ...

  7. 【核心研究】消息队列_MessageQueue

    消息队列排队过程中的消息.这第一条消息将首先被处理.但假设消息本身指定要处理的时间.我们必须等待,直到时间的消息处理能力.新闻MessageQueue正在使用Message类的表示,队列中的邮件保存结 ...

  8. printf 对齐

      printf关于对其的问题(参考有关博客加上自己的一些总结) 1.关于左对齐或右对齐问题, 默认的如果%后没有“-”是右对齐的,如果%后跟“0”,不足的个数用0来填充, 例如:printf(&qu ...

  9. 异步编程和线程的使用(.NET 4.5 )

    C#:异步编程和线程的使用(.NET 4.5 )   异步编程和线程处理是并发或并行编程非常重要的功能特征.为了实现异步编程,可使用线程也可以不用.将异步与线程同时讲,将有助于我们更好的理解它们的特征 ...

  10. Android4.4 Framework分析——startService创建过程

    我们经常使用context.startService()要启动service.下面就来分析这service启动过程,下图是service启动序列图: watermark/2/text/aHR0cDov ...