求助，写个个固定广告位的js网页，ie下没问题，其他火狐和chrom都实现不了

聚散不繇我 2012-08-22 10:35:17
<!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">
#container{ margin-left:15%;}
#ad{ position:absolute; left:10px; top:90px; width:72px; height:130px; border:solid 1px gray; background-color:#eee; font-size:12px; cursor:pointer;}
#as div{ text-align:center;}
</style>
<script language="javascript">
var _handler;

window.onscroll=function(){

if(_handler) window.clearTimeout(_handler);
var ad=document.getElementById('ad');
var y1=ad.offsetTop;
//var y2=90+document.body.scorllTop;
var y2=90+document.documentElement.scrollTop;
//alert(y2);
move(y1,y2);
}
function move(y1,y2){
var ad=document.getElementById('ad');
if((y1+(y2-y1)/5)>=y2)
{
ad.style.top=y2;
_handler=null;
}
else{
y1+=(y2-y1)/5;
ad.style.top=y1;
_handler=window.setTimeout('move('+y1+','+y2+")",50);
}
}
function close_onclick(){
var ad=document.getElementById('ad');
ad.style.display='none';
ad.innerHTML='';
}
function ad_onclick(){
window.location='www.google.com';
}
</script>
</head>

<body style=" height:2000px;">
<div id="ad">
<img src="images/0916100.png" width="70px" onclick="ad_onclick()" />
<div onclick="close_onclick()">关闭</div>
</div>
<div id="container">
<img src="images/gif008.gif" />
</div>
</body>
</html>
求解答，如有什么好方法及思路可告知那更是感激不尽，本人还是新手
...全文
223 17 打赏 收藏 转发到动态 举报
写回复
用AI写文章
17 条回复
切换为时间正序
请发表友善的回复…
发表回复
聚散不繇我 2012-08-23
  • 打赏
  • 举报
 回复
[Quote=引用 12 楼 的回复:]

火狐下通过CLASS执行的TOP似乎取不到 ad.style.top为空 重新设置一下TOP似乎就可以了
JScript code

var _handler;
window.onscroll=function(){
if(_handler) window.clearTimeout(_handler);
var ad=document.getElementById('ad');……
[/Quote]

谢谢你，火狐下也可以了，但chrom还是不行，能再帮帮忙不？非常感谢
聚散不繇我 2012-08-23
  • 打赏
  • 举报
 回复
[Quote=引用 12 楼 的回复:]

火狐下通过CLASS执行的TOP似乎取不到 ad.style.top为空 重新设置一下TOP似乎就可以了
JScript code

var _handler;
window.onscroll=function(){
if(_handler) window.clearTimeout(_handler);
var ad=document.getElementById('ad');……
[/Quote]

火狐下可以了，但chrom中还是不行，能再帮帮忙不，谢谢！！
聚散不繇我 2012-08-23
  • 打赏
  • 举报
 回复
[Quote=引用 15 楼 的回复:]

被你搞到崩溃，还有特意要求这种效果的呢。我印象中的静止定位的意思是：它就在那里，一直都在，而不是你让他去那里。。。。算了，给出修正过后的代码吧：
JScript code
<script language="javascript">
var _handler;

window.onscroll=function(){

if(_handler) window.cl……
[/Quote]

谢谢你，问题解决了。我也只是在学习的时候看到这个效果，自己模仿着写的时候效果不理想所以想弄个明白。还有这个应该不算是纯粹的静止定位，这个是当鼠标下滑的时候广告会慢慢移动下去，从而更有动感，也就更能引起用户的注意了。
静缘 2012-08-23
  • 打赏
  • 举报
 回复
火狐下通过CLASS执行的TOP似乎取不到 ad.style.top为空 重新设置一下TOP似乎就可以了


var _handler;

  window.onscroll=function(){

  if(_handler) window.clearTimeout(_handler);

  var ad=document.getElementById('ad');

  if(!ad.style.top){ad.style.top="90px";}

  var y1=parseInt(ad.style.top);

  var y2=90+parseInt(document.documentElement.scrollTop);

  move(y1,y2);

  }

  function move(y1,y2){

  var ad=document.getElementById('ad');//ad.style.top=y2+"px";

if((y1+(y2-y1)/5)>=y2){

ad.style.top=y2+"px";

_handler=null;

}else{

  y1+=(y2-y1)/5;

  ad.style.top=y1+"px";

  _handler=window.setTimeout('move('+y1+','+y2+')',50);

  }

  }

  function close_onclick(){

  var ad=document.getElementById('ad');

ad.style.display='none';

ad.innerHTML='';

  }

  function ad_onclick(){

  window.location='www.google.com';

  }
聚散不繇我 2012-08-23
  • 打赏
  • 举报
 回复
[Quote=引用 9 楼 的回复:]

我崩溃了，什么叫“没有那种移动下来的感觉”.拜托你搞清楚，有这种感觉是意外,是不完美的好吧。
静止定位本来就不需要抖动
[/Quote]

不的这个你大大概没完全看懂，后面move方法里面移动的时候并不是一次性移动到目标位置，如果目标位置和原位置很近，那就直接移动到目标位置，否则每次只移动距离的1/5（加了个计时器，每隔一段时间移动一次，直到移动到目标位置）。所以我说的移动不是错觉也不是抖动，是本身要实现的效果。
似梦飞花 2012-08-23
  • 打赏
  • 举报
 回复
我在火狐和ie9下都可以啊 不过鼠标往上滚时没抖动
你的火狐是不是版本低的问题？
泡泡鱼_ 2012-08-23
  • 打赏
  • 举报
 回复
我崩溃了，什么叫“没有那种移动下来的感觉”.拜托你搞清楚，有这种感觉是意外,是不完美的好吧。
静止定位本来就不需要抖动
静缘 2012-08-23
  • 打赏
  • 举报
 回复
同意楼上
var y2=document.documentElement.scrollTop==0?90+document.body.scrollTop:90+document.documentElement.scrollTop;
把y2的表达式改一下就可以了
泡泡鱼_ 2012-08-23
  • 打赏
  • 举报
 回复
被你搞到崩溃，还有特意要求这种效果的呢。我印象中的静止定位的意思是：它就在那里，一直都在，而不是你让他去那里。。。。算了，给出修正过后的代码吧：
<script language="javascript">

  var _handler;

    

  window.onscroll=function(){

    

  if(_handler) window.clearTimeout(_handler);

  var ad=document.getElementById('ad');

  var y1=ad.offsetTop;

  //下面这句中document.body.scrollTop主要为了在Chrome中生效  

  var y2=document.documentElement.scrollTop==0?90+document.body.scrollTop:90+document.documentElement.scrollTop;

  



  move(y1,y2);

  }

  function move(y1,y2){

  var ad=document.getElementById('ad');

    if((parseFloat(y1)+parseFloat(y2-y1)/5)>=parseFloat(y2))

    {

    ad.style.top=y2+'px';//加上单位

    window.clearTimeout(_handler);

    }

  else{

      y1+=parseFloat(y2-y1)/5;

      ad.style.top=y1+'px';//加上单位

      _handler=window.setTimeout(function (){move(y1,y2)},50);

  }

  }

  function close_onclick(){

        var ad=document.getElementById('ad');

        ad.style.display='none';

        ad.innerHTML='';

  }

  function ad_onclick(){

    window.location='www.google.com';

  }

</script>
似梦飞花 2012-08-22
  • 打赏
  • 举报
 回复
document.body改成
var docbody=document.documentElement||document.body
在用document.body处改成docbody变量试试
聚散不繇我 2012-08-22
  • 打赏
  • 举报
 回复
[Quote=引用 6 楼 的回复:]

引用 5 楼 的回复:
还是只有在ie下可以...

。。。你有看我给你的回复？？
在你的js代码第四行：
var ad=document.getElementById('ad');
下面加上这一句
ad.style.position='fixed';//position:fixed这个属性只在IE6下不起作用
[/Quote]
加了，广告位能出现在视野范围内，但是没有那种移动下来的感觉了，在ie有移动的感觉但会一直往下走，还是达不到效果...麻烦再帮找找原因，谢谢！！
风一样的大叔 2012-08-22
  • 打赏
  • 举报
 回复
这个明显是浏览器兼容性问题
泡泡鱼_ 2012-08-22
  • 打赏
  • 举报
 回复
var ad=document.getElementById('ad');
ad.style.position='fixed';//position:fixed这个属性只在IE6下无法运行

<div id="ad" style="position:fixed">
<img src="images/0916100.png" width="70px" onclick="ad_onclick()" />
<div onclick="close_onclick()">关闭</div>
</div>
你只需为IE6准备个意外处理即可,其他浏览器好像都支持fixed了
泡泡鱼_ 2012-08-22
  • 打赏
  • 举报
 回复
[Quote=引用 5 楼 的回复:]
还是只有在ie下可以...
[/Quote]
。。。你有看我给你的回复？？
在你的js代码第四行：
var ad=document.getElementById('ad');
下面加上这一句
ad.style.position='fixed';//position:fixed这个属性只在IE6下不起作用
聚散不繇我 2012-08-22
  • 打赏
  • 举报
 回复
还是只有在ie下可以...
似梦飞花 2012-08-22
  • 打赏
  • 举报
 回复
<!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">
#container{ margin-left:15%;}
#ad{ position:absolute; left:10px; top:90px; width:72px; height:130px; border:solid 1px gray; background-color:#eee; font-size:12px; cursor:pointer;}
#as div{ text-align:center;}
</style>
<script language="javascript">
var _handler;
window.onscroll=function(){
if(_handler) window.clearTimeout(_handler);
var ad=document.getElementById('ad');
var y1=parseInt(ad.style.top);
var y2=90+parseInt(document.documentElement.scrollTop);
move(y1,y2);
}
function move(y1,y2){
var ad=document.getElementById('ad');
if((y1+(y2-y1)/5)>=y2){
ad.style.top=y2+"px";
_handler=null;
}else{
y1+=(y2-y1)/5;
ad.style.top=y1+"px";
_handler=window.setTimeout('move('+y1+','+y2+")",50);
}
}
function close_onclick(){
var ad=document.getElementById('ad');
ad.style.display='none';
ad.innerHTML='';
}
function ad_onclick(){
window.location='www.google.com';
}
</script>
</head>

<body style=" height:2000px;">
<div id="ad" style="position:absolute;left:10px;top:90px;width:72px;height:130px;border:solid 1px gray;background-color:#eee;font-size:12px;cursor:pointer;">
<img src="1.jpg" width="70px" onclick="ad_onclick()" />
<div onclick="close_onclick()">关闭</div>
</div>
<div id="container">
<img src="2.jpg" />
</div>
</body>
</html>
这样试试
聚散不繇我 2012-08-22
  • 打赏
  • 举报
 回复
都不行哦，我写的这个ie运行没问题，其他浏览器就不行了，还请多帮帮忙，谢谢啦！！
原生javascript自定义滚动条（兼容IE，火狐，chrom)
原生javascript自定义滚动条（兼容IE，火狐，chrom)
js日历控件chrom ie ff
支持chrom ie ff 的js日历控件。版权KimSoft (jinqinghua@gmail.com)。在此基础上做如下修改： a) 为时间input控件加入onchange事件触发代码； b) 年选择的宽度从64px增加到66px； c)如果input值不为空，那么再次点击此input进行日期回显时在日历中高亮显示input的日期；
chrom.adm.rar
chrom zh cn adm 简体中文 chrom zh tw adm 繁体中文 chrom en us adm 美国英文 chrom adm chrom adm
浏览器(Chrom+Firefox)
浏览器(Chrom+Firefox)
chrom插件.rar
自用的chrom插件安装包，解压，打开chrom浏览器，打开开发者模式，加载已解压安装包即可
JavaScript

87,916

社区成员

224,617

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章