页面布局

     <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. 学生表sid,sname,结果表cid,cname,学生成绩表sid,cid,cscore,最高要求的分数输出候补课程专门命名

    --1.建表SQL: --学生表: -- Createtable createtable STUDENT ( SID   NUMBERnotnull, SNAME NVARCHAR2) ) table ...

  2. IT薪酬

    新加坡IT薪酬 2014-06-12 12:51 by 圣殿骑士, 8856 阅读, 37 评论, 收藏, 编辑 很多朋友发邮件或留言问我关于新加坡IT薪酬的问题,由于前段时间比较忙,所以没有及时一一 ...

  3. 有一定基础的 C++ 学习者该怎样学习 Windows 编程?

    人的心理有个奇异的特性:一项知识一旦学会之后,学习过程中面临的困惑和不解非常快就会忘得干干净净,似乎一切都是自然而然,本来就该这种.因此,关于「怎样入门」这类问题,找顶尖高手来回答,未必能比一个刚入门 ...

  4. Navicat工具Oracle数据库复制 or 备用、恢复功能(评论都在谈论需要教)

    GXPT它是一个分布式系统,该系统包括一个临时许可系统.基本系统.教学评价体系.考试系统,每个系统都有自己的oracle数据库.统,而评教系统的正常须要借助于权限系统和基础系统,详细的业务这里就不多解 ...

  5. Android采用Volley具体的例子展示完整的异步加载数据(一)

    MainActivity例如下列: package cc.cn; import java.util.HashMap; import org.json.JSONObject; import androi ...

  6. 一Flash从入门开发者放弃了成长之路

    本文将依照入门.成长.转行三个关键词来讲述作者这些年使用Flash进行项目开发的整个历史过程. 一.入门--開始走上Flash的道路. 和Flash的机缘要从大学时代说起.2005年下半年.学校开设了 ...

  7. gcd&&lcm

    1011 最大公约数GCD 基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题  收藏  关注 输入2个正整数A,B,求A与B的最大公约数.   Input 2个数A,B,中 ...

  8. Windows在配置Python+tornado

    1,安装Python 2.7.x版本号 地址:https://www.python.org/downloads/release/python-278/ 2,安装python setuptools工具 ...

  9. 框架搭建资源 (一) V(视图)C(控制)模式

    pom.xml <properties> <project.build.sourceEncoding>UTF-8</project.build.sourceEncodin ...

  10. 浅谈javascript中的call()和apply()方法

    话说在js中,每个函数都包含两个非继承而来的放方法,apply()和call(),使得我们能在特定的作用域中调用函数. 官方定义: 语法:       fun.call(thisArg[, arg1[ ...