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

主要两个部分，一、是滚动内容部分；二、JS的滚动代码部分，也只有两句话。

一、传统的滚动代码

用Javascript实现新闻内容的水平滚动！

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

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

二、Javascript实现的滚动效果

用Javascript实现新闻内容的水平滚动1

//div标签中的宽度width等参数可以自行调节

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

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

摘自 天缘博客

时间： 2024-03-03 20:25:50

实现网页内容水平或垂直滚动的Javascript代码_javascript技巧的相关文章

JavaScript实现带缓冲效果的随屏滚动漂浮广告代码_javascript技巧

本文实例讲述了JavaScript实现带缓冲效果的随屏滚动漂浮广告代码.分享给大家供大家参考,具体如下: 这里演示了始终随屏滚动的JavaScript代码,在国内的应用泛滥成灾了,特别是一些喜欢漂浮广告的站长,常把本代码用作了漂浮广告,其实这种效果的初衷是编写一个随屏滚动的菜单,让游客随时随地可以控制网站的导向. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-hc-style-scroll-adv-codes/ 具体代码如下: <html

实现变速回到顶部的JavaScript代码_javascript技巧

随着近几年来 JavaScript 的应用日渐广泛, 滑动效果无处不在, 于是我也跟跟风, 将置顶功能做成了滑动效果. 后来为了更贴合物理特征, 改造做成了减速的滑动效果. 首先说一下原理吧. 我们会获取滚动条到页面顶部的距离, 然后上移一定的距离; 再获取滚动条到页面顶部的距离, 上移一定的距离 (比上一次小一点); ... JavaScript 代码: 复制代码 代码如下: /** * 回到页面顶部 * @param acceleration 加速度 * @param time 时间间隔 (

关于网页中的无缝滚动的js代码_javascript技巧

随便打开一个网页,基本上都会看到无缝滚动或者轮播图,比如淘宝还有360官网的首页 观察这些轮播图可以发现图片可以来回循环地切换,那么是怎样做到的呢? 做到轮播图或者说无缝滚动主要有两种方式,一种是通过对图片的明暗即透明图的改变来显示或隐藏图片,另一种是通过运动框架,将图片显示在可视区域.这两种方式都会用到同一个东西,那就是定时器. JavaScript中的定时器有两种,1.setInterval();2.setTimeout();相对应的关闭定时器也有两种方法,clearInterval()和c

div+css布局的图片连续滚动js实现代码_javascript技巧

html布局代码 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-

自动最大化窗口的Javascript代码_javascript技巧

自动最大化窗口的Javascript代码 大家看看这个最大化窗口的效果如何?在 <body> 与 </body> 之间加入: 复制代码 代码如下: <SCRIPT language="javascript"> setTimeout('top.moveTo(0,0)',5000); setTimeout('top.resizeTo(screen.availWidth,screen.availHeight)',5000); </script>

使用CoffeeScrip优美方式编写javascript代码_javascript技巧

JavaScript无疑是在web最伟大的发明之一,几乎一切网页动态效果都是基于它丰富的计算能力.而且它的能力在各种新的JavaScript的Engine下也越来越强了,比如Google Chrome用的V8 Engine. 但是由于诞生的太早,有很多语法定义在今天看来有些效率低下了,一些更加先进的语法形式,由于历史原因,没办法加入到现在的JavaScript语言中,可以说一种遗憾. 世界上的很多天才都在为构建更好的JavaScript而努力.已经有了很多尝试,其中最有前途的,无非就是Coffe

动态创建按钮的JavaScript代码_javascript技巧

废话不多说了,直接给大家贴js代码了,具体代码如下所示: <!doctype html> <html> <head> <meta charset="UTF-8" /> <title>Document</title> <script type="text/javascript"> var i = 0; function addInput(){ var o = document.crea

如何利用Promises编写更优雅的JavaScript代码_javascript技巧

你可能已经无意中听说过 Promises,很多人都在讨论它,使用它,但你不知道为什么它们如此特别.难道你不能使用回调么?有什么了特别的?在本文中,我们一起来看看 Promises 是什么以及如何使用它们写出更优雅的 JavaScript 代码. Promises 易于阅读 比如说我们想从 HipsterJesus 的API中抓取一些数据并将这些数据添加到我们的页面中.这些 API 的响应数据形式如下: { "text": "<p>Lorem ipsum...<

利用JavaScript实现新闻滚动效果(实例代码)_javascript技巧

最近要实现一个滚动新闻效果,在网上查了一些资料,发现基本的实现方法有两种: 1.使用Marquee标签.这个标签的使用我已经转载了一篇比较详细的文章,这个标签的优点是便于使用,缺点是人们已经逐渐不适用它了,许多浏览器不支持,甚至在IE8想,XHTML4.0的loose.dtd是可以的,而去掉loose.dtd却不行. 2.使用div+javascript的方法.这种方法的好处是可以兼容几乎所有的浏览器,并且在可以预料的时间内仍能稳定运行.并且使用div使得网页可以利用现有的css资源实现很多炫目