向左滚动文字 js代码效果
更新时间：2013年08月17日 12:40:30 作者：
本文章来给大家介绍一个javascript中向左滚动文字效果。有需要使用的朋友可参考，这里面我们需要注意下面的css必须强制white-space:nowrap;overflow:hidden;不换行才行哦
复制代码 代码如下:
<html>
<head>
<title>滚动文字效果</title>
<style type="text/css">
#infozone{font-size:12px;color:#aa6;overflow:hidden;width:100px;height:20px;}
#infozone div{height:20px;line-height:20px;white-space:nowrap;overflow:hidden;}
</style>
<script type="text/javascript">
var tc;
window.onload=function(){
var o=document.getElementById('infozone');hscroll(o);
window.setInterval(function(){window.clearTimeout(tc);o.firstChild.style.marginLeft='0px';scrollup(o,20,0);},10000);
}
function scrollup(o,d,c){
if(d==c){
var t=o.firstChild.cloneNode(true);
o.removeChild(o.firstChild);o.appendChild(t);
t.style.marginTop=o.firstChild.style.marginTop='0px';
hscroll(o);
}
else{
ch=false;var s=3,c=c+s,l=(c>=d?c-d:0);
o.firstChild.style.marginTop=-c+l+'px';
window.setTimeout(function(){scrollup(o,d,c-l)},50);
}
}
function hscroll(o){
var w1=o.firstChild.offsetWidth,w2=o.offsetWidth;
if(w1<=w2)return;
tc=window.setTimeout(function(){hs(o,w1-w2,0,w1-w2)},3500);
}
function hs(o,d,c,p){
c++;var t=(c>0?-c:c);o.firstChild.style.marginLeft=t+'px';
if(c==d){if(d==0){tc=window.setTimeout(function(){hs(o,p,0,p)},2500);}else tc=window.setTimeout(function(){hs(o,0,-p,p)},3500);}
else tc=window.setTimeout(function(){hs(o,d,c,p)},5);
}
</script>
</head>
<body>
<div id="infozone"><div>C# 鼠标属性动态操作相关源码示例，比如、隐藏与显示鼠标指针、将鼠标左右键功能互换、更换鼠标指针形状、调用Windows鼠标设置面板等，小技巧，多多益善。</div></div>
</body>
</html></td>
</tr>
</table>
相关文章
这篇文章主要介绍了JavaScript this使用方法图解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-02-02
javascript实现input file上传图片预览效果
这篇文章主要介绍了javascript实现input file上传图片预览效果，感兴趣的小伙伴们可以参考一下2015-12-12
这篇文章主要介绍了JavaScript实现点击出现图片并统计点击次数功能,涉及javascript事件响应及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下2018-07-07
JavaScript 中的reduce()方法可以用于将数组元素汇总为单个值，，所以本文为大家整理了一些JavaScript数组中reduce方法的应用，需要的可以参考一下2023-07-07
这篇文章主要介绍了Javascript中获取对象的原型对象的方法小结,需要的朋友可以参考下2015-02-02
这篇文章主要介绍了JavaScript避免嵌套代码，很多时候需要编写的逻辑本身就很恶心, 乍看之下, 堆页岩般的判定嵌套里似乎每一层都是必要的, 也只能说尽量让它看起来不那么恶心2023-02-02
网站打开的速度快是相当重要的baidu.com不管你是用的什么网络，都打开的很快2008-11-11
这篇文章主要为大家详细介绍了JavaScript实现点击切换功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-01-01
在Web开发领域,响应式设计已经成为一个不可或缺的趋势,PostCSS插件——postcss-pxtorem的出现为我们提供了一种更加智能和高效的解决方案,本文将深入探讨postcss-pxtorem的使用,包括其背后的原理、配置选项、实际应用中的注意事项等方面,需要的朋友可以参考下2023-12-12
这篇文章主要介绍了利用Html+CSS+JavaScript实现的放烟花效果，文中一共实现了两种方式：手动和自动，文中的示例代码讲解详细，感兴趣的可以试一试2022-01-01
最新评论