<!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-随滚轮匀速滑动的浮动广告窗动画的更多相关文章

  1. JavaScript学习笔记-随滚轮匀速滑动的浮动广告窗动画

    <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...

  2. JavaScript浮动广告代码,容纯DIV/CSS对联漂浮广告代码,兼容性非常好的js右下角与漂浮广告代码

    基于JavaScript代码实现随机漂浮图片广告,javascript图片广告 在网上有很多这样的代码,不过未必符合W3C标准,因为在头部加上<!DOCTYPE html>类似标签之后,漂 ...

  3. web页面浮动回到顶部功能和浮动广告

    实现测试浮动回到顶部 法一:用js实现<%@ Page Language="C#" AutoEventWireup="true" CodeBehind=& ...

  4. JQuery实现两侧浮动广告

    1.描述 两侧浮动显示广告 2.要点 其实就是一直在变浮动广告距顶部的值. 3.代码 <!DOCTYPE html> <html> <head> <meta ...

  5. Js浮动广告效果实现

    第一种 漂浮广告 不符合W3CJavaScript漂浮广告代码,很不错,代码精简,不过一次只有漂一个,复制就能用了.希望站长朋友喜欢. <html> <head> <ti ...

  6. 笨办法用js屏蔽被http劫持的浮动广告

    最近发现网站经常在右下角弹出一个浮动广告,开始的时候以为只是浏览器的广告. 后来越来越多同事反映在家里不同浏览器也会出现广告.然后深入检查了下,发现网站竟然被劫持了. 然后百度了一大堆资料,什么htt ...

  7. JavaScript实现页面滚动到div区域div以动画方式出现

    用JavaScript实现页面滚动效果,以及用wow.js二种方式实现网页滚动效果 要实现效果是页面滚动到一块区域,该区域以动画方式出现. 这个效果需要二点: 一:我们要先写好一个css动画. 二:用 ...

  8. 滑动cell的时候执行动画效果

    滑动cell的时候执行动画效果 效果图: 源码: // // ViewController.m // AniTab // // Created by XianMingYou on 15/2/26. / ...

  9. 自制Javascript浮动广告

    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb ...

随机推荐

  1. c++ STL使用

    STL标准模板库,提供一些类似java集合类的数据结构容器.比如eque.list.vector.map 等.还提供一些支持这些容器的算法和遍历容器的迭代器. 使用方法 #include <io ...

  2. 纯 CSS 实现实心三角形和空心三角形

    一.实心三角形 1.代码 .div-angles{ width:; height:; border-style: solid; border-width:30px; border-color: tra ...

  3. Jenkins自动部署springboot项目

    说明: 该示例为在windows系统下自动化部署springboot 架构: springboot + github + gradle + jdk8 各种配置步骤及截图说明: 1.配置git,grad ...

  4. day26 作业

    目录 TCP三次握手.四次挥手图 三次握手 四次挥手 简明理解三次握手 基于TCP开发一款远程CMD程序 TCP三次握手.四次挥手图 三次握手 第一次握手:客户端给服务端发一个 SYN 报文,并指明客 ...

  5. vue v-for详解

    1.Vue动态渲染列表------v-for用法详解: Html: <figure v-for="list in lists">     <div>     ...

  6. bash: express: command not found及vue连接数据库调接口

    今天在使用express -e . 的命令时,cmd给我报了一段不识别的错误: bash: express: command not found ,在网上查了一下,有人指出是express4的版本将命 ...

  7. PHP数组循环遍历的四种方式

     1.使用for循环遍历数组     conut($arr);用于统计数组元素的个数.     for循环只能用于遍历,纯索引数组!!!!     如果存在关联数组,count统计时会统计两种数组的总 ...

  8. PHP中的符号 ->、=> 和 :: 的含义(用法)

    php新手经常碰到的问题,->.=> 和 :: 这三个家伙是什么分别都是做什么的啊!看着就很晕. 没关系,下面我们做一下详细的解释,如果你有C++,Perl基础,你会发现这些家伙和他们里面 ...

  9. 使用Hilo.JS快速开发Flappy Bird

    http://hiloteam.github.io/tutorial/flappybird.html#_9 Flappy Bird是一款前不久风靡世界的休闲小游戏.虽然它难度超高,但是游戏本身却非常简 ...

  10. 左神算法书籍《程序员代码面试指南》——2_03删除链表的中间节点和a/b处的节点

    [题目]给定链表的头节点head,实现删除链表的中间节点的函数.例如:不删除任何节点:1->2,删除节点1:1->2->3,删除节点2:1->2->3->4,删除节 ...