js实现文字横向滚动
页面布局
<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实现文字横向滚动的更多相关文章
- jQuery实现文字横向滚动效果
HTML代码: <div id="aaa" style="width:100px; position:relative; white-space:nowrap; o ...
- js实现文字上下滚动效果
大家都知道,做html页面时,为了提升网页的用户体验,我们需要在网页中加入一些特效,比如单行区域文字上下滚动就是经常用到的特效.如下图示效果: <html> <head> &l ...
- js标题文字向上滚动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...
- Vue开发组件之替代marquee标签,超出宽度文字横向滚动效果
一.npm 安装 如果你想安装插件(自己写的)安装 install dependencies npm i marquee-components 使用 在main.js引入 import marquee ...
- js 实现文字列表滚动效果
今天要实现抽奖名单在首页滚动展示的效果,就用js写了一个,代码如下: html代码: <style type="text/css"> *{margin:;padding ...
- js实现文字上下滚动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 文字横向滚动marquee
<div style="width:200px; height:300px"> <marquee behavior="scroll" cont ...
- js实现文字字幕滚动
<div class="dggd_r" id="h" style="height:400px;overflow:hidden;display:i ...
- 利用js来实现文字的滚动(也就是我们常常见到的新闻版块中的公示公告)
首先先看一下大致效果图(因为是动态的,在页面无法显示出来) 具体的实现代码如下: 1.首先是css代码: <style type="text/css"> body,ul ...
随机推荐
- 深度解析:Android在Mms设置页面更改短信中心号码流程
相关控件初始化方法:showSmscPref private void showSmscPref() { int count = MSimTelephonyManager.getDef ...
- 汉高澳大利亚sinox2014电影播放flash最好的办法是安装游戏windows文本firefox
事实上,韩澳sinox本身是没有原生flashplayer,无论怎么捣鼓,它们是从adobe弄linux要么windows版本号flashplayer,它不停地拨弄linux版本号flashplaye ...
- android使用ffmpeg
cygwin上文编译文章. 在ffmpeg/arm添加的文件夹Android.mk 的主要目的是为了宣布动态库libs下一个 LOCAL_PATH:= $(call my-dir) include $ ...
- mac 配置Python集成开发环境
mac 配置Python集成开发环境(Eclipse +Python+Pydev) 1.下载Mac版64位的Eclipse. 进入到Eclipse官方网站的下载页面(http://www.eclips ...
- Prototype and Constructor in JavaScript
The concept of prototype in JavaScript is very confusing, especially to those who come with a C++/JA ...
- Javascript 继承 call与prototype
function Parent(hello){ this.hello = hello; this.sayHello = function(){ alert(this.hello); } } Paren ...
- cralwer_爬虫代理中心的简要设计
代理中心: 简单讲: 精细化控制限制资源的使用,保证有限资源的充分利用及有效性.支持动态增减,实时更新. 需求 rest api提供请求输入与输出 客户端使用代理心跳接收,用于更新代理的使用次数,被占 ...
- C#-简单的定时器(C# ConsoleApp) ---ShinePans
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc2hpbmVwYW4=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA ...
- CSS3之重新定义鼠标右键
效果图: html: <div id="rightkey"> <ul> <li><img src="images/xmgl.pn ...
- C#将Excel数据导入数据库(MySQL或Sql Server)
最近一直很忙,很久没写博客了.今天给大家讲解一下如何用C#将Excel数据导入Excel,同时在文章最后附上如何用sqlserver和mysql工具导入数据. 导入过程大致分为两步: 1.将excel ...