• 无间断滚动兼容IEFF


    想必大家都知道<marquee>的不循环滚动会出现空白,所以出现了很多替代脚本,或iframe或JS输出<marquee>,不管怎么做,都略显麻烦。下面说一下这个相对简单的实现思路:一个设定宽度并且隐藏超出它宽度的内容的容器demo,里面放demo1和demo2,demo1是滚动内容,demo2为demo1的直接克隆,通过不断改变demo1的scrollTop或者scrollLeft达到滚动的目的,当滚动至demo1与demo2的交界处时直接跳回初始位置,因为demo1与demo2一样,所以分不出跳动的瞬间,从而达到“无缝”滚动的目的。

    先了解一下对象的几个的属性:

    innerHTML:设置或获取位于对象起始和结束标签内的 HTML

    scrollHeight: 获取对象的滚动高度。

    scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离

    scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离

    scrollWidth:获取对象的滚动宽度

    offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度

    offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置

    offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置

    offsetWidth:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度

    无间断滚动效果(兼容IE\FF):

    提示:可以先在文本框内,根据需要修改代码后再运行

  • 相关阅读:
    学习进度表
    201671010144 2016-2017《java程序设计》图形程序设计
    201671010144 2016-2017《java程序设计》我所理解的继承!
    201671010144 2016-2017《java程序设计》 反思。
    201671010144 2016-2017《java程序设计》 前四章总结!
    201671010144 2016-2017 《java程序设计》--对象与类!
    201671010144 2016-2017-2-------《java程序设计》 学习java!
    201671010144 2016-2017-2 《java程序设计》--学习中遇到的问题!
    201671010144 2016-2017-2 《java程序设计》--认识java!
    软件工程实践2017第一次作业-准备
  • 原文地址:https://www.cnblogs.com/joe235/p/1323507.html
Copyright © 2020-2023  润新知