Javascript-随滚轮匀速滑动的浮动广告窗动画
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
* { padding: 0; margin: 0; border: 0; }
.adv { position: relative; width: 150px; height: 300px; z-index: 1; top: 120px; left: 20px; }
.con, .close1 { position: absolute; }
.con { width: 150px; height: 300px; top: 0; left: 0; background-color: #7ca1ee; }
.close1 { width: 23px; height: 23px; font-size: 22px; text-align: center; color: #ffffff; top: 5px; left: 120px; z-index: 999; }
.close1:hover { background-color: #808080; }
.text { height: 20000px; width: 200000px; margin: 0 auto; }
</style>
</head>
<body> <div class="adv" id="advC">
<div class="con"></div>
<div class="close1" onclick="clo()">×</div>
</div>
<div class="text"> 唯一的缺点就是横向滑动效果不好,建议还是用固定式,不需要滑动比较好 </div> <script type="text/javascript">
var adv = document.getElementById("advC");//获取广告窗口 function clo() {//关闭广告窗口函数
adv.style.display = "none";
} var uu = null;//计时器全局变量声明 function scol() {
clearInterval(uu);//清除计时器 //获取广告即将随滚动条滑动到的坐标
var advTopX = 120 + parseInt(document.body.scrollTop);
var advLeftX = 20 + parseInt(document.body.scrollLeft); var advTop, advLeft;//获取广告当前坐标
if (adv.currentStyle) {
advTop = parseInt(adv.currentStyle.top);
advLeft = parseInt(adv.currentStyle.left);
} else {
advTop = parseInt(document.defaultView.getComputedStyle(adv, null).top);
advLeft = parseInt(document.defaultView.getComputedStyle(adv, null).left);
} //计算从当前坐标 到 即将滑动到的坐标 需要跑多少距离
var TopLong = advTopX - advTop;
var LeftLong = advLeftX - advLeft; //利用计时器实现广告匀速随滚动条滑动效果
uu = setInterval(function () {
if ((advTop - 10 < advTopX && advTop + 10 > advTopX) && (advLeft - 10 < advLeftX && advLeft + 10 > advLeftX)) {//判断垂直与横向是否处于该区间值,前后误差10px
adv.style.top = advTopX + "px";//垂直距离=即将滑动到的距离
adv.style.left = advLeftX + "px";//横向距离=即将滑动到的距离
clearInterval(uu);//清除计时器,即到这里的时候就跳出计时器,固定广告位置 } else {
advTop += parseFloat(TopLong / 200);//将需要滑动的距离平均分为200份
adv.style.top = Math.ceil(advTop) + "px";//每次计时器进来滑动1份 advLeft += parseFloat(LeftLong / 200);//将需要滑动的距离平均分为200份
adv.style.left = Math.ceil(advLeft) + "px";//每次计时器进来滑动1份
//这里的份数可以调节滑动速度的快慢,但是必须为整十整百整千,数字越大越慢,越小越快
}
}, 1); } window.onscroll = scol;//注册滚轮滑动事件 </script>
</body>
</html>
Javascript-随滚轮匀速滑动的浮动广告窗动画的更多相关文章
- JavaScript学习笔记-随滚轮匀速滑动的浮动广告窗动画
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...
- JavaScript浮动广告代码,容纯DIV/CSS对联漂浮广告代码,兼容性非常好的js右下角与漂浮广告代码
基于JavaScript代码实现随机漂浮图片广告,javascript图片广告 在网上有很多这样的代码,不过未必符合W3C标准,因为在头部加上<!DOCTYPE html>类似标签之后,漂 ...
- web页面浮动回到顶部功能和浮动广告
实现测试浮动回到顶部 法一:用js实现<%@ Page Language="C#" AutoEventWireup="true" CodeBehind=& ...
- JQuery实现两侧浮动广告
1.描述 两侧浮动显示广告 2.要点 其实就是一直在变浮动广告距顶部的值. 3.代码 <!DOCTYPE html> <html> <head> <meta ...
- Js浮动广告效果实现
第一种 漂浮广告 不符合W3CJavaScript漂浮广告代码,很不错,代码精简,不过一次只有漂一个,复制就能用了.希望站长朋友喜欢. <html> <head> <ti ...
- 笨办法用js屏蔽被http劫持的浮动广告
最近发现网站经常在右下角弹出一个浮动广告,开始的时候以为只是浏览器的广告. 后来越来越多同事反映在家里不同浏览器也会出现广告.然后深入检查了下,发现网站竟然被劫持了. 然后百度了一大堆资料,什么htt ...
- JavaScript实现页面滚动到div区域div以动画方式出现
用JavaScript实现页面滚动效果,以及用wow.js二种方式实现网页滚动效果 要实现效果是页面滚动到一块区域,该区域以动画方式出现. 这个效果需要二点: 一:我们要先写好一个css动画. 二:用 ...
- 滑动cell的时候执行动画效果
滑动cell的时候执行动画效果 效果图: 源码: // // ViewController.m // AniTab // // Created by XianMingYou on 15/2/26. / ...
- 自制Javascript浮动广告
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb ...
随机推荐
- Windows的SEH机理简要介绍
1.异常分类 一般来说,我们把Exception分为2类,一类是CPU产生的异常,我们称之为CPU异常(或者硬件异常).另一类为是通过调用RaiseException API产生的软件异常,我们称之为 ...
- VS2010-MFC(对话框:为对话框添加控件)
转自:http://www.jizhuomi.com/software/151.html 上一讲创建了一个名为“Addition”的工程,目的是生成一个实现加法运算的应用程序.实现加法计算有几个必要的 ...
- python 将值相同的key分组的方法
方法一: 使用 itertools.groupby() rows = [ {'address': '5412 N CLARK ', 'date ': '07/12/2012 ’ }, {'addres ...
- Hibernate调用Oracle的存储过程
众所周知,当过多的使用存储过程,触发器等 数据库方言相关的应用时,应用程序的移植性会变差,特别是在Hibernate中使用这些,简直是讽刺,但是当今中国又有哪家公司做项目会关心应用程序的移植性呢? 现 ...
- Angular+Bootstrap3导航菜单
Angular+Bootstrap3导航菜单 AngularJS体验式编程系列文章,将介绍如何用angularjs构建一个强大的web前端系统.angularjs是由Google团队开发的一款非常优秀 ...
- matlab 实现感知机线性二分类算法(Perceptron)
感知机是简单的线性分类模型 ,是二分类模型.其间用到随机梯度下降方法进行权值更新.参考他人代码,用matlab实现总结下. 权值求解过程通过Perceptron.m函数完成 function W = ...
- linux平台进行c语言源码安装
安装c源程序的步骤: 1. ./configure --prefix 执行编译检测 指定安装路径 2. make 编译 3. sudo make install 编译后安装 前两步可以合成一步(mak ...
- utils03_clone远程仓库
1.Bash here 克隆方式 复制要克隆远程仓库的SSH或者HTTPS 使用Bash here克隆文件 2.使用git同步
- 20191004-gugugu公告
作者洗手不干了,所以以后可能会不写考试反思而是要写题解了…… ××这是$Day7$,于是我跪了 (不会,于是准备自己$YY$) 加油啊$LNC$你一定能$AK$的(雾 但是他因为太愧疚而没有打症结而是 ...
- 清除样式的css
html, body, div, ul, li, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, form, input, textarea, th, td, s ...