用javascript实现仿163的js广告向下挤压页面的效果
本次实现一个js小小特效,效果就是广告从页面的上方出来将基本页面挤压下去。
实现的思路是将两个div(广告div1和div2)。将div1的高度不断增加,增加的同时div2的y轴坐标变大,div1的高度增加多少相对应的y轴坐标加大多少。
当加大到一定程度的时候,将速度值变为自身负数,并且改变函数下一次的执行间隔,这样就会向上走,当高度为0是将计时器清掉ok。
呵呵,下边看我的源代码吧:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
//将div的属性改为position:absolute;否则div2.style.top=divheight+"px";没作用
<style>
div{
position:absolute;
}
</style>
</head>
<body>
<!--定义两个div,div1为广告div,div2为基本页面div -->
<div id="div1" style="width:1000px; height:0px; background-color:#FF3; border:double; border-color:red"></div>
<div id="div2" style="width:1000px; height:600px; background-color:#00F; border:double; border-color:red"></div>
<script language="javascript" type="text/javascript">
var div1=document.getElementById("div1");
var div2=document.getElementById("div2");
//定义div1的高度和div2的起始纵坐标大小
var divheight=0;
//定义div1的高度和div2的起始纵坐标大小增减的速度
var div1Speed=1;
function floatimg(){
//求出div1增长后的高度
//div1的高度提高多少,相应的div2的起始点的纵坐标就是多少
divheight+=div1Speed;
//如果div1的高度divheight未达到80的时候div1的高度和div2的起始纵坐标都是增加1的,而且按照间隔100的速率循环执行函数floatimg()
if(divheight!=80){
div1.style.height=divheight+"px";
div2.style.top=divheight+"px";
t=setTimeout("floatimg()",20);
}else{
//当div1的高度达到80的时候,div1的高度和div2的起始纵坐标都是减少1的,如何减少呢?很简单,就将增长速度div1Speed变为自身的负数,这样每次加的是-1
//还需要改的地方就是setTimeout执行floatimg()函数的间隔,改为3000,让div1的高度达到80的时候有停顿效果。
div1Speed=-div1Speed;
div1.style.height=divheight+"px";
div2.style.top=divheight+"px";
t=setTimeout("floatimg()",3000);
}
//当divheight再次为0的时候清掉计时器
if(divheight==0){
clearTimeout(t);
}
}
floatimg();
</script>
</body>
</html>
转载于:https://www.cnblogs.com/javaexam2/archive/2012/02/22/2632610.html
用javascript实现仿163的js广告向下挤压页面的效果相关推荐
- java 安装界面广告_用javascript实现仿163的js广告向下挤压页面的效果
本次实现一个js小小特效,效果就是广告从页面的上方出来将基本页面挤压下去. 实现的思路是将两个div(广告div1和div2).将div1的高度不断增加,增加的同时div2的y轴坐标变大,div1的高 ...
- mysql 省市县三级联动查询_PHP+AJAX+MYSQL 仿凡客诚品省市县三级联动下拉菜单查询效果...
连接数据库:db.php $dbhost="localhost"; $dbpassword="123"; $dbuser ='root';//数据库用户名 $d ...
- 【前端】使用wow.js这个插件(实现页面动画效果),提高前端开发效率。
1.简介 有的页面在向下滚动的时候,有些元素会产生细小的动画效果.比如需要做到滚动条滑到某个位置时,才能显示动画. wow.js 依赖 animate.css,所以它支持 animate.css 多达 ...
- android 美团商家详情页,Android仿美团团购详情页下拉图片放大效果,简单可直接用在项目中...
一:介绍 大家在项目中,可能需要像美团团购详情页面下拉的时候美食图片放大的效果,在这里就给大家介绍如何实现这种效果,只有很少的代码,而且控件全部是安卓源生控件. 二:运行效果图 三.然后来看看如何实现 ...
- javascript 禁止下拉页面 “橡皮筋“效果
下拉显示的顶部深灰色区域即是橡皮筋效果 1.第一种 document.body.addEventListener('touchmove', function(event) {console.log(e ...
- 高仿163网站广告弹出层(每天定时24小时弹出一次)
高仿163网站广告弹出层(每天定时24小时弹出一次) 这里和京东首页定时弹出广告功能一样:用JS实现网站首页弹出广告:超级炫酷的定时弹出图片广告:淘宝网站广告弹出层实现. 高仿163网站广告弹出层(每 ...
- [转]仿163网盘无刷新文件上传系统
原文链接:http://www.cnblogs.com/cloudgamer/archive/2008/10/20/1314766.html 这个仿163网盘无刷新文件上传系统,并没有用使用.net的 ...
- HTML+CSS+JAVASCRIPT 高仿低配网页版网易云音乐播放器 1
HTML+CSS+JAVASCRIPT 高仿低配网页版网易云音乐播放器 前言 没有使用任何框架,只是想用最简单纯js的代码实现下 前台: Javascript+jQuery 后台: php/nodej ...
- jQuery仿淘宝精品服饰广告的实现
技术栈涉及 隐式迭代的遍历 筛选选择器 和为元素排序等 代码如下: <!DOCTYPE html> <html><head><meta charset=&q ...
最新文章
- Shell中常用的系统函数basename和dirname
- 服务器删除网站文章,如何一次性删除wordpress所有文章
- mfc打开控制台异常关闭_vc控制台程序关闭事件时的正确处理方式
- mysql8中怎么增删一列_MYSQL 第八课 数据的增删改
- 【GitLab】CentOS安装GitLab最佳实践
- PostgreSQL数据库密码
- Windows2008r2如何关闭防火墙
- 高性能mysql系统设计_MySQL 高性能表设计规范
- 计算机usb速度设置,怎样提升USB2.0的速度 注册列表修改法【详解】
- Android半透明对话框实现
- 常见不透明度16进制转换
- 网络分析笔记11:2 Reassembled TCP Segments问题
- Bitmap createBitmap()裁剪图片
- 下厨房内部孵化项目——懒饭产品体验分析报告
- 加油站-问题详解(暴力-整体-贪心)
- 华中农业大学计算机学院院长,魏小梅-华中农业大学-信息学院
- CPU使用率过高如何排查问题
- 获取 JSON 数据得个数 length
- 【树形结构】巴基斯坦城市列表 (城市原始数据来自md文件)
- 阿里云天池大赛赛题解析(深度学习篇)--阅读笔记1--赛题一
热门文章
- 使用阿里云服务器安装docker,并用nginx示例
- 【Sql Server】DateBase-事务
- ModuleNotFoundError: No module named 'tools.nnwrap' pytorch 安装
- 新一代图像AI ISP技术
- 模拟内存计算如何解决边缘人工智能推理的功耗挑战
- 新兴解决方案增强了电动汽车电源(功耗)管理
- TOF摄像机可以替代Flash激光雷达吗?
- arm,asic,dsp,fpga,mcu,soc各自的特点
- DCN-2655 gre隧道 vpn 嵌入IPSec配置:
- 前端面经笔记 2021.8.28