使用javascript实现某网站的头部广告向上切换效果

最新推荐文章于 2021-02-25 08:44:45 发布

哈佛凌晨

最新推荐文章于 2021-02-25 08:44:45 发布

阅读量1.4k

点赞数 1

分类专栏：学习笔记 javascirpt 文章标签： javascript class stylesheet div xhtml border

本文链接：https://blog.csdn.net/dyushuo6230/article/details/7299859

版权

学习笔记同时被 2 个专栏收录

40 篇文章 0 订阅

订阅专栏

javascirpt

19 篇文章 1 订阅

订阅专栏

学了javascript后，看到某网站的一个头部广告效果很不错，感觉自己也能做出来，于是经过我一下午的奋斗，哈哈，我成功了，虽然实现可能很麻烦，但没法，如果你理解我的程序，如果你有更好的方法，请留下宝贵意见，不要吝啬嗯。。

我得思路很简单，也可以说是很单一吧，就是用定时器控制top来实现的。

效果图：

代码：：：：：：：

<!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>
<link href="./css/basic-header.css"rel="stylesheet" type="text/css" />
<style type="text/css">

</style>
</head>

<body>
<div class="header">
<div class="mediaWrap">
                    <div class="mediaLink">
                        <ul class="mediaBtn">
           <li class="STYLE1">桔子手机GT6,一降到底，让客户无限惊喜！</li>
                                <li class="STYLE1">桔子手机GT6疯狂低价，团购啦！！！</li>
        <li class="STYLE1">安卓(Android)系统+WCDMA 3G网络，俱在GT6</li>
                        </ul>
                 </div>
</div>

</div>
<script language="javascript" type="text/javascript">
var str=document.getElementsByTagName("div");
for(var i=0;i<str.length;i++){
if(str[i].className == 'mediaLink'){
var getStr = str[i];
}
}

getStr.style.top=-90+"px"

var divheight=0;
//定义div1的高度和div2的起始纵坐标大小增减的速度
var div1Speed=-1;

}

floatimg();

</script>
</body>
</html>

CSS属性：：：：：

* {
margin:0;
padding:0;
}

body{
font-size:12px;
background-color: #f5f6f7;
color: #777;
font-family:"宋体","微软雅黑",Verdana,Arial;
width:760px;
color:#333;
position:relative;
margin-left:100px;
}

img{
border:0;
}

ul {
list-style-type:none;
}

.header {
width:986px;
height:60px;
position: relative;
padding-top: 12px;
background-image:url(../imges/logo2.gif);

}
.mediaWrap {
    position: absolute;
    top: 44px;
    left: 180px;
    width: 650px;
    height: 30px;
    line-height: 30px;
    font-size: 20px;
    font-weight: bold;
    color: #F68000;
   overflow: hidden;
}
.mediaLink {
    position: absolute;
    width: 560px;
}
.mediaLink li {
    display: block;
    width: 650px;
    height: 30px;
    text-align:center;
    overflow: hidden;
}