简单的javascript实例二(随页面滚动广告效果)
方便以后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实例二(随页面滚动广告效果)的更多相关文章
- ScrollMagic – 酷毙了！超炫的页面滚动交互效果
ScrollMagic 是一款 jQuery 插件,它让你可以像使用进度条一样使用滚动条.如果你想在特定的滚动位置开始一个动画,并且让动画同步滚动条的动作,或者把元素粘在一个特定的滚动位置,那么这款插 ...
- 一个简单的JavaScript实例
1 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&q ...
- Javascript实例技巧精选(6)—滚动鼠标中键读取Json数据分页显示网页内容
>>点击这里下载完整html源码<< 截图如下: 滚动鼠标中键读取Json数据分页显示网页内容,关键的Javascript如下: <script type="t ...
- 简单的javascript实例一(时钟特效)
方便以后copy 时钟特效 <html> <head> <meta http-equiv="Content-Type" content="t ...
- jQuery插件实例三：图片滚动[切换]效果一
图片切换效果在很多网站上都能看到,是一种常见的广告/活动宣传方式,通常位于网页上端.这个插件是众多图片切换效果的形式中的一种,数据源可在前端配置,也可从后台通JSON格式传输数据,当然,数据格式是固定 ...
- js原生 + jQuery实现页面滚动字幕
js原生/jQuery实现页面滚动字幕效果 17:45:49 在新闻列表或者文章列表信息等页面中很容易要求实现字幕滚动的效果,以下为简单的实现页面中滚动字幕的效果 1.jQuery实现页面滚动字幕效果 ...
- 一天JavaScript示例-判定web页面的区域
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 二、JavaScript语言--JS实践--信息滚动效果制作
运用JavaScript技术,掌握无缝滚动和歇间性滚动的制作方法. 一.marquee标签实现信息滚动 1 behavior滚动的方式 alternate:表示在两端之间来回滚动 scroll:表示由 ...
- Page Scroll Effects - 简单的页面滚动效果
Codyhouse 收集了一组页面滚动效果,就是目前大家很常见的用户在浏览网页的时候.一些效果虽然极端,但如果你的目标是创建一个身临其境的用户体验,他们是非常有用的.所有的动画都使用 Velocity ...
随机推荐
- Android ListView使用（非原创）
1.ListView:它以列表的形式展示具体要显示的内容,并且能够根据数据的长度自适应屏幕显示 <LinearLayout xmlns:android="http://schemas. ...
- ES6 let和const命令
一.let定义变量 { let a = 1;} console.log(a);只在let所在的代码块有效,console的结果是a is not defined,报错. 不存在var的变量提升,即使用 ...
- jQuery Moblile Demos学习记录Panel
jQuery Moblile Demos学习记录Panel 11. 二 / Jquery Mobile / 没有评论 本文来源于www.ifyao.com禁止转载!www.ifyao.com 我就 ...
- Linux下安装MySQL步骤
1.下载安装包(这里是32位的): MySQL-client-5.6.13-1.rhel5.i386.rpm MySQL-server-5.6.13-1.rhel5.i386.rpm 2.安装 rpm ...
- php缩放gif和png格式透明背景变成黑色的解决方法
在对gif或png格式的图片进行缩放等操作时,原本透明背景的图片最后都变成黑色的,解决办法 $img = imagecreatetruecolor(, ); //2.上色 $color=imageco ...
- 使用dict和set
Python内置了字典:dict的支持,dict全称dictionary,在其他语言中也称为map,使用键-值(key-value)存储,具有极快的查找速度. d = {'Michael': 95, ...
- full-background.js
$(window).on('load', function () { $(window).trigger('resize'); }); $(function () { var $window = $( ...
- scheme 宏macro写法
scheme里的宏不同的实现有不同的写法: 1.mzscheme的define-macro (mzscheme也就是pltschme,也就是drracket,没有define-macro这个关键字) ...
- Android 匿名共享内存Java接口分析
在Android 匿名共享内存驱动源码分析中介绍了匿名共享内存的驱动实现过程,本文在Android匿名共享内存驱动基础上,介绍Android匿名共享内存对外Android系统的匿名共享内存子系统的主体 ...
- 2015第10周三jquery ui position
jQuery UI API - .position() 所属类别 方法重载(Method Overrides) | 方法(Methods) | 实用工具(Utilities) 用法 描述:相对另一个元 ...