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 ...
随机推荐
- Python 相机镜头
一哥第一卷感叹,这家奥地利~.这是什么g8事件,近盲目安装3g的OpenCV,结果徒劳. . . 入题.!环境Python2.7 严厉格按照什么步骤.必成功: 所需的软件如下面: VideoCaptu ...
- Linux的NTP配置总结(转)
在Linux系统中,为了避免主机时间因为在长时间运行下所导致的时间偏差,进行时间同步(synchronize)的工作是非常必要的.Linux系统下,一般使用ntp服务来同步不同机器的时间.NTP 是网 ...
- (插播)unity的 异常捕捉和 ios Android 崩溃信息的捕捉。
近期 做些准备性得工作和有意思的事情.所以近期做了一个适合ios和android 错误信息捕捉的unity插件. 两个功能,app崩溃也就是闪退 是开发人员 非常头疼的一件事,还有就是一些莫名得错误 ...
- Cocos2d-x在线粒子编辑器
自由.其效果是非常赞,可以手动调节和.出口可以上网plist档!. 住址:http://particle2dx.com/
- 跨境移动互联网的魅力演绎,hao123无论成就下一个条目?
使用"热"为了描述的情况在目前的移动互联网不夸张,背景下,越来越多的企业试图染指这一新兴领域.只是,巴菲特有句名言------"仅仅有退潮了,才知道谁在裸泳&qu ...
- POJ 2996 & 2993 国际象棋布局 模拟
Description Your task is to read a picture of a chessboard position and print it in the chess notati ...
- hdu1588---Gauss Fibonacci(矩阵,线性复发)
根据题意:最后一步是寻求f(b) + f(k + b) + f(2 * k + b) + -+ f((n-1) * k + b) 清除f(b) = A^b 间A = 1 1 1 0 所以sum(n - ...
- Yeoman generators 创建 ASP.NET 应用程序
Yeoman generators 创建 ASP.NET 应用程序 上一篇:<Windows 搭建 .NET 跨平台环境并运行应用程序> 阅读目录: Install Node.js Ins ...
- 教你Ant安装和配置
Ant它是基于Java施工工具,它的主要作用是产生能够运行Java计划,把握Ant一些功能可以使项目更专业. 忙乱,可以在这里下载2014年8最近一个月Ant http://download.csdn ...
- HDU 4303 Hourai Jeweled 树dp 所有权利和航点 dfs2次要
意甲冠军: long long ans = 0; for(int i = 1; i <= n; i++) for(int j = i+1; j <= n; j++) ans += F(i, ...