文档章节

广告狂页面随意滚动效果

ycYinG
 ycYinG
发布于 2016/12/08 16:08
字数 531
阅读 1
收藏 0
点赞 0
评论 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
昌平
程序员
JS三教九流系列-jquery实例开发到插件封装1

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

透笔度 ⋅ 2015/08/11 ⋅ 0

网页设计中的新鲜效果更多的例子

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

爱码农 ⋅ 2017/12/31 ⋅ 0

jQuery 仿写京东轮播广告图

基本样式: HTML代码:

frwupeng517 ⋅ 2016/12/21 ⋅ 0

mycncart操作使用教程 - 横幅广告

mycncart可以灵活地设置多个广告图片,以及在多个位置,多个布局页面显示多个广告图片。您可以为其加上链接,这样顾客点击时可以直接方位所加的链接网址。 当你安装了默认的mycncart系统后,...

OpenCart中国 ⋅ 2015/12/21 ⋅ 1

mycncart操作使用教程 - 横幅广告

mycncart可以灵活地设置多个广告图片,以及在多个位置,多个布局页面显示多个广告图片。您可以为其加上链接,这样顾客点击时可以直接方位所加的链接网址。 当你安装了默认的mycncart系统后,...

OpenCart中国 ⋅ 2015/12/21 ⋅ 0

mycncart操作使用教程 - 横幅广告

mycncart可以灵活地设置多个广告图片,以及在多个位置,多个布局页面显示多个广告图片。您可以为其加上链接,这样顾客点击时可以直接方位所加的链接网址。 当你安装了默认的mycncart系统后,...

OpenCart中国 ⋅ 2015/12/26 ⋅ 0

js 各种图片特效

图片特效 JavaScript封装的平滑图片滚动,绝不用jQuery JavaScript封装的平滑图片滚动,绝不用jQuery,我感觉这肯定是位Js高人所为,封装的不错啦,注释内容也很多,研究Js的看看 竖向图片滚...

june-映君 ⋅ 2014/05/31 ⋅ 3

Axure常用操作与技巧(干货,不定期更新)

1. 内联框架的使用 拖一个手机模型到画布,再在手机屏幕上放一个内联框架(调整到手机屏幕大小),隐藏滚动条和边框,链接到手机原型的第一个界面,这样的话点击跳转时候,手机模型就不会再次...

一只大黑猫 ⋅ 2017/06/25 ⋅ 0

css怎样命名比较规范

每次我们做网页时候很纠结怎样取名字,实在想不出好的名字,很多人就会用a、b、或者aa、bb等来命名,这样的命名其实当自己把网页完成后,要修改那一部分时,会发现要花费很大的功夫去寻找,让...

橴Se纞姙 ⋅ 2014/02/10 ⋅ 0

OpenCart之品牌(Carousel)模块教程

品牌(Carousel)模块指的是如下图所示部分: brand_1.jpg (4.53 KiB) 被浏览 14 次 Open Cart系统有针对每一个品牌的产品页面,如点击Sony品牌链接后,会出现如下页面: brand_2.jpg (9.19 Ki...

OpenCart中国 ⋅ 2014/03/17 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Java的Excel导出工具类

首先在POM中引入需要的Jar <dependency><groupId>com.alibaba</groupId><artifactId>fastjson</artifactId><version>1.2.47</version></dependency><dependency><groupId>o......

Kxvz ⋅ 2分钟前 ⋅ 0

Java 3DES加密解密

import org.apache.commons.codec.digest.DigestUtils; import org.apache.commons.codec.binary.Base64; //算法代码[java] view plain copy /** * 转换成十六进制字......

说回答 ⋅ 9分钟前 ⋅ 0

php 浮点型计算精度问题

今天碰到一个金额计算的问题,浮点数做差,结果有误(精度有问题)。 $a = floatval('6');$b = floatval('4.99');$m = floatval('1');$r = $a - $b;$r = $r - $m;var_dump($r);//f...

stupidboy ⋅ 31分钟前 ⋅ 0

Mahout推荐算法之SlopOne

一、 算法原理 有别于基于用户的协同过滤和基于item的协同过滤,SlopeOne采用简单的线性模型估计用户对item的评分。如下图,估计UserB对ItemJ的偏好 图(1) 在真实情况下,该方法有如下几个...

xiaomin0322 ⋅ 36分钟前 ⋅ 0

LVM讲解

LVM是什么 LVM是 Logical Volume Manager(逻辑卷管理)的简写,它是Linux环境下对磁盘分区进行管理的一种机制,Linux用户安装Linux操作系统时遇到的一个常见的难以决定的问题就是如何正确地...

李超小牛子 ⋅ 45分钟前 ⋅ 0

mysql更改密码、连接mysql、mysql常用命令

1. 更改mysql的root账户密码: mysql中root账户和系统root不是一个账户 1.1 更改环境变量PATH,增加mysql绝对路径 由于mysql安装目录为/usr/local/mysql/,所以系统不能直接使用mysql,需把/...

laoba ⋅ 46分钟前 ⋅ 0

阿里云发布企业数字化及上云外包平台服务:阿里云众包平台

摘要: 阿里云正式发布旗下众包平台业务(网址:https://zhongbao.aliyun.com/),支持包括:网站定制开发,APP、电商系统等软件开发,商标、商品LOGO、VI、产品包装设计、营销推广、大数据人...

猫耳m ⋅ 46分钟前 ⋅ 0

阿里云发布企业数字化及上云外包平台服务:阿里云众包平台

摘要: 阿里云正式发布旗下众包平台业务(网址:https://zhongbao.aliyun.com/),支持包括:网站定制开发,APP、电商系统等软件开发,商标、商品LOGO、VI、产品包装设计、营销推广、大数据人...

阿里云云栖社区 ⋅ 50分钟前 ⋅ 0

1.03-Maven中使用ueditor富文本编辑器

起因:在maven仓库未找到百度的ueditor的jar包 操作: 1.下载百度的ueditor的jar包 2.打开命令行,切换到ueditor的下载位置,运行一下命令: mvn install:install-file -Dfile=ueditor-1.1....

静以修身2025 ⋅ 55分钟前 ⋅ 0

几道Spring 面试题

1、BeanFactory 接口和 ApplicationContext 接口有什么区别? ApplicationContext 接口继承BeanFactory接口 Spring核心工厂是BeanFactory BeanFactory采取延迟加载,第一次getBean时才会初始...

职业搬砖20年 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部