<!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>
求解答,如有什么好方法及思路可告知那更是感激不尽,本人还是新手
<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>
求解答,如有什么好方法及思路可告知那更是感激不尽,本人还是新手
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了
var docbody=document.documentElement||document.body
在用document.body处改成docbody变量试试
<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>
这样试试
在你的js代码第四行:
var ad=document.getElementById('ad');
下面加上这一句
ad.style.position='fixed';//position:fixed这个属性只在IE6下不起作用
不的这个你大大概没完全看懂,后面move方法里面移动的时候并不是一次性移动到目标位置,如果目标位置和原位置很近,那就直接移动到目标位置,否则每次只移动距离的1/5(加了个计时器,每隔一段时间移动一次,直到移动到目标位置)。所以我说的移动不是错觉也不是抖动,是本身要实现的效果。
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';
}
火狐下可以了,但chrom中还是不行,能再帮帮忙不,谢谢!!
谢谢你,火狐下也可以了,但chrom还是不行,能再帮帮忙不?非常感谢
<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>
var y2=document.documentElement.scrollTop==0?90+document.body.scrollTop:90+document.documentElement.scrollTop;
把y2的表达式改一下就可以了