js实现的类marquee水平循环滚动

 更新时间:2010年03月18日 19:17:23   作者:   我要评论
marquee (水平)循环滚动的js实现 ,需要的朋友可以参考下。
复制代码 代码如下:

<script>
var speed=20;/*速度数值越大速度越慢*/
document.getElementById('www_qpsh_com2').innerHTML=document.getElementById('www_qpsh_com1').innerHTML;

/*两个层来回交替出现*/
function Marquee(){
if(document.getElementById('www_qpsh_com2').offsetWidth-document.getElementById('www_qpsh_com').scrollLeft<=0)
document.getElementById('www_qpsh_com').scrollLeft-=document.getElementById('www_qpsh_com1').offsetWidth;
else{
document.getElementById('www_qpsh_com').scrollLeft++;
}
document.getElementById('my_marquee_info').innerHTML='';
document.getElementById('my_marquee_info').innerHTML+='div.scrollTop:'+document.getElementById('www_qpsh_com').scrollLeft;
}
var MyMar=setInterval(Marquee,speed);
www_qpsh_com.onmouseover=function() {clearInterval(MyMar);}
www_qpsh_com.onmouseout=function() {MyMar=setInterval(Marquee,speed);}
</script>

演示代码:

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

相关文章

  • js 回车提交表单两种实现方法

    js 回车提交表单两种实现方法

    js 回车提交一些新手朋友还是比较陌生的,本文介绍两种实现方法:jQuery方法、JavaScript方法,感兴趣的朋友可以研究下
    2012-12-12
  • xmlHTTP实例

    xmlHTTP实例

    xmlHTTP实例...
    2006-10-10
  • 使用js实现的简单拖拽效果

    使用js实现的简单拖拽效果

    本文给大家分享的是使用纯JS实现的简单的拖拽效果的插件,算是对自己javascript学习的一个小的检验,如果小伙伴们需要复杂的拖拽效果,还是考虑jQuery的draggable吧,更成熟一些。
    2015-03-03
  • js HTML5 canvas绘制图片的方法

    js HTML5 canvas绘制图片的方法

    这篇文章主要为大家详细介绍了js HTML5 canvas绘制图片的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-09-09
  • javascript结合fileReader 实现上传图片

    javascript结合fileReader 实现上传图片

    FileReader具体支持哪些方法和事件,这里就不介绍了,有兴趣的可以去w3c官网上看看FileReader介绍,这里主要介绍一下FileReader常见应用,以及fileReader 实现上传图片示例分享。
    2015-01-01
  • JavaScript 下载svg图片为png格式

    JavaScript 下载svg图片为png格式

    这篇文章主要介绍了JavaScript 下载svg图片为png格式,本文通过代码给大家讲解的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-06-06
  • asp.net下利用js实现返回上一页的实现方法小集

    asp.net下利用js实现返回上一页的实现方法小集

    其实要实现这个功能主要还是要用到javascript
    2009-11-11
  • js统计页面的来访次数实现代码

    js统计页面的来访次数实现代码

    这篇文章主要介绍了如何使用js统计页面的来访次数,需要的朋友可以参考下
    2014-05-05
  • 循环 vs 递归浅谈

    循环 vs 递归浅谈

    本文代码使用 JavaScript。 一些同学对递归的理解还停留在“是一种求阶乘比循环低效的方法”。但其实递归和循环处理的问题是不同。拿“遍历数组”这个问题来说:循环适合同一维度(单层长度不限)上的遍历,而递归则适合跨维度(层数不限)的遍历。
    2013-02-02
  • javascript跳转与返回和刷新页面的实例代码

    javascript跳转与返回和刷新页面的实例代码

    这篇文章主要介绍了javascript跳转与返回和刷新页面的实例代码,简单介绍了javascript中window.open()与window.location.href的区别,感兴趣的朋友一起看看吧
    2019-11-11

最新评论