文档章节

广告狂页面随意滚动效果

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
《JavaScript实用效果整理》系列分享专栏

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

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

基本样式: HTML代码:

frwupeng517
2016/12/21
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Charles抓包简单使用

安装Charles, 注册https://blog.csdn.net/qq_25821067/article/details/79848589 打开代理,抓取全部流量 抓移动设备包 移动设备设置代理为当前电脑的Ip地址,端口8888,然后访问chls.pro/...

SuShine
14分钟前
0
0
Elasticsearch的简单操作

package com.dongpeng.es;import java.io.IOException;import java.util.Date;import java.util.HashMap;import java.util.Map;import java.util.concurrent.TimeUnit;impor......

魔法王者安琪拉
16分钟前
0
0
父亲写的散文诗

许飞的单曲《父亲写的散文诗》 一九八四年 庄稼还没收割完 女儿躺在我怀里 睡得那么甜 今晚的露天电影 没时间去看 妻子提醒我 修修缝纫机的踏板 明天我要去 邻居家再借点钱 孩子哭了一整天啊...

简心
17分钟前
0
1
浅谈格雷厄姆的《证券分析》

本杰明-格雷厄姆是价值投资的祖师爷,是巴菲特的师傅,我丝毫不敢对他不敬。他的两本书《证券分析》和《聪明的投资者》是每位做投资者必读的经典之书。 国内读者对《证券分析》作者格雷厄姆的...

酒逢知己千杯少
18分钟前
1
0
非原生app开发app

1.变色龙云,一门app 对域名打包 2.apicloud,wex5,自由平台提供的规则开发 3.react native ,Cordova 框架开发 4.Hbuild IDE打包

妖尾巴
19分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部