页面布局

     <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. ios animation暂停pause、恢复resume

    项目以使用来控制动画,例如暂停.复苏继续等待,看看代码:(非常easy实现) -(void)pauseLayer:(CALayer*)layer { CFTimeInterval pausedTime ...

  2. Google大数据三篇著名论文----中文版

    Google File System中文版 Google Bigtable中文版      Google MapReduce中文版

  3. C 这些东西的内存管理

    一.内存介绍 本文主要介绍C内存管理基本概念,以及C语言编译后的可执行程序的存储结构和执行结构. 在用户存储空间,一个C程序的在内存中的分配分类5大部分:代码段.全局已初始化数据段.bss段.堆和栈. ...

  4. ASP.NET AJAX简明教程

     当我们谈论Ajax时,首先想到的就是JavaScript下的Ajax,用来完成网页的交互,局部刷新工作,Microsoft的ASP.NET AJAX框架在Web的开发中承担着类似的角色,并简化了Ja ...

  5. this、访问修饰符——Java笔记(五)

    this         表示当前对象         谁调用方法谁就是当前对象 用static修饰的代码块里面不能使用this 方法里面有一个和字段同名的局部变量时,不能省略this   this还 ...

  6. Spring搭建MVC WEB项目[转]

    原文链接:http://blog.csdn.net/initphp/article/details/8208349 1.创建一个web项目 2.假设,我们已经安装完毕Spring所需要的依赖包,以及一 ...

  7. hdu 逆袭指数

    Problem Description   这依然是关于高富帅小明曾经的故事—— 尽管身处逆境,但小明一直没有放弃努力,除了搬砖,小明还研究过东方的八卦以及西方的星座,一直试图在命理上找到自己能够逆袭 ...

  8. Java数据结构与算法(4) - ch04队列(Queue和PriorityQ)

    队列: 先进先出(FIFO). 优先级队列: 在优先级队列中,数据项按照关键字的值有序,关键字最小的数据项总在对头,数据项插入的时候会按照顺序插入到合适的位置以确保队列的顺序,从后往前将小于插入项的数 ...

  9. C#随机双色球

    using System; using System.Collections.Generic; namespace ConsoleApplicationRandnumber { class Progr ...

  10. MongoDB学习笔记&lt;四&gt;

    今天继续学习MongoDB的相关知识,主要包含例如以下: --find具体解释 --分页与排序 --游标和其它知识 1.指定返回的键 db.person.find({},{"_id" ...