文档章节

广告狂页面随意滚动效果

ycYinG
 ycYinG
发布于 2016/12/08 16:08
字数 531
阅读 1
收藏 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
昌平
程序员
Android仿制淘宝滚动图文条

开篇废话 产品让我们将“我的”页面改版,上面加了一个广告条,非常类似淘宝“我的”页面的广告条,然后就自己写了一个,方法比较一般,如果大家有更好的办法请留言给我,谢谢。滚动图文条之...

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

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

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

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

爱码农
2017/12/31
0
0
jQuery 仿写京东轮播广告图

基本样式: HTML代码:

frwupeng517
2016/12/21
0
0
浅谈APP与H5对比!优势都有哪些呢?

很多人再开发一款APP的时候,H5开发相对来说比较便宜一点,原生APP开发则费用较高。那么到底H5跟原生开发有什么区别呢,我们来了解一下两种开发的区别在哪里! H5,指的是HTML5,很多人都认为...

IT智云编程
07/20
0
0

没有更多内容

加载失败,请刷新页面

加载更多

一个可能的NEO链上安全随机数解决方案

0x00 困境 链上安全随机数生成应该算是一个比较蛋疼的问题,哪怕你的系统再牛逼,合约程序困在小小的虚拟机里,哪怕天大的本事也施展不开。 更悲催的是,交易执行的时候,是在每一个节点都执...

暖冰
32分钟前
0
0
【大福利】极客时间专栏返现二维码大汇总

我已经购买了如下专栏,大家通过我的二维码你可以获得一定额度的返现! 然后,再给大家来个福利,只要你通过我的二维码购买,并且关注了【飞鱼说编程】公众号,可以加我微信或者私聊我,我再...

飞鱼说编程
今天
1
0
Spring5对比Spring3.2源码之容器的基本实现

最近看了《Spring源码深度解析》,该书是基于Spring3.2版本的,其中关于第二章容器的基本实现部分,目前spring5的实现方式已有较大改变。 Spring3.2的实现: public void testSimpleLoad(){...

Ilike_Java
今天
1
0
【王阳明心学语录】-001

1.“破山中贼易,破心中贼难。” 2.“夫万事万物之理不外于吾心。” 3.“心即理也。”“心外无理,心外无物,心外无事。” 4.“人心之得其正者即道心;道心之失其正者即人心。” 5.“无...

卯金刀GG
今天
2
0
OSChina 周三乱弹 —— 我们无法成为野兽

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @ _刚刚好: 霸王洗发水这波很骚 手机党少年们想听歌,请使劲儿戳(这里) hahahahahahh @嘻酱:居然忘了喝水。 让你喝可乐的话, 你准忘不了...

小小编辑
今天
12
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部