实现网页内容水平或垂直滚动的Javascript代码

 更新时间:2012年10月01日 19:30:38   作者:  
用Javascript实现新闻内容的水平或垂直滚动,主要的优点是我们可以实现自定义滚动风格或特效,应用效果比起传统的marquee更加具有特色,方法也比较简单
主要两个部分,一、是滚动内容部分;二、JS的滚动代码部分,也只有两句话。

一、传统的滚动代码


[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]

传统的滚动代码应用效果比较单一,而且经常还存在浏览器的兼容性问题,比如在FIREFOX上效果就会出现marquee的特效无效的问题。

二、Javascript实现的滚动效果


[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]

以上就是完整的JS滚动代码,如果想实现垂直滚动,则只需要简单的修改即可,即使用style的pixTop属性即可实现。

摘自 天缘博客

相关文章

  • js实现电子时钟效果

    js实现电子时钟效果

    这篇文章主要为大家详细介绍了js实现电子时钟效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-06-06
  • uniapp实现横向滚动选择日期

    uniapp实现横向滚动选择日期

    这篇文章主要为大家详细介绍了uniapp实现横向滚动选择日期,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-10-10
  • 微信小程序实现折叠展开效果

    微信小程序实现折叠展开效果

    这篇文章主要为大家详细介绍了微信小程序实现折叠展开效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-07-07
  • js实现的点击数量加一可操作数据库

    js实现的点击数量加一可操作数据库

    这篇文章主要介绍了js如何实现的点击数量加一操作数据库,需要的朋友可以参考下
    2014-05-05
  • JavaScript 实现 Tab 点击切换实例代码

    JavaScript 实现 Tab 点击切换实例代码

    Tab 选项卡切换效果在现如今的网页中,运用的也是比较多的,包括点击切换、滑动切换、延迟切换、自动切换等多种效果,在这篇博文里,我们是通过原生 JavaScript 来实现 Tab 点击切换的效果。
    2017-03-03
  • JS实现换肤功能的方法实例详解

    JS实现换肤功能的方法实例详解

    这篇文章主要介绍了JS实现换肤功能的方法,结合实例形式分析了javascript针对页面元素属性与样式动态操作相关实现技巧,需要的朋友可以参考下
    2019-01-01
  • 详解在微信小程序的JS脚本中使用Promise来优化函数处理

    详解在微信小程序的JS脚本中使用Promise来优化函数处理

    这篇文章主要介绍了详解在微信小程序的JS脚本中使用Promise来优化函数处理,引入Promise确实能够很好的解决异步回调函数的可读性等问题,同时也使得我们调用的时候代码简洁一些,本文介绍如何在小程序的JS代码里面使用Promise来封装一些函数的做法
    2019-03-03
  • javascript实现控制浏览器全屏

    javascript实现控制浏览器全屏

    这篇文章主要介绍了javascript实现控制浏览器全屏的代码分享给大家,十分的实用,有需要的小伙伴可以参考下。
    2015-03-03
  • JS关闭窗口时产生的事件及用法示例

    JS关闭窗口时产生的事件及用法示例

    这篇文章主要介绍了JS关闭窗口时产生的事件及用法,结合关闭窗口时提交评论的实例分析了javascript事件触发机制及遮罩层实现技巧,需要的朋友可以参考下
    2016-08-08
  • BootStrap下的弹出框加载select2框架失败的解决方法

    BootStrap下的弹出框加载select2框架失败的解决方法

    本文通过简单的代码给大家介绍了BootStrap下的弹出框加载select2框架失败的解决方法,需要的朋友参考下吧
    2017-08-08

最新评论