当前位置: 首页 > news >正文

简单的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;

转载于:https://www.cnblogs.com/likailan/p/3427133.html

相关文章:

  • Android Studio 导入外部lib文件
  • HashMap和HashSet的区别
  • EXT今日笔记-ext获取url参数值
  • [LeetCode]Pow(x,n)
  • mysql数据库不能远端访问
  • 敏捷开发流程
  • 自动备份SQL数据库到云存储Storage
  • 1956-计算机基础知识大赛 3
  • 如何把照片变成素描
  • struts2 iterator排序
  • git基本命令
  • Java语言基础(五) Java原始数据类型的分类以及数据范围
  • iconv 文件编码转换
  • Asp.Net下载页面,并弹出下载提示框
  • 判断当前屏幕的方向
  • ----------
  • [原]深入对比数据科学工具箱:Python和R 非结构化数据的结构化
  • 【每日笔记】【Go学习笔记】2019-01-10 codis proxy处理流程
  • 2017 前端面试准备 - 收藏集 - 掘金
  • 345-反转字符串中的元音字母
  • CSS相对定位
  • ECMAScript6(0):ES6简明参考手册
  • ES6核心特性
  • java8 Stream Pipelines 浅析
  • JS题目及答案整理
  • magento2项目上线注意事项
  • ReactNativeweexDeviceOne对比
  • Sequelize 中文文档 v4 - Getting started - 入门
  • thinkphp5.1 easywechat4 微信第三方开放平台
  • 开源SQL-on-Hadoop系统一览
  • 让你的分享飞起来——极光推出社会化分享组件
  • 使用API自动生成工具优化前端工作流
  • 一些基于React、Vue、Node.js、MongoDB技术栈的实践项目
  • 阿里云ACE认证之理解CDN技术
  • # Swust 12th acm 邀请赛# [ E ] 01 String [题解]
  • #if和#ifdef区别
  • #微信小程序:微信小程序常见的配置传值
  • ( )的作用是将计算机中的信息传送给用户,计算机应用基础 吉大15春学期《计算机应用基础》在线作业二及答案...
  • (+4)2.2UML建模图
  • (C语言)编写程序将一个4×4的数组进行顺时针旋转90度后输出。
  • (ibm)Java 语言的 XPath API
  • (Matalb时序预测)WOA-BP鲸鱼算法优化BP神经网络的多维时序回归预测
  • (rabbitmq的高级特性)消息可靠性
  • (Redis使用系列) SpirngBoot中关于Redis的值的各种方式的存储与取出 三
  • (博弈 sg入门)kiki's game -- hdu -- 2147
  • (附源码)springboot青少年公共卫生教育平台 毕业设计 643214
  • (转)可以带来幸福的一本书
  • (状压dp)uva 10817 Headmaster's Headache
  • (自适应手机端)响应式新闻博客知识类pbootcms网站模板 自媒体运营博客网站源码下载
  • ***利用Ms05002溢出找“肉鸡
  • *setTimeout实现text输入在用户停顿时才调用事件!*
  • .NET Core工程编译事件$(TargetDir)变量为空引发的思考
  • .NET Core日志内容详解,详解不同日志级别的区别和有关日志记录的实用工具和第三方库详解与示例
  • .NET MVC之AOP
  • .net 发送邮件