请选择 进入手机版 | 继续访问电脑版

HTML5星空

HTML5星空 首页 HTML5教程 CSS3 查看内容

html5广告悬浮问题

2014-6-26 16:26| 发布者: admin| 查看: 1223| 评论: 0

摘要: 我们在制作网页时经常遇到广告悬浮问题,下面这个html5列子比较简单,但是能够解决问题!! !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transi ...
我们在制作网页时经常遇到广告悬浮问题,下面这个html5列子比较简单,但是能够解决问题!!

<!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>
<style type="text/css">
.img{
position:absolute;
width:100px;
height:100px;
top:100px;
right:18px;}
</style>
</head>

<body>
<div class="img" id="sroling" >
<img src="../../images/png-1783.png" />
</div>
<script type="text/javascript">
var id=function(i){return document.getElementById(i)}
var scroll=function (i){
var space=id(i).offsetTop;
id(i).style.top=space+'px';
void function(){
var goTo = 0;
var roll=setInterval(function(){
var height =document.documentElement.scrollTop+document.body.scrollTop+space;
var top = parseInt(id(i).style.top);
if(height!= top){
goTo = height-parseInt((height - top)*0.9);
id(i).style.top=goTo+'px';
}
//else{if(roll) clearInterval(roll);}
},12);
}()
}
scroll('sroling');
</script>
</body>
1

鲜花

握手

雷人

路过

鸡蛋

刚表态过的朋友 (1 人)

相关阅读

更多资源及Java+大数据个人原创视频,
可关注本站官方公众号观看:
快讯

     京ICP备14042305号

html5star team © 2012-2013 html5星空 Comsenz Inc.

GMT+8, 2020-7-7 17:41 , Processed in 0.080694 second(s), 27 queries .

返回顶部