用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广告向下挤压页面的效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 一滴两滴下一句是什么呢？
- 下一篇： 日本丰田叉车进口电瓶48V360AH多少