简单的网页广告特效实例


Posted in Javascript onAugust 19, 2017

为了练习javascript,做了一个简单的demo,实现的是广告从顶部慢慢拉出到最大,然后停留2s,再收缩到比较小且可以关闭的广告特效。图片可以替换为任意其他的图片。

代码如下

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <style>
  #ad{
   width:962px;
   display:none;
   margin:0 auto;
   overflow:hidden;
   position:relative;
  }
  #main{
   margin:0 auto;
   width:960px;
   height:1700px;
  }
  #close{
   width:20px;
   height:20px;
   position:absolute;
   top:0;
   right:0;
   font-size:16px;
   line-height:20px;
   text-align:center;
   display:none;
   background:yellowgreen;
  }
 </style>

</head>
<body>
<div id="ad">
 <img src="ad.png" id="imgAd" width="962" height="386">
 <img src="cur.png" id="curAd" width="1199" height="68">
 <span id="close">x</span>
</div>
<div id="main"><img src="数字商品-10-23.jpg"></div>
<script>
 var oImgAd=document.getElementById('imgAd');
 var oad=document.getElementById('ad');
 var ocur=document.getElementById('curAd');
 var closeBtn=document.getElementById('close');
 var h=0;
 var maxH=oImgAd.height;
 var minH=ocur.height;
 function down()
 {
  if(h<maxH)
  {
   h+=5;
   oad.style.height=h+"px";
   oad.style.display="block";
   setTimeout(down,5);
  }
  else{
   setTimeout(up,2000);
  }
 }
 function up(){
  if(h>minH){
   h-=5;
   oad.style.height=h+"px";
   setTimeout(up,5);
  }
  else{
   oImgAd.style.display='none';
   closeBtn.style.display='block';
  }
 }
 closeBtn.onclick=function(){
  oad.style.display='none';
 }
 setTimeout(down,1000);
</script>
</body>
</html>

以上这篇简单的网页广告特效实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
onsubmit阻止form表单提交与onclick的相关操作
Sep 03 Javascript
自己做的模拟模态对话框实现代码
May 23 Javascript
jquery实现按Enter键触发事件示例
Sep 10 Javascript
21个JavaScript事件(Events)属性汇总
Dec 02 Javascript
JavaScript模拟实现继承的方法
Mar 30 Javascript
日常收集整理的JavaScript常用函数方法
Dec 10 Javascript
Bootstrap自定义文件上传下载样式
May 26 Javascript
js中遍历对象的属性和值的方法
Jul 27 Javascript
JS实现太极旋转思路分析
Dec 09 Javascript
微信小程序 侧滑删除(左滑删除)
May 23 Javascript
微信小程序三级联动地址选择器的实例代码
Jul 12 Javascript
详解如何webpack使用DllPlugin
Sep 30 Javascript
JavaScript 完成注册页面表单校验的实例
Aug 19 #Javascript
JS模拟超市简易收银台小程序代码解析
Aug 18 #Javascript
详解JS数组Reduce()方法详解及高级技巧
Aug 18 #Javascript
javascript将url解析为json格式的两种方法
Aug 18 #Javascript
Vue组件选项props实例详解
Aug 18 #Javascript
浅谈angular4 ng-content 中隐藏的内容
Aug 18 #Javascript
Node.JS更改Windows注册表Regedit的方法小结
Aug 18 #Javascript
You might like
采用PHP函数memory_get_usage获取PHP内存清耗量的方法
2011/12/06 PHP
php一个找二层目录的小东东
2012/08/02 PHP
php同时使用session和cookie来保存用户登录信息的实现代码
2016/05/13 PHP
javascript字典探测用户名工具
2006/10/05 Javascript
Iframe thickbox2.0使用的方法
2009/03/05 Javascript
50个比较实用jQuery代码段
2011/09/18 Javascript
jQuery实现提交按钮点击后变成正在处理字样并禁止点击的方法
2015/03/24 Javascript
Juery解决tablesorter中文排序和字符范围的方法
2015/05/06 Javascript
Jquery和angularjs获取check框选中的值的方法汇总
2016/01/17 Javascript
基于javascript实现全国省市二级联动下拉选择菜单
2016/01/28 Javascript
自学实现angularjs依赖注入
2016/12/20 Javascript
livereload工具实现前端可视化开发【推荐】
2016/12/23 Javascript
javascript添加前置0(补零)的几种方法
2017/01/05 Javascript
Vue resource三种请求格式和万能测试地址
2018/09/26 Javascript
vue实现路由懒加载及组件懒加载的方式
2019/06/11 Javascript
微信小程序用canvas画图并分享
2020/03/09 Javascript
夯基础之手撕javascript继承详解
2020/11/09 Javascript
[02:41]DOTA2亚洲邀请赛小组赛第三日 赛事回顾
2015/02/01 DOTA
[57:53]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#3OG VS VP
2016/03/03 DOTA
[03:45]Newbee战队出征西雅图 决战2016国际邀请赛
2016/08/02 DOTA
Python isinstance判断对象类型
2008/09/06 Python
python类继承用法实例分析
2014/10/10 Python
Python编程之属性和方法实例详解
2015/05/19 Python
ubuntu中配置pyqt4环境教程
2017/12/27 Python
Python中的默认参数实例分析
2018/01/29 Python
python广度优先搜索得到两点间最短路径
2019/01/17 Python
python TF-IDF算法实现文本关键词提取
2019/05/29 Python
python字符串替换re.sub()实例解析
2020/02/09 Python
python:HDF和CSV存储优劣对比分析
2020/06/08 Python
学点简单的Django之第一个Django程序的实现
2021/02/24 Python
英国医生在线预约:Top Doctors
2019/10/30 全球购物
珠宝店促销方案
2014/03/21 职场文书
服务标语大全
2014/06/18 职场文书
幼儿老师求职信
2014/06/30 职场文书
小学网上祭英烈活动总结
2014/07/05 职场文书
煤矿安全生产月活动总结
2014/07/05 职场文书