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 ...
随机推荐
- System.Web.Mvc.FileContentResult.cs
ylbtech-System.Web.Mvc.FileContentResult.cs 1.程序集 System.Web.Mvc, Version=5.2.3.0, Culture=neutral, ...
- python面向对象应用-1
#猫 定义类 class Cat: type = '猫' #通过__init__初始化的特征 def __init__(self,nickname,age,color): self.nickname ...
- Python学习day15-函数进阶(3)
figure:last-child { margin-bottom: 0.5rem; } #write ol, #write ul { position: relative; } img { max- ...
- 在Jsp中调用静态资源,路径配置问题
在Jsp中调用图片.JS脚本等,针对取得的路径有两种调用方式: 1.放入Body中生成绝对路径(不建议) <%@ page language="java" import=&q ...
- HBase的安装与配置
- 备份和恢复MySQL数据库
一.备份 1) 备份表mysqldump -uroot -p 库名 表1 > e:\backup.sqlmysqldump -uroot -p 库名 表1 表2 表3 > e:\backu ...
- 威胁快报|Solr dataimport成挖矿团伙新型利用方式
概述 近日,阿里云安全团队监测到挖矿团伙利用solr dataimport RCE(CVE-2019-0193)作为新的攻击方式对云上主机进行攻击,攻击成功后下载门罗币挖矿程序进行牟利.该团伙使用的恶 ...
- select 下拉框多选
需要引入插件:fselect.js (此插件依赖jQ) 和 fselect.css 下载 点击查看在线演示地址 //html<select class="demo" mul ...
- git放弃本地所有未提交的修改
1.未添加至暂存区的 git checkout . 2.已添加至暂存区的 git reset HEAD . git checkout .
- MyEclipse6.5安装SVN插件方法
MyEclipse6.5安装SVN插件,掌握了几种方法,本节就像大家介绍一下MyEclipse6.5安装SVN插件的三种方法,看完本文你肯定有不少收获,希望本文能教会你更多东西. 一.安装方法: My ...