简单的网页广告特效实例


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 相关文章推荐
Javascript事件热键兼容ie|firefox
Dec 30 Javascript
jQuery代码优化 事件委托篇
Nov 01 Javascript
利用javascript解决图片缩放及其优化的代码
May 23 Javascript
Jquery实现列表(隔行换色,全选,鼠标滑过当前行)效果实例
Jun 09 Javascript
JavaScript删除数组元素的方法
Mar 20 Javascript
JQuery实现级联下拉框效果实例讲解
Sep 17 Javascript
js字符串截取函数slice、substring和substr的比较
May 17 Javascript
Node.js开发第三方微信公众平台
Jun 05 Javascript
微信小程序自定义轮播图
Nov 04 Javascript
解决Angularjs异步操作后台请求用$q.all排列先后顺序问题
Nov 29 Javascript
详解Node.JS模块 process
Aug 31 Javascript
express异步函数异常捕获示例详解
Nov 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
新闻分类录入、显示系统
2006/10/09 PHP
用PHP来计算某个目录大小的方法
2014/04/01 PHP
php简单防盗链实现方法
2015/07/29 PHP
php7基于递归实现删除空文件夹的方法示例
2017/06/15 PHP
Laravel框架实现model层的增删改查(CURD)操作示例
2018/05/12 PHP
javascript 定义新对象方法
2010/02/20 Javascript
关于img的href和src取变量及赋值的方法
2014/04/28 Javascript
js限制checkbox选中个数以限制六个为例
2014/07/15 Javascript
jQuery基于ajax实现星星评论代码
2015/08/07 Javascript
基于insertBefore制作简单的循环插空效果
2015/09/21 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(一)
2015/12/10 Javascript
AngularJs 弹出模态框(model)
2016/04/07 Javascript
使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享
2016/05/09 Javascript
微信小程序中上传图片并进行压缩的实现代码
2018/08/28 Javascript
详解微信小程序中组件通讯
2018/10/30 Javascript
少女风vue组件库的制作全过程
2019/05/15 Javascript
Vue 2.0 侦听器 watch属性代码详解
2019/06/19 Javascript
小程序实现左滑删除效果
2019/07/25 Javascript
Vue 实现输入框新增搜索历史记录功能
2019/10/15 Javascript
微信小程序对图片进行canvas压缩的方法示例详解
2020/11/12 Javascript
python中使用OpenCV进行人脸检测的例子
2014/04/18 Python
详解Python中的多线程编程
2015/04/09 Python
python中函数总结之装饰器闭包详解
2016/06/12 Python
python3音乐播放器简单实现代码
2020/04/20 Python
Python简单实现控制电脑的方法
2018/01/22 Python
python3判断url链接是否为404的方法
2018/08/10 Python
Django框架静态文件使用/中间件/禁用ip功能实例详解
2019/07/22 Python
500行代码使用python写个微信小游戏飞机大战游戏
2019/10/16 Python
Python3.7在anaconda里面使用IDLE编译器的步骤详解
2020/04/29 Python
Python流程控制语句的深入讲解
2020/06/15 Python
socket.io 和canvas 实现的共享画板功能
2019/05/22 HTML / CSS
马德里竞技官方网上商店:Atletico Madrid Shop
2019/03/31 全球购物
教育科研先进个人材料
2014/01/26 职场文书
实践单位评语
2014/04/26 职场文书
学籍证明模板
2014/11/21 职场文书
上课说话检讨书
2015/01/27 职场文书