1. marquee图片无缝滚动
    先了解一下对象的几个的属性:

    innerHTML: 设置或获取位于对象起始和结束标签内的 HTML
    scrollHeight: 获取对象的滚动高度。
    scrollLeft: 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
    scrollTop: 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
    scrollWidth: 获取对象的滚动宽度
    offsetHeight: 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
    offsetLeft: 获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
    offsetTop: 获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
    offsetWidth: 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度
  2.  
  3. <style type="text/css">
  4. <!--
  5. #demo {
  6. background: #FFF;
  7. overflow:hidden;
  8. border: 1px dashed #CCC;
  9. height: 100px;
  10. text-align: center;
  11. float: left;
  12. }
  13. #demo img {
  14. border: 3px solid #F2F2F2;
  15. display: block;
  16. }
  17. -->
  18. </style>
  19. 向上滚动
  20. <div id="demo">
  21. <div id="demo1">
  22. <a href="#"><img src=" http://www.chaofan.biz/Clear_logo.gif" border="0" /></a>
  23. <a href="#"><img src=" http://www.chaofan.biz/Clear_logo.gif" border="0" /></a>
  24. <a href="#"><img src=" http://www.chaofan.biz/Clear_logo.gif" border="0" /></a>
  25. <a href="#"><img src=" http://www.chaofan.biz/Clear_logo.gif" border="0" /></a>
  26. <a href="#"><img src=" http://www.chaofan.biz/Clear_logo.gif" border="0" /></a>
  27. </div>
  28. <div id="demo2"></div>
  29. </div>
  30.  
  31. <script>
  32. <!--
  33. var speed=10; //数字越大速度越慢
  34. var tab=document.getElementById("demo");
  35. var tab1=document.getElementById("demo1");
  36. var tab2=document.getElementById("demo2");
  37. tab2.innerHTML=tab1.innerHTML; //克隆demo1为demo2
  38. function Marquee(){
  39. if(tab2.offsetTop-tab.scrollTop<=0)//当滚动至demo1与demo2交界时
  40. tab.scrollTop-=tab1.offsetHeight //demo跳到最顶端
  41. else{
  42. tab.scrollTop++
  43. }
  44. }
  45. var MyMar=setInterval(Marquee,speed);
  46. tab.onmouseover=function() {clearInterval(MyMar)};//鼠标移上时清除定时器达到滚动停止的目的
  47. tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};//鼠标移开时重设定时器
  48. -->
  49. </script>

 向右滚动

  1. <MARQUEE behavior="scroll" contenteditable="true" onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;" scrollamount="3" width="100"><SPAN unselectable="on"></SPAN></MARQUEE>
  2. <DIV id="scrollobj" style="white-space:nowrap;overflow:hidden;width:500px;" onmouseover="aa()" onmouseout="b()" >
  3. [CROSSSELLING3]
  4. [CROSSSELLING4]
  5. [CROSSSELLING5]
  6. [CROSSSELLING6]
  7. [CROSSSELLING7]
  8. [CROSSSELLING8]
  9. [CROSSSELLING9]
  10. [CROSSSELLING10]</DIV>
  11. <script language="javascript" type="text/javascript">
  12. <!--
  13. function scroll(obj) {
  14. var tmp = (obj.scrollLeft)++;
  15. //当滚动条到达右边顶端时
  16. if (obj.scrollLeft==tmp) obj.innerHTML += obj.innerHTML;
  17. //当滚动条滚动了初始内容的宽度时滚动条回到最左端
  18. if (obj.scrollLeft>=obj.firstChild.offsetWidth) obj.scrollLeft=0;
  19. }
  20. var a = setInterval("scroll(document.getElementById('scrollobj'))",20);
  21. function aa(){
  22. clearInterval(a);
  23. }
  24. function b(){
  25. a=setInterval("scroll(document.getElementById('scrollobj'))",10);
  26. }
  27. //-->
  28. </script>

JS 在 HTML 无缝滚动的更多相关文章

  1. js动画之无缝滚动

    效果图如下: HTML代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  2. js文字的无缝滚动(上下)

    使用scrolltop值的递增配合setInterval与setTimeout实现相关效果,左右无缝滚动使用scrollLeft即可 Dom内容 <div id="container& ...

  3. js实现标准无缝滚动

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. js原生实现 无缝滚动图片

    <!-- 无缝滚动图片开始 --> <div id=demopic style="OVERFLOW: hidden; WIDTH: 100%; COLOR: #fff; H ...

  5. 图片滚动js 实现图片无缝滚动

    在改章节中,我们主要介绍图片滚动的内容,自我感觉有个不错的建议和大家分享下 非常平滑的JS图片滚动特效代码,无缝循环,速度可自定义,鼠标悬停时停止.它的特点是JS和图片地址分离,这样做你就经易的从数据 ...

  6. js实现表格无缝滚动效果

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  7. JS实现图片无缝滚动特效;附addEventListener()方法、offsetLeft和offsetWidth属性。

    一:html部分 <body> <input id="btn1" type="button" value="向左"> ...

  8. 用JS写的无缝滚动特效

    代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta ...

  9. js 图片实现无缝滚动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. 转载【浅谈ThreadPool 线程池】

    浅谈ThreadPool 线程池 http://www.cnblogs.com/xugang/archive/2010/04/20/1716042.html

  2. 消息函数一般是私有的,因为不需要程序员显示的调用,但子类如果需要改写这个方法,则改成保护方法Protected

    许多的面向对象程序设计语言都支持对消息的处理.消息处理是一种动态响应客户类发出的请求,它与过程调用不同.过程调用中,客户类必须知道服务类提供了哪些过程,以及每个过程的调用约定,并且在调用时需要明确指出 ...

  3. 按 Eclipse 开发喜好重新布置 cocos2dx 目录层次

    [tonyfield 2013.08.29 ] 1.  Cocos2dx 库的改动 处于个人的固执,花一天时间重新布置了cocos2dx 2.1.4的目录层次,将android平台无关的代码全数裁剪, ...

  4. jsonp和事件发布监听

    模拟jsonp var id = 0; function JSONP(url,param,cb){ var callbackName = "json_" + id++; var a ...

  5. 对TMemoryStream的一些改进(用到了LockFile)

    对TMemoryStream的一些改进 怎么又是关于Stream的,呵呵,应该说只是最近比较关心程序的效率问题,而我对Stream其实并没有什么特别的研究,只是自己发现了一些新的用法,希望能对大家有用 ...

  6. 程序缩小到托盘后系统就无法关机(解决方案)——处理WM_QUERYENDSESSION消息,并把它标识为处理过了

    程序缩小到托盘后系统就无法关机(解决方案)                       老帅    程序最小化到托盘后,会出现系统无法关闭的问题,常见于WinXP系统中,这里提供一个解决方案!一.解决 ...

  7. [Android学习笔记]Android Library Project的使用

    RT http://developer.android.com/tools/projects/index.html

  8. TestComplete实测Flex

    1.TestComplete提供了已经编译好的Flex界面,可以直接使用: http://support.smartbear.com/samples/testcomplete9/flex/orders ...

  9. XML实例文档

    from: http://www.w3school.com.cn/xpath/xpath_examples.asp XML实例文档 我们将在下面的例子中使用这个 XML 文档: "books ...

  10. vc 基于对话框多线程编程实例——线程之间的通信

     vc基于对话框多线程编程实例——线程之间的通信 实例: