js添加广告模块，随页面移动而移动
实现如下的效果，一般用于广告，
这是通过运动来实现的，大家可以先自己写写，再看看和小编我写的是不是同一个思想
<style>
#div1{
width:100px;
height:100px;
background:red;
position:absolute;
bottom:0;
right:0;
}
</style> <body style="height:2000px;">
<div id="div1"></div>
</body>
js代码部分
<script>
window.onscroll=function()
{
var div=document.getElementById("div1");
var scrollTop=document.documentElement.scrollTop ||document.body.scrollTop; // div.style.top=document.documentElement.clientHeight-div.offsetHeight+scrollTop+'px';
startmove (parseInt((document.documentElement.clientHeight-div.offsetHeight)/2+scrollTop))
//offsetHeight是div的高度
//document.documentElement.clientHeight是到窗口的顶部
};
var timer=null;
function startmove(iTarget)
{
var div=document.getElementById('div1');
clearInterval(timer);
timer=setInterval(function()
{
var speed =(iTarget-div.offsetTop)/4;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if (div.offsetTop==iTarget)
{
clearInterval(timer);
}
else
{
div.style.top=div.offsetTop+speed+'px';
}
}
, 30) } </script>
js添加广告模块，随页面移动而移动的更多相关文章
- js 添加广告
需要调用广告的页面 <script type="text/javascript"> var xzname="巨蟹座";</script& ...
- 系统管理模块_部门管理_改进_抽取添加与修改JSP页面中的公共代码_在显示层抽取BaseAction_合并Service层与Dao层
系统管理模块_部门管理_改进1:抽取添加与修改JSP页面中的公共代码 commons.jspf <%@ page language="java" import="j ...
- 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结
史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...
- webpack 通用模块(每个页面都用到的js)编译
1.项目目录 2.配置文件:webpack.config.js var htmlWebpackPlugin = require('html-webpack-plugin'); var webpack ...
- node.js使用mysql模块的坑
之前用node.js写的订餐系统,很容易挂掉,一直也没想去解决它.今天看了一下,试了试,原因是在连接数据库的时候没有对error事件进行处理,导致程序一直挂在那里,需要重启服务才能正常使用. ...
- legend---一、如何实现js跳转到php页面
legend---一.如何实现js跳转到php页面 一.总结 一句话总结:url还是同样的方式,只不过注意引号内嵌的时候的转义. 代码: onClick="javascript:if(con ...
- nginx添加 nginx_heath模块
原因?为什么会使用nginx_heath 这个模块,主要是如nginx+tomcat部署的时,tomcat挂了之后nginx->upstream 轮询是可以踢掉挂掉的tomcat服务的,如果部署 ...
- 为自己的Android应用添加广告
平时也写了不少Android小应用,但是都是做练习之用,从来没有想过添加广告赚钱这一说. 个人是非常反感在应用内添加广告这种行为的,非常影响用户体验,不小心点到广告的话,手机流量哗哗地就没了··· 但 ...
- Zepto.js库touch模块代码解析
Zepto.js也许并不陌生,专门针对移动端开发,Zepto有一些基本的触摸事件可以用来做触摸屏交互(tap事件.swipe事件),Zepto是不支持IE浏览器的. 下面来解析一些Zepto.js触摸 ...
随机推荐
- Python开发入门与实战10-事务
1. 事务 本章我们将通过一个例子来简要的说明“事务”,这个开发实战里经常遇到的名词.事务是如何体现在一个具体的业务和系统的实现里. 事务是通过将一组相关操作组合为一个,要么全部成功要么全部失败的单元 ...
- Android Studio安装更新终极解决方式
之前写过一篇Android SDK无法更新的博文,其实该方式对Android Studio同样有效,大伙可以下载网盘中分享的小软件,若搜索到通道后提示需要更细,也可以选择更新.参考:http://bl ...
- SAP web 开发 (第二篇 bsp 开发 mvc模式 Part2 )
单击第一个图标,第一个图标突出显示,单击第二个图标,第一个变灰,第二个突出显示,反之一样.单击history读取历史记录. Controller ZCL_SUS_C_ORDER_CHANGE 1. ...
- RF Analyzer for Android 安卓平台连接HackRF的App
Over the last week I've been working on a new project, trying to build a spectrum analyzer for Andro ...
- 如何在Kali Linux中搭建钓鱼热点
文中提及的部分技术可能带有一定攻击性,仅供安全学习和教学用途,禁止非法使用! 0×00 实验环境 操作系统:Kali 1.0 (VM) FackAP: easy-creds 硬件:NETGEAR wg ...
- 315Mhz、433Mhz无线遥控信号的解码分析和模拟
摘要 前段时间学习无线电的同时了解到arduino是作为技能尚未成熟技术宅的我继树莓派又一个不错的选择.于是花了200元购得3块arduino开发板(2*nano&1*uno)和其他传感器等, ...
- Ubuntu Command-Line: Enable Unlimited Scrolling in the Terminal
At times when using the terminal, the output from a command can be so long, you simply can’t scroll ...
- 使用POSIX正则库匹配一行中多个结果
正则匹配与正则表达式是什么东西我就不说了,在这里说下POSIX这个c语言正则库在对字符串进行正则匹配时取出多个结果的问题. 首先简单说明下POSIX正则库的几个函数和使用方法 第一个函数:int re ...
- 如何改善magento前台图片质量
magento做的网店的 前台产品图片仔细看会发现不够清晰,质量比原图损失较大,这是因为系统在用GD2压缩图片时默认压缩 质量是80%.为了提高产品图片质量,我们可以修改代码来改变压 magento做 ...
- 网络数据包收发流程(四)：协议栈之packet_type
进入函数netif_receive_skb()后,skb正式开始协议栈之旅.先上图,协议栈大致过程如下所示:跟OSI七层模型不同,linux根据包结构对网络进行分层.比如,arp头和ip头都是紧跟在以 ...