文档章节

广告狂页面随意滚动效果

ycYinG
 ycYinG
发布于 2016/12/08 16:08
字数 531
阅读 2
收藏 0

#####1.先给广告框一个绝对定位,设置left,top的值,给出广告在页面中的位置 <div id="ad" style="position:absolute;left:10px;top:10px;"> <img src="guanggao.jpg" alt=""> </div> #####2.获取元素 var ad = document.getElementById('ad'); #####3.定义所需要的全局变量 var vx = -1; 设置水平方向 var vy = -1;设置垂直方向 var xh = null; 设置循环变量 #####4.给广告框定义事件 (1)让广告在页面加载完成之后运动,设置window.onload或者定义地执行函数,定义一个start函数并且调用 window.onload = function(){ …… } (function(){ …… })(); (2) 当鼠标经过让广告框暂停 ad.onmouoseover = stop; (3) 当鼠标经过后鼠标离开时让广告框继续运动 ad.onmouseover = start; (4) 当鼠标点击时,让广告框消失 ad.onclick = hide; #####5.start函数: (1) 定义一个计数器函数 setInterval (2) 获取可视窗口的宽高 var win_x = window.innerWidth?window.innerWidth:document.documentElement.clientWidth; var win_y = window.innerHeight?window.innerHeight:document.documentElement.clientHeight; (3)获取广告框距离浏览器左边以及上边的距离,由于gg.style.left获取的是类似与100px的值,需要parseInt函数使其只显示数字 var x =parseInt( gg.style.left); var y = parseInt(gg.style.top); (4) 判断条件 i. 当广告框到达底部或从底部到达顶部的时候,让其垂直运动方向改变 if(y<0){ vy = -vy; } if(y>(win_y-广告框的高度)){ vy = -vy; } ii. 当广告框碰到右边或从右边到达左边的时候,让其水平方向改变 if(x<0){ vx = -vx; } if(x>(win_x-广告框的宽度)){ vx = -vx; } (5) 重新赋值 y = y - vy; x = x - vx; gg.style.left = x + 'px'; gg.style.top = y + 'px'; #####6.stop函数 清除循环函数 clearInterval(xh); #####7.hide函数 清除循环函数 clearInterval(xh); 设置广告框display样式为none gg.style.display = 'none'; #####8.js代码 window.onload = function(){
var gg = document.getElementById('gg'); gg.onmouseover = stop; gg.onmouseout = start; gg.onclick = hide; var vx = -1,vy = -1, xh = null; function start(){ xh = setInterval(function(){ var win_w = window.innerWidth?window.innerWidth:document.documentElement.clientWidth; var win_h = window.innerHeight?window.innerHeight:document.documentElement.clientHeight; var x = parseInt(gg.style.left); var y = parseInt(gg.style.top); if(y > (win_h-100)){ vy=-vy; } if(y < 0){ vy = -vy; } if(x > (win_w - 100)){ vx = -vx; } if(x < 0){ vx = -vx; } y = y - vy; x = x - vx; gg.style.left = x + 'px'; gg.style.top = y + 'px'; },10); } start(); function stop(){ clearInterval(xh); } function hide(){ clearInterval(xh); gg.style.display = 'none'; } }

© 著作权归作者所有

上一篇: 省市县三级级联
下一篇: 放大镜效果
ycYinG
粉丝 1
博文 10
码字总数 4889
作品 0
昌平
程序员
私信 提问
加载中

评论(0)

Android仿制淘宝滚动图文条

开篇废话 产品让我将“我的”页面改版,上面加了一个广告条,非常类似淘宝“我的”页面的广告条,然后就自己写了一个,虽然网上类似的教程有很多了,但是我用的这个实现方法我没有见过,如果...

一个有故事的程序员
2018/08/17
0
0
JS三教九流系列-jquery实例开发到插件封装1

我们先写实例,然后在分装为插件,最后做更高级的处理! 封装插件基础学习 http://my.oschina.net/u/2352644/blog/487688 效果目录: 1.tab切换效果的实例和封装 2.带左右按钮图片滚动效果的...

透笔度
2015/08/11
368
0
网页设计中的新鲜效果更多的例子

  另一组使用一些非传统和新鲜的效果的网站。      如果你想让你的网站脱颖而出,创建一个漂亮的网站是第一步。为了访问您的网站难忘和有趣的,你可以添加令人兴奋和有趣的效果。这是另...

爱码农
2017/12/31
0
0
《JavaScript实用效果整理》系列分享专栏

整理一些使用的JavaScript效果,在Web开发中遇到的比较好的动态效果,都收藏在这里,对以后的网站开发增加不少的色彩 《JavaScript实用效果整理》已整理成PDF文档,点击可直接下载至本地查阅...

开元中国2015
2018/10/29
85
0
jQuery 仿写京东轮播广告图

基本样式: HTML代码:

frwupeng517
2016/12/21
0
0

没有更多内容

加载失败,请刷新页面

加载更多

《Java 8 in Action》Chapter 11:CompletableFuture:组合式异步编程

某个网站的数据来自Facebook、Twitter和Google,这就需要网站与互联网上的多个Web服务通信。可是,你并不希望因为等待某些服务的响应,阻塞应用程序的运行,浪费数十亿宝贵的CPU时钟周期。比...

后端小哥
10分钟前
30
0
「升级指南」Spring Cloud Alibaba v2.2.0 升级问题整理

下面总结一下由 Spring Cloud Alibaba v2.1.0 升级至 v2.2.0 遇到的问题。 主要问题涉及 sentinel 的问题。 破坏性 ,不向下兼容 Spring Cloud Alibaba Sentinel 不再依赖 sentinel-web-ser...

即将秃头的Java程序员
18分钟前
39
0
【word 2019 for Mac实用教程】word文档如何快速完成给章节标题自动编号?

在编辑word文档时,我们经常会遇到给段落编号,手动编号过程繁琐易出错。 那么,如何快速完成给word文档编号呢? 1、打开一个word 2019 for Mac文档,在【开始】选项卡里选择【多级列表】,在...

mac小叮当
19分钟前
21
0
【tty】应用程序调用write写串口调用流程

这几天在跟进串口使能流控后收发异常问题,特简单梳理了下应用程序执行write操作的调用流程,在这简单记录下,平台为全志方案 tty_io.c tty_io.c n_tty.c serial_core.c sunxi_uart.c tty_w...

DerrickOwen
21分钟前
23
0
当真正的市场危机到来时,避险新贵比特币却惨遭遗忘?

年初肆虐新冠病毒疫情在中国的强制隔离处理下已经得到了有效控制,非湖北地区新增病例速度已经得到了有效控制,全国范围内的存量病例也出现了连续近一周的持续下降。 不过上周五以来中国以外...

daxiongdi
26分钟前
43
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部