方便以后copy

页面代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

<link href="css/css.css" rel="stylesheet" type="text/css"/>

<script type="text/javascript" src="js/js.js"></script>

</head>

<body>

    <div id="main">

        <br/><br/><br/>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试<br/><br/><br/>

        <br/><br/><br/>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试<br/><br/><br/>

        <br/><br/><br/>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试<br/><br/><br/>

        <br/><br/><br/>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试<br/><br/><br/>

        <br/><br/><br/>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试<br/><br/><br/>

        <br/><br/><br/>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试<br/><br/><br/>

        <br/><br/><br/>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试<br/><br/><br/>    </div>

    <div id="ads">

        广告广告广告广告广告广告广告广告广告广告<br/>

        广告广告广告广告广告广告广告广告广告广<br/>

        广告广告广告广告广告广告广告广告广告广告广告广告

    </div>

</body>

</html>

js代码

var adsTop = 150;

function testPosition(){

    var divAds = document.getElementById("ads");

    var sTop1 = document.body.scrollTop;

    var sTop2 = document.documentElement.scrollTop;

    var sTop = (sTop1>sTop2)?sTop1:sTop2;

    var aTop = adsTop+sTop;

    divAds.style.top=aTop+"px";

}

window.onscroll=testPosition;

简单的javascript实例二(随页面滚动广告效果)的更多相关文章

  1. ScrollMagic – 酷毙了！超炫的页面滚动交互效果

    ScrollMagic 是一款 jQuery 插件,它让你可以像使用进度条一样使用滚动条.如果你想在特定的滚动位置开始一个动画,并且让动画同步滚动条的动作,或者把元素粘在一个特定的滚动位置,那么这款插 ...

  2. 一个简单的JavaScript实例

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

  3. Javascript实例技巧精选(6)—滚动鼠标中键读取Json数据分页显示网页内容

    >>点击这里下载完整html源码<< 截图如下: 滚动鼠标中键读取Json数据分页显示网页内容,关键的Javascript如下: <script type="t ...

  4. 简单的javascript实例一(时钟特效)

    方便以后copy 时钟特效 <html> <head> <meta http-equiv="Content-Type" content="t ...

  5. jQuery插件实例三：图片滚动[切换]效果一

    图片切换效果在很多网站上都能看到,是一种常见的广告/活动宣传方式,通常位于网页上端.这个插件是众多图片切换效果的形式中的一种,数据源可在前端配置,也可从后台通JSON格式传输数据,当然,数据格式是固定 ...

  6. js原生 + jQuery实现页面滚动字幕

    js原生/jQuery实现页面滚动字幕效果 17:45:49 在新闻列表或者文章列表信息等页面中很容易要求实现字幕滚动的效果,以下为简单的实现页面中滚动字幕的效果 1.jQuery实现页面滚动字幕效果 ...

  7. 一天JavaScript示例-判定web页面的区域

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  8. 二、JavaScript语言--JS实践--信息滚动效果制作

    运用JavaScript技术,掌握无缝滚动和歇间性滚动的制作方法. 一.marquee标签实现信息滚动 1 behavior滚动的方式 alternate:表示在两端之间来回滚动 scroll:表示由 ...

  9. Page Scroll Effects - 简单的页面滚动效果

    Codyhouse 收集了一组页面滚动效果,就是目前大家很常见的用户在浏览网页的时候.一些效果虽然极端,但如果你的目标是创建一个身临其境的用户体验,他们是非常有用的.所有的动画都使用 Velocity ...

随机推荐

  1. Javascript中使用replace()方法+正则表达式替换掉所有字符

    Js中的replace方法,只能替换掉第一次匹配到的字符,   而我们经常需要替换一个字符串中所有的匹配字符,这时候可以用正则表达式: str.replace(/a/g,"b"); ...

  2. EasyuiCombobox三级联动

    有许多刚接触Easyui中Combobox控件的朋友可能都会遇到的问题:如何将Combobox做成三级联动? 先本人有个三级联动的案例给大家参考参考,经测试能通过.注意Combobox绑定的数据是Js ...

  3. SQL Server根据列名查表

    select a.name, b.name from syscolumns a, sysobjects b where a.name = 'XXXX' and a.id = b.id and b.xt ...

  4. VS2015预览版中的C#6.0 新功能（一）

    VS2015预览版中的C#6.0 新功能(二) VS2015预览版中的C#6.0 新功能(三) VS2015的预览版在11月12日发布了,下面让我们来看看C#都提供了哪些新的功能. 字符串添写(Str ...

  5. javascript 高级程序设计学习笔记（面向对象的程序设计) 1

    Object构造函数或对象字面量都可以用来创建对象,但这些方式有个明显的缺点:使用相同一个接口创建很多对象,会产生大量重复代码. 工厂模式 //工厂模式 function createDog (nam ...

  6. POJ 1556 - The Doors 线段相交不含端点

    POJ 1556 - The Doors题意:    在 10x10 的空间里有很多垂直的墙,不能穿墙,问你从(0,5) 到 (10,5)的最短距离是多少.    分析:        要么直达,要么 ...

  7. C++、GDAL创建shapefile,并向矢量文件中添加网格

    //总体来说这个过程就是构建数据源->构建层->构建要素->构建形状->关闭数据源. //要包含的GDAL头文件 #include <gdal_priv.h> #i ...

  8. setInterval && setTimeout || 定时器

    来自w3school的解释 定时器setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式. setInterval() 方法会不停地调用函数,直到 clearInterva ...

  9. Python Challenge 过关心得（1）

    正式开始第1关,这一关的URL的特殊部分是map. 这关的图片上有一个本子,上面写着K→M,O→Q,E→G,稍微思索就能发现这几个字母都是按照字母表的顺序向后移动了两位,那么最投机取巧的方法就是把ma ...

  10. python随机产生4个互不相等的随机数

    从0-9中随机产生4个互不相等的数, 方法一: import random s=[] while(len(s)<4): x=random.randint(0,9) if x not in s: ...