javascript 单行向上滚动文字
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>间断滚动</title>
<style>
#Marquee{ height:20px; overflow:hidden;}
#Marquee div{ border:1px solid #DDD3FE; background:#EEECF4; height:18px;}
</style>
</head>
<body>
<div id="Marquee">
<div style="width: 260px; height: 18px">
xxxxxxxxxx
</div>
<div style="width: 260px; height: 18px">
yyyyyyyyyy
</div>
</div>
<script>
var Mar = document.getElementById("Marquee");
var child_div=Mar.getElementsByTagName("div")
var picH = 20;//移动高度
var scrollstep=3;//移动步幅,越大越快
var scrolltime=20;//移动频度(毫秒)越大越慢
var stoptime=3000;//间断时间(毫秒)
var tmpH = 0;
Mar.innerHTML += Mar.innerHTML;
function start(){
if(tmpH < picH){
tmpH += scrollstep;
if(tmpH > picH )tmpH = picH ;
Mar.scrollTop = tmpH;
setTimeout(start,scrolltime);
}else{
tmpH = 0;
Mar.appendChild(child_div[0]);
Mar.scrollTop = 0;
setTimeout(start,stoptime);
}
}
onload=function(){setTimeout(start,stoptime)};
</script></body>
</html>
javascript 单行向上滚动文字的更多相关文章
- 文字列表无缝向上滚动JavaScript代码
<!DOCTYPE html> <html> <head> <meta charset=utf-> <title>文字列表无缝向上滚动Jav ...
- jquery插件之文字间歇自动向上滚动
该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的文字间歇向上滚动特效,当鼠标移动到文字上时,向上滚动会停 ...
- jquery插件之文字无缝向上滚动
该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的无缝向上滚动特效,当鼠标移动到文字上时,向上滚动会停止, ...
- jquery 文字向上滚动+CSS伪类before和after的应用
汇总常用技巧——CSS伪类before和after的应用 先上效果图,建议遵循有图有真相的原则,可以上图的地方,还望不要嫌麻烦,毕竟有图的话 可以让读者少花些时间! <!DOCTYPE html ...
- JavaScript判断鼠标滑轮是向下还是向上滚动
我们常用的就是鼠标,鼠标中键一般都用于滑动网页,但是网页中很多很炫的效果,使用鼠标滑轮操作更好. 当然对于手机就没有这个设备了,所以就不用考虑手机端的实现方法,手机端有触摸滑动事件. 使用JavaSc ...
- js文字向上滚动代码
js文字向上滚动代码 <style>.pczt_pingfen_jhxs_news1{ width:397px; background:#edfafd; padding-top:2px; ...
- android - TextView单行显示...或者文字左右滚动(走马灯效果)
条件 TextView单行显示,文字左右滚动(走马灯效果)实现条件: 实现单行设置固定宽度或者设置权重都行 代码 TextView滚动必须写下面几个属性 android:singleLine=&quo ...
- 原生js实现文字无缝向上滚动效果
在网上查找到了一个实现文字无缝向上滚动效果的源码,结果发现运行有问题,于是就稍加改动,实现了js无缝向上滚动的效果. <script> window.onload = roll(50); ...
- vue文字间歇无缝向上滚动
公司的管理系统中有"文字间歇无缝向上滚动"的需求,现在这种需求基本在项目开发中已经消失了,没什么新颖的,但架不住公司高层喜欢这种玩意儿,所以,作为开发人员,即使你有一百个不乐意,谁 ...
随机推荐
- Android核心基础(四)
1.联系人表结构 添加一条联系人信息 package com.itheima.insertcontact; import android.app.Activity; import android.co ...
- Grails教程之--我的理解
最近工作中接触到了Grails,对于这门技术,网上的资料不算太多,有的基本也是大同小异.我打算边学边写一些东西,毕竟是一个学习的过程,写的东西如果有错误或者理解不正确的地方,还希望大家能指出来.帮助我 ...
- 引入less报错解决方法以及浏览器设计不同的地方
XMLHttpRequest cannot load file:///C:/Users/PAXST/Desktop/805/first.less. Cross origin requests are ...
- asp.net Mvc+bootstarp+esayUI+EF 框架(一)
"框架" 这两个字从通俗的意义来讲就是提高复用性,解耦类之间的关系和方便开发人员开发. 使用的技术也是大家基本现在都用过的,而这个系类我所要讲的内容是什么呢? 框架的基本 ...
- Javascript 高阶函数等
高阶函数 函数可以接受另一个函数作为参数 称为 高阶函数. map : arr.map(pow); 数组.map(函数); reduce :arr.reduce(function(){ }); 数组. ...
- jpcap 配置方法,问题解决,模拟sniffer程序。(附JAVA程序,jar,dll包等环境)
博文链接 http://www.cnblogs.com/xckk/p/4609444.html 一. Eclipse环境下安装与配置Jpcap 相关源程序.jpcap jar包,dll包,帮助文档 ...
- ios8 关于UIAlertController 代替UIActionsheet
self.alertController=[UIAlertController alertControllerWithTitle:@"请选择\n\n\n\n\n\n\n\n\n\n\n\n\ ...
- 发送email给列表中的邮箱--python
#!/usr/bin/python # -*- coding: utf-8 -*- # from email.Header import Header from email.MIMEText impo ...
- SQL Server数据库PIVOT函数的使用详解(一)
http://database.51cto.com/art/201108/285250.htm SQL Server数据库中,PIVOT在帮助中这样描述滴:可以使用 PIVOT 和UNPIVOT 关系 ...
- textLayout_1.0.0.595.swz
使用ai制作的矢量素材,导出到flash里面.生成swf时.有的时候会多一个textLayout_1.0.0.595.swz的文件. 这会导致导出的swf无法加载使用.会显示不出来. 解决办法是: 检 ...