js_跑马灯
跑马灯?刚听到这个词的时候,脑袋第一个想到的是跑马?嗯?就是香港的那种跑马场。懂?其次就是霓虹灯了,一闪一闪的多好看。
霓虹灯?哦,那是城市的杰作,记忆中是。开往城市边缘开,把车窗都摇下来,用速度换一点痛快。。。
别问我为什么想到这个歌词,就是想到了。
技术段:
CSS
<style type="text/css">
/*1.跑马灯CSS*/
.marquee {
position: relative;
font-size: 1.2rem;
line-height: 1.44rem;
height: 1.4rem;
overflow: hidden;
color: #666;
}
.marquee li {
overflow: hidden;
margin-left: 26.5%;
}
</style>
HTML
<!-- 2.跑马灯HTML -->
<div class="marquee vip_zmd_area">
<ul id="marqueebox">
<li class="tp"><span class="colorfff">恭喜中国平安张*升级为</span>超级会员</li>
<li class="tp"><span class="colorfff">恭喜中国平安张*升级为</span>超级会员</li>
<li class="tp"><span class="colorfff">恭喜中国平安张*升级为</span>超级会员</li>
<li class="tp"><span class="colorfff">恭喜中国平安张*升级为</span>超级会员</li>
<li class="tp"><span class="colorfff">恭喜中国平安张*升级为</span>超级会员</li>
<li class="tp"><span class="colorfff">恭喜中国平安张*升级为</span>超级会员</li>
</ul>
</div>
<!---->
JS
<script type="text/javascript">
//3.跑马灯JS
startmarquee(20, 2000); //速度,间隔
function startmarquee(speed, delay) {
var p = false;
var t;
var sh;
var o = document.getElementById("marqueebox");
var lh = document.querySelector('.marquee').clientHeight;
o.innerHTML += o.innerHTML; o.style.marginTop = 0;
o.onmouseover = function() {
p = true;
}
o.onmouseout = function() {
p = false;
} function start() {
sh = o.offsetHeight;
o.style.height = sh + 'px';
t = setInterval(scrolling, speed);
if(!p) o.style.marginTop = parseInt(o.style.marginTop) - 1 + "px";
} function scrolling() {
if(parseInt(o.style.marginTop) % lh != 0) {
o.style.marginTop = parseInt(o.style.marginTop) - 1 + "px";
if(Math.abs(parseInt(o.style.marginTop)) >= sh / 2) o.style.marginTop = 0;
} else {
clearInterval(t);
setTimeout(start, delay);
}
}
setTimeout(start, delay);
// start();
}
</script>
伸手党往下看:
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*1.跑马灯CSS*/
.marquee {
position: relative;
font-size: 1.2rem;
line-height: 1.44rem;
height: 1.4rem;
overflow: hidden;
color: #666;
}
.marquee li {
overflow: hidden;
margin-left: 26.5%;
}
</style>
</head> <body>
<!-- 2.跑马灯HTML -->
<div class="marquee vip_zmd_area">
<ul id="marqueebox">
<li class="tp"><span class="colorfff">恭喜中国平安张*升级为</span>超级会员</li>
<li class="tp"><span class="colorfff">恭喜中国平安张*升级为</span>超级会员</li>
<li class="tp"><span class="colorfff">恭喜中国平安张*升级为</span>超级会员</li>
<li class="tp"><span class="colorfff">恭喜中国平安张*升级为</span>超级会员</li>
<li class="tp"><span class="colorfff">恭喜中国平安张*升级为</span>超级会员</li>
<li class="tp"><span class="colorfff">恭喜中国平安张*升级为</span>超级会员</li>
</ul>
</div>
<!---->
</body>
<script type="text/javascript">
//3.跑马灯JS
startmarquee(20, 2000); //速度,间隔
function startmarquee(speed, delay) {
var p = false;
var t;
var sh;
var o = document.getElementById("marqueebox");
var lh = document.querySelector('.marquee').clientHeight;
o.innerHTML += o.innerHTML; o.style.marginTop = 0;
o.onmouseover = function() {
p = true;
}
o.onmouseout = function() {
p = false;
} function start() {
sh = o.offsetHeight;
o.style.height = sh + 'px';
t = setInterval(scrolling, speed);
if(!p) o.style.marginTop = parseInt(o.style.marginTop) - 1 + "px";
} function scrolling() {
if(parseInt(o.style.marginTop) % lh != 0) {
o.style.marginTop = parseInt(o.style.marginTop) - 1 + "px";
if(Math.abs(parseInt(o.style.marginTop)) >= sh / 2) o.style.marginTop = 0;
} else {
clearInterval(t);
setTimeout(start, delay);
}
}
setTimeout(start, delay);
// start();
}
</script> </html>
这是一个上下滚动的跑马灯,需要左右滚动的同学,自己研究下。
前端这条路,我似乎越陷越深了,那就让我陷下去吧。
好想来一趟旅行,往西藏,往尼泊尔,往印度,往土耳其,往欧洲,往美国,往巴西,往澳大利亚,往新加坡。
js_跑马灯的更多相关文章
- jq跑马灯效果
这几天公司产品有个无缝循环滚动的广告跑马灯要做,最开始想到的是<marquee>标签,但在PC端正常,在安卓广告屏上却怎么都跑不动,后来用的css3的animation,结果也是PC端及其 ...
- Android-TextView跑马灯效果
要实现跑马灯还是比较简单的. 同时有几个需要注意的点,先上代码: public class MTView extends TextView { public MTView(Context contex ...
- jQuery+CSS3文字跑马灯特效
jQuery+CSS3文字跑马灯特效是一款将跑马灯背景制作为3D立方体效果,文字在上面移动时,就像是文字投影到墙壁上,在转角出会改变运动方向. 效果展示 http://hovertree.com/te ...
- IOS跑马灯效果,实现文字水平无间断滚动
ViewController.h #import <UIKit/UIKit.h> @interface ViewController : UIViewController{ NSTimer ...
- 【IOS】自定义可点击的多文本跑马灯YFRollingLabel
需求 项目中需要用到跑马灯来仅展示一条消息,长度合适则不滚动,过长则循环滚动. 虽然不是我写的,但看了看代码,是在一个UIView里面放入两个UILabel, 在前一个快结束的时候,另一个显示.然而点 ...
- Android:TextView文字跑马灯的效果实现
解决TextView文字显示不全的问题. 简单设置跑马灯的效果: <TextView android:id="@+id/textView" android:layout_wi ...
- canvas九宫格跑马灯
canvas九宫格跑马灯抽奖 之前用dom写了一版,部分 安卓机会卡顿,换用canvas dom版本九宫格抽奖
- Third Day:正式编程第三天,学习实践内容TextView跑马灯、AutoCompleteTextView、multiAutoCompleteTextView以及ToggleButton、checkedBox、RadioButton等相关实践
2.针对Focused的TextView跑马灯(文字较多一行无法显示)效果 针对单个TextView的跑马灯效果,可直接在TextView控件参数中添加三个属性: android:singleLine ...
- TextView跑马灯效果
转载:http://www.2cto.com/kf/201409/330658.html 一.只想让TextView显示一行,但是文字超过TextView的长度怎么办?在开头显示省略号 android ...
随机推荐
- 安装django 提示ImportError: No module named setuptools
安装django前要先安装setuptools 先安装一些必要的包,否则会报错:Python build finished, but the necessary bits to build these ...
- java 基础--继承--007
1,子类只能继承父类所有非私有成员 2,子类不能继承父类的构造方法,但可以通过super去访问父类构造方法 3,子类成员变量和父类成员变量名称不一样,如果一样类似于重写,按子类处理,如果一样,就近原则 ...
- centos7 nginx端口转发出现502的其中一种原因
在排查了一系列可能的原因后仍无法解决,经资料查阅可能是SELinux造成,SELinux很强大但若配置不当也会造成很多组件无法正常使用,这里直接将其关闭: //打开配置文件 vi /etc/selin ...
- Android出现:Your project path contains non-ASCII characters.
导入Project的出现: Error:(1, 0) Your project path contains non-ASCII characters. This will most likely ca ...
- concurrenthashmap jdk1.8
参考:https://www.jianshu.com/p/c0642afe03e0 CAS的思想很简单:三个参数,一个当前内存值V.旧的预期值A.即将更新的值B,当且仅当预期值A和内存值V相同时,将内 ...
- [C/C++] 字符串错题集
1. 答案:A 这里考查转义字符,注意 \\ 表示字符 \\123表示字符 {\t 表示制表符这些都是一个字符. 2. 答案C 先不看有没有重复的,共5个字母,有5×4×3×2×1 = 120种组合. ...
- JDK各个版本比较 JDK5~JDK9
JDK5 自动装箱与拆箱: 枚举 静态导入,如:import staticjava.lang.System.out 可变参数(Varargs) 内省(Introspector),主要用于操作JavaB ...
- SQL Server的全局变量
SQL Service中的全部变量不需要用户参与定义,在任何程序均可随时调用.并且全部变量是以@@开头 全局变量名称 描述 @@CONNECTIONS 返回 SQL Server 自上次启动以来尝试的 ...
- Android 职业路上--只要还有一丝希望,不到最后一刻,不要轻言放弃--从屌丝到进入名企
写在前面:只要还有一丝希望,不到最后一刻,不要轻言放弃! 来到西安十来天了,现在基本安顿下来了,这几天在工作中也遇到一些技术问题,但都没来得及总结分享,现在想和大家分享一下我的工作求职经历! 接触an ...
- BZOJ5288 & 洛谷4436 & LOJ2508:[HNOI/AHOI2018]游戏——题解
https://www.lydsy.com/JudgeOnline/problem.php?id=5288 https://www.luogu.org/problemnew/show/P4436 ht ...