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.οnscrοll=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>

转载于:https://www.cnblogs.com/biyongyao/p/5847797.html

js添加广告模块，随页面移动而移动相关推荐

原生js漂浮广告效果
原生js漂浮广告效果静态页面代码 <body><div id="box"><img src="1.jpg" alt=" ...
html漂浮广告随页面移动代码,JS漂浮广告代码，慢慢漂移的广告JS代码
JS漂浮广告代码,慢慢漂移的广告js代码,可以漂浮到任何位置,哈哈...直接贴代码,很简单. var xin = true, yin = true var step = 1 var delay = 5 ...
静态html js文件上传,js实现动态添加上传文件页面
发邮件是需要添加一些文件,每添加一个文件,页面上可以显示一个表单文件上传选项. 此功能为:初始时刻只有一个添加按钮,当点击添加文件时,会增加一个选择文件和删除区域,同时显示上传按钮,当点击删除,此行选 ...
webpack 通用模块(每个页面都用到的js)编译
1.项目目录 2.配置文件:webpack.config.js var htmlWebpackPlugin = require('html-webpack-plugin'); var webpack ...
PHPCMS模块分析之广告模块详解----北冥神功破解法（一）
逍遥派的顶级武功之一,与天山六阳掌.天山折梅手和小无相功齐名,可以吸取他人的内力以供己用,是迅速提升功力的捷径,内力既厚,天下武功无不为我所用,犹如北冥,大舟小舟无不载,大鱼小鱼无不容."北 ...
Node.js学习笔记——模块加载机制及npm指令详解
文章目录二.模块化 1.模块化的基本概念 2.Node.js 中的模块化 Node.js 中模块的分类加载模块 Node.js 中的模块作用域向外共享模块作用域中的成员 Node.js 中的模块 ...
微信小程序——添加广告
微信小程序--添加广告要想在微信小程序中加入广告,首先要在微信小程序后台开通流量主流量主需要满足:1.累计独立访问(uv)不低于1000:2.有严重违规的小程序不与开通. 广告主要有:banner ...
html添加flash视频,添加视频模块和Flash模块
1. 添加视频模块: 建站系统可以通过两种方方式去添加视频. 1) 视频URL添加法.这种添加法允许添加的是其它站点的视频URL 第一步:在视频源网站找到该视频的URL链接地址,该链接地址必须以.mp ...
【phpcms-v9】phpcms-v9中添加广告联盟代码
废话在前:很多PC站长不知道如何在后台添加广告联盟的代码,甚至还抱怨没有这个功能!(懒惰不愿尝试) 让我来给你挖掘这个小功能吧. [教程]: 步骤一:登录后台->模块->广告->添加 ...

js添加广告模块，随页面移动而移动

js添加广告模块，随页面移动而移动相关推荐

最新文章

热门文章