博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js随着页面滑动的图片
阅读量:6908 次
发布时间:2019-06-27

本文共 986 字,大约阅读时间需要 3 分钟。

 <!doctype html>

<html>

<head>

<title>随屏滚动 - Liehuo.net</title>

<meta charset="gbk" />

<style type="text/css">

*{padding:0;margin:0;}

html{height:100%;}

body{height:200%;}

.box{position:absolute;width:100px;height:100px;background:#ccc}

</style>

</head>

<body>

<div class="box" id="box1" style="bottom:0;left:0;">AD1</div>

<div class="box" id="box2" style="top:0;right:0;">AD2</div>

</body>

<script type="text/javascript">

var id=function(o){return document.getElementById(o)}

var scroll=function (o){

var space=id(o).offsetTop;

id(o).style.top=space+'px';

void function(){

var goTo = 0;

var roll=setInterval(function(){

var height =document.documentElement.scrollTop+document.body.scrollTop+space;

var top = parseInt(id(o).style.top);

if(height!= top){

goTo = height-parseInt((height - top)*0.9);

id(o).style.top=goTo+'px';

}

//else{if(roll) clearInterval(roll);}

},50);

}()

}

scroll('box1');

scroll('box2');

</script>

</html>

本文转自 IT阿飞 51CTO博客,原文链接:http://blog.51cto.com/itafei/1791861

转载地址:http://wnwcl.baihongyu.com/

你可能感兴趣的文章
CSS Overflow属性详解
查看>>
mariadb与MYSQL的部分功能比较
查看>>
mail发送邮件QQ邮箱设置
查看>>
C++ Internals: STL之Map
查看>>
JQuery中$.ajax()方法参数详解(转载)
查看>>
汇编程序:按键松开时中断的处理
查看>>
统计一个网段以及相应区段存活和宕机的ip
查看>>
Mysql 通过全量备份和binlog恢复整体数据
查看>>
Bulma - 基于 Flexbox 的现代化的 CSS 框架
查看>>
单点登录
查看>>
jQuery Template 简单使用
查看>>
Internet路由之路由表查找算法概述-哈希/LC-Trie树/256-way-mtrie树
查看>>
Centos网络管理(四)-路由转发与静态路由
查看>>
SHA加密算法工具类
查看>>
企业数据囤积是小事?Veritas的《数据囤积报告》告诉你千万别小看这些风险
查看>>
python链接mysql常见问题汇总
查看>>
UDP"打洞"原理
查看>>
cannot restore segment prot after reloc: Permission denied
查看>>
Cisco设备初始基本操作流程
查看>>
开发者必备的火狐插件
查看>>