方便以后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. iOS应用拨打电话

    方法一: 特点: 直接拨打, 不弹出提示. 并且, 拨打完以后, 留在通讯录中, 不返回到原来的应用. //拨打电话 - (void)callPhone:(NSString *)phoneNumber ...

  2. php 查看文档

    http://www.runoob.com/php/php-datatypes.html php 学习网站 : http://www.phpfans.net/

  3. Equations（hdu 1496 二分查找+各种剪枝）

    Equations Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total S ...

  4. 1009 Enigma

    本题的重点是理解清楚题意并能代码模拟.形式是二战德国密码机,和数据结构.算法联系较少. #include <stdio.h> #include <string.h> int m ...

  5. 雅思创始人Keith Taylor谈英语学习

    雅思创始人Keith Taylor谈英语学习 “要学的是信息,而不是语言” 我们要学习一个国家的语言就得知道这个国家的方方面面.要学习英语就得了解英美国家的社会.经济.人文.历史等各方面的信息. 大家 ...

  6. c# 大数据量比较时-方案

    1.当面临千万条数据量的比较时,从技术的角度来说应该用泛型键值(c#键值由于用了散列算法速度很快).例如前几天我需要查的是 航空公司.出发.到达.返点可以将 航空公司-出发-到达做一个键,返点作为值. ...

  7. [TYVJ] P1004 滑雪

    滑雪   背景 Background 成成第一次模拟赛 第三道   描述 Description     trs喜欢滑雪.他来到了一个滑雪场,这个滑雪场是一个矩形,为了简便,我们用r行c列的矩阵来表示 ...

  8. jQuery之位置

    1.offset()获取匹配元素在相对浏览器窗口的偏移量 返回一个对象,包括两个属性.left:相对浏览器窗口左边的距离.top:相对浏览器顶部的距离.  $("#div1").o ...

  9. C# 字符串驻留池

    在.Net中,对于相同的字符串,.Net会将它们指向同一个地址,它们是相同的实例..Net中的字符串并不会更新,当更改一个字符串变量时,由于字符串的不可变性,.Net实际上是新创建一个字符串,而将变量 ...

  10. Cocos2d-x 2.1.5 简单动画

    Cocos2d新版本函数更改了一些. 下面的代码可以产生一个简单动画. //第一步:生成动画需要的数据 CCTexture2D *texture=CCTextureCache::sharedTextu ...