zoukankan      html  css  js  c++  java
  • 无间断滚动兼容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):

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

  • 相关阅读:
    JS计算两个日期时间之差之天数不正确
    nodejs 第一天
    SQLSERVER存储过程基本语法
    复制表结构和数据SQL语句
    SVN使用教程总结
    jquery hover事件只触发一次动画
    导出格式
    C# 反射给对象赋值遇到的问题——类型转换
    a标签下载
    检测到在集成的托管管道模式下不适用的 ASP.NET 设置。
  • 原文地址:https://www.cnblogs.com/joe235/p/1323507.html
Copyright © 2011-2022 走看看