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 ...
随机推荐
- IntelliJ IDEA Maven引入
- JAVA IDE IntelliJ IDEA使用简介(三)—之你不能忘记的快捷键
IDEA有许多的快捷键来帮助你更便捷的编写代码,以下列出的快捷键(默认情况下,你还没有定制你的快捷键)是工作中经常需要使用到的,请牢记 快捷键 描述 备注 Alt+F1 视图切换 切换当前工作文件的视 ...
- Java调用WebService之Axis实现
import org.apache.axis.client.Call; import org.apache.axis.client.Service; /** * @ClassName: TestAxi ...
- hdu 1068 Girls and Boys (二分匹配)
Girls and Boys Time Limit: 20000/10000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) ...
- MySQL不支持远程连接的解决办法
如果mysql不支持远程连接,会出现提示:错误代码是1130,ERROR 1130: Host * is not allowed to connect to this MySQL server ,解决 ...
- UVA.455 Periodic Strings(字符串的最小周期)
Periodic Strings 模板 题意分析 判断字符串的最小周期 代码总览 /* Title:UVA.455 Author:pengwill Date:2016-12-16 */ #includ ...
- React ref的用法
React的ref有3种用法: 1. 字符串(已废弃)2. 回调函数3. React.createRef() (React16.3提供) 1. 字符串 最早的ref用法. 1.dom节点上使用,通过t ...
- bzoj1052: [HAOI2007]覆盖问题(二分+构造)
貌似又写出了常数挺优(至少不劣)的代码>v< 930+人AC #49 写了个O(nlogn)貌似比一些人O(n)还快2333333 这题还是先二分答案,check比较麻烦 显然正方形一定以 ...
- cmder 添加到右键菜单
管理员权限打开cmde 输入: cmder /register all 回车,OK
- #define与typedef
#define(宏定义)只是简单的字符串代换(原地扩展),它本身并不在编译过程中进行,而是在这之前(预处理过程)就已经完成了. typedef是为了增加可读性而为标识符另起的新名称(仅仅只是个别名), ...