200分网页漂浮搜索栏

css 轻松实现 float.html 代码 :1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br><div style="position:fixed;top:0px;right:0px;padding:10px;background:#eee"><input type="text" size="20"><input type="button" value="Search"/></div>保存用浏览器打开试试：）

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

2楼的只有w3c浏览器才支持fixed，ie没效果，更改了下1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>
<style>
#divFloat{
position:fixed !important;/*for ff*/
position:absolute;
top:0px;!important;/*for ff*/
top:expression(this.top=document.body.scrollTop);/*for IE*/
right:0px;/*for ff*/padding:10px;
background:#eeeeee;
}
#divFloat form{margin:0px;}
</style>
<div id="divFloat" ><form method='post' action='search.asp'> <input type="text" size="20"> <input type="button" value="Search"/></form> </div>
showbo用了expression，还有更优化的，参见：http://blog.doyoe.com/article.asp?id=188
以前为了实现多个浮动广告，特意写了个测试函数，遵循W3C的<!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>
    <title>无标题页</title>
<script type="text/javascript">
/*
* Copyright (C) 2007-2008 skylark
* Email [email protected]
* Style_pars_setting:  0(left-top),1(right-top),2(left-center),3(right-center),4(left-bottom),5(right-bottom),{left:num,top:num}(userSetting)
* Eg1:var a=new AutoScroll();a.Build({id:'obj_id',style:0-5}});
* Eg2:var a=new AutoScroll();a.Build({id:'obj_id',style:{left:100,top:100}}});
* Eg3:var a=new AutoScroll();a.Build({id:'obj1_id',style:0-5}},{id:'obj2_id',style:{left:100,top:100}}},.........);
*
*/var $ = function(s){
    return document.getElementById(s);
};var Class = {
create : function () {
return function () {
this.initialize.apply(this, arguments);
};
}
};var AutoScroll=Class.create();AutoScroll.prototype.initialize=function(){
    this.obj=new Array();
};AutoScroll.prototype.Build=function(){
    var me=this;
    this.box=arguments;
    for(var i=0;i<this.box.length;i++){
        $(this.box[i].id).style.position="absolute";
        this.obj.push({
            id:this.box[i].id,
            width:$(this.box[i].id).offsetWidth,
            height:$(this.box[i].id).offsetHeight,
            style:this.box[i].style
        });
    }
    window.onscroll=function(){
        this.common={
            t:document.documentElement.scrollTop,
            h:document.documentElement.clientHeight,
            w:document.documentElement.clientWidth
        };
        this.position=new Array();
        for(var i=0;i<me.box.length;i++){
            this.style=new Object();
            this.position[i]=[
                {x:0,y:this.common.t},
                {x:this.common.w-me.obj[i].width,y:this.common.t},
                {x:0,y:(this.common.h+this.common.t-me.obj[i].height)/2+(this.common.t)/2},
                {x:this.common.w-me.obj[i].width,y:(this.common.h+this.common.t-me.obj[i].height)/2+(this.common.t)/2},
                {x:0,y:this.common.h+this.common.t-me.obj[i].height},
                {x:this.common.w-me.obj[i].width,y:this.common.h+this.common.t-me.obj[i].height}
            ];
            this.style="object"==typeof me.obj[i].style?{x:me.obj[i].style.left,y:me.obj[i].style.top+this.common.t}:{x:this.position[i][me.obj[i].style].x,y:this.position[i][me.obj[i].style].y};
            $(me.obj[i].id).style.left=this.style.x+"px";
            $(me.obj[i].id).style.top=this.style.y+"px";
        }
    }
    this.start=window.scroll(1,1);
};
</script>
</head>
<body>
<div id="a" style="border:1px solid red;width:100px;height:100px;">aaaaaaaaaaa</div>
<div id="b" style="border:1px solid red;width:100px;height:100px;">bbbbbbbbbbb</div>
<div id="c" style="border:1px solid red;width:100px;height:100px;">ccccccccccc</div>
<div id="d" style="border:1px solid red;width:100px;height:100px;">ddddddddddd</div>
<div id="e" style="border:1px solid red;width:100px;height:100px;">eeeeeeeeeee</div>
<div id="f" style="border:1px solid red;width:100px;height:100px;">fffffffffff</div>
<div id="g" style="border:1px solid red;width:100px;height:100px;">ggggggggggg</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<script type="text/javascript">
var a=new AutoScroll();
a.Build(
{id:"a",style:0},
{id:"b",style:1},
{id:"c",style:2},
{id:"d",style:3},
{id:"e",style:4},
{id:"f",style:5},
{id:"g",style:{left:300,top:200}}
);
</script>
</body>
</html>
<script>
var mvtWidth=130  //框架宽度
var mvtHeight=120  //框架高度brOK=navigator.javaEnabled()?true:false
ns4=(document.layers)?true:false
ie4=(document.all)?true:falseif(ns4){
document.write('<layer id="mvt" width=40 height=60;"><form method="post" action="search.asp"> <input type="text" size="20"> <input type="button" value="Search"/></form><\/layer>');
}
else{
document.write('<div id="mvt" style="position:absolute; width:40; height:60;"><form method="post" action="search.asp"><input type="text" size="20"><input type="button" value="Search"/></form><\/div>');
}var vmin=2;
var vmax=5;
var vr=2;
var timer1;function Chip(chipname,width,height)
{this.named=chipname;
this.vx=vmin+vmax*Math.random();
this.vy=vmin+vmax*Math.random();
this.w=width;
this.h=height;
this.xx=0;
this.yy=0;
this.timer1=null;
}function movechip(chipname)
{
if(brOK)
     {eval("chip="+chipname);
     if(ns4)
     {pageX=window.pageXOffset;
           pageW=window.innerWidth;
           pageY=window.pageYOffset;
           pageH=window.innerHeight;
     }
     else
     {pageX=window.document.documentElement.scrollLeft;
           pageW=window.document.documentElement.offsetWidth-8;
           pageY=window.document.documentElement.scrollTop;
           pageH=window.document.documentElement.offsetHeight;
     }     chip.xx=chip.xx+chip.vx;
     chip.yy=chip.yy+chip.vy;     chip.vx+=vr*(Math.random()-0.5);
     chip.vy+=vr*(Math.random()-0.5);
     if(chip.vx>(vmax+vmin))      chip.vx=(vmax+vmin)*2-chip.vx;
     if(chip.vx<(-vmax-vmin)) chip.vx=(-vmax-vmin)*2-chip.vx;
     if(chip.vy>(vmax+vmin))      chip.vy=(vmax+vmin)*2-chip.vy;
     if(chip.vy<(-vmax-vmin)) chip.vy=(-vmax-vmin)*2-chip.vy;
     if(chip.xx<=pageX)
           {      chip.xx=pageX;
           chip.vx=vmin+vmax*Math.random();
           }
     if(chip.xx>=pageX+pageW-chip.w)
           {      chip.xx=pageX+pageW-chip.w;
           chip.vx=-vmin-vmax*Math.random();
           }
     if(chip.yy<=pageY)
           {      chip.yy=pageY;
           chip.vy=vmin+vmax*Math.random();
           }
     if(chip.yy>=pageY+pageH-chip.h)
           {      chip.yy=pageY+pageH-chip.h;
           chip.vy=-vmin-vmax*Math.random();
           }     if(ns4){
           eval('document.'+chip.named+'.top ='+chip.yy);
           eval('document.'+chip.named+'.left='+chip.xx);
     }
     else{
           eval('document.all.'+chip.named+'.style.pixelLeft='+chip.xx);
           eval('document.all.'+chip.named+'.style.pixelTop ='+chip.yy);
     }
     chip.timer1=setTimeout("movechip('"+chip.named+"')",100);            //设置速度，数值越大速度越慢
     }
}function stopme(chipname)
{if(brOK)
     {//alert(chipname)
     eval("chip="+chipname);
     if(chip.timer1!=null)
     {clearTimeout(chip.timer1)}
     }
}var mvt;
function mvt()
{
     mvt=new Chip("mvt",60,80);
     if(brOK){
           movechip("mvt");
     }
}window.onload=mvt</script>呵呵，试试吧
呵呵，还好这以前也写过个<!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>
<title>飘动图片</title>
<script type="text/javascript">
/*
* Copyright (C) 2007-2008 skylark
* Mail:[email protected]
* WebSite:http://www.webshow.net.cn
* FunctionName:FloatImg
* Using Example:var f=new FloatImg({obj:"img",x:0,y:100,s:1,d:30});f.start("f");
*/
function FloatImg(){
    if("object"!=typeof arguments)return;
    this.arg=arguments[0];
    this.step=this.arg.s||1;
    this.delay=this.arg.d||60;
    this.zone={w:0,h:0};
    this.pos={x:this.arg.x||0,y:this.arg.y||0};
    this.offset={w:0,h:0};
    this.on={x:0,y:0};
    this.obj="string"==typeof this.arg.obj?document.getElementById(this.arg.obj):this.arg.obj;
    this.obj.style.top=this.pos.y+"px";
    this.obj.style.left=this.pos.x+"px";
    this.obj.style.zIndex=1000;
}
FloatImg.prototype.handler=function(){
    /*
     *  如果页面不遵循W3C标准则需使用如下参数
     *  if unusing: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     *  set: this.zone.w=document.body.clientWidth;
     *  set: this.zone.h=document.body.clientHeight;
     */
    this.zone.w=document.body.offsetWidth;
    this.zone.h=document.documentElement.clientHeight;
    this.offset.h=this.obj.offsetHeight;
    this.offset.w=this.obj.offsetWidth;
    this.pos.x=this.on.x?this.pos.x+this.step:this.pos.x-this.step;
    this.pos.y=this.on.y?this.pos.y+this.step:this.pos.y-this.step;
    if(this.pos.x<0){this.on.x=1;this.pos.x=0;}
    if(this.pos.x>=(this.zone.w-this.offset.w)){this.on.x=0;this.pos.x=(this.zone.w-this.offset.w);}
    if(this.pos.y<0){this.on.y=1;this.pos.y=0;}
    if(this.pos.y>=(this.zone.h-this.offset.h)){this.on.y=0;this.pos.y=(this.zone.h-this.offset.h);}
    this.obj.style.left=this.pos.x+(document.documentElement.offsetLeft||document.body.offsetLeft)+"px";
    this.obj.style.top=this.pos.y+(document.documentElement.scrollTop||document.body.scrollTop)+"px";
};
FloatImg.prototype.start=function(o){
    setInterval(o+".handler()", this.delay);
}
</script>
</head>
<body>
<img id="img" src="http://www.csdn.net/Images/logo_csdn.gif" style="border:0;position:absolute;" alt=""/>
<script type="text/javascript">
var f = new FloatImg({obj:"img",x:550,y:300});
f.start("f");
</script>
</body>
</html>
<script>
function aa(chipname,width,height){
form2.submit();
}
var mvtWidth=130  //框架宽度
var mvtHeight=120  //框架高度brOK=navigator.javaEnabled()?true:false
ns4=(document.layers)?true:false
ie4=(document.all)?true:falseif(ns4){
document.write('<layer id="mvt" width=40 height=60;"><form method="post" action="search.asp"> <input type="text" size="20"> <input type="button" value="Search" onclick="aa()"/></form><\/layer>');
}
else{
document.write('<div id="mvt" style="position:absolute; width:40; height:60;"><form method="post" action="search.asp" name="form2"><input type="text" size="20"><input type="button" value="Search" onclick="aa()"/></form><\/div>');
}var vmin=2;
var vmax=5;
var vr=2;
var timer1;function Chip(chipname,width,height)
{this.named=chipname;
this.vx=vmin+vmax*Math.random();
this.vy=vmin+vmax*Math.random();
this.w=width;
this.h=height;
this.xx=0;
this.yy=0;
this.timer1=null;
}function movechip(chipname)
{
if(brOK)
     {eval("chip="+chipname);
     if(ns4)
     {pageX=window.pageXOffset;
           pageW=window.innerWidth;
           pageY=window.pageYOffset;
           pageH=window.innerHeight;
     }
     else
     {pageX=window.document.documentElement.scrollLeft;
           pageW=window.document.documentElement.offsetWidth-8;
           pageY=window.document.documentElement.scrollTop;
           pageH=window.document.documentElement.offsetHeight;
     }     chip.xx=chip.xx+chip.vx;
     chip.yy=chip.yy+chip.vy;     chip.vx+=vr*(Math.random()-0.5);
     chip.vy+=vr*(Math.random()-0.5);
     if(chip.vx>(vmax+vmin))      chip.vx=(vmax+vmin)*2-chip.vx;
     if(chip.vx<(-vmax-vmin)) chip.vx=(-vmax-vmin)*2-chip.vx;
     if(chip.vy>(vmax+vmin))      chip.vy=(vmax+vmin)*2-chip.vy;
     if(chip.vy<(-vmax-vmin)) chip.vy=(-vmax-vmin)*2-chip.vy;
     if(chip.xx<=pageX)
           {      chip.xx=pageX;
           chip.vx=vmin+vmax*Math.random();
           }
     if(chip.xx>=pageX+pageW-chip.w)
           {      chip.xx=pageX+pageW-chip.w;
           chip.vx=-vmin-vmax*Math.random();
           }
     if(chip.yy<=pageY)
           {      chip.yy=pageY;
           chip.vy=vmin+vmax*Math.random();
           }
     if(chip.yy>=pageY+pageH-chip.h)
           {      chip.yy=pageY+pageH-chip.h;
           chip.vy=-vmin-vmax*Math.random();
           }     if(ns4){
           eval('document.'+chip.named+'.top ='+chip.yy);
           eval('document.'+chip.named+'.left='+chip.xx);
     }
     else{
           eval('document.all.'+chip.named+'.style.pixelLeft='+chip.xx);
           eval('document.all.'+chip.named+'.style.pixelTop ='+chip.yy);
     }
     chip.timer1=setTimeout("movechip('"+chip.named+"')",100);            //设置速度，数值越大速度越慢
     }
}function stopme(chipname)
{if(brOK)
     {//alert(chipname)
     eval("chip="+chipname);
     if(chip.timer1!=null)
     {clearTimeout(chip.timer1)}
     }
}var mvt;
function mvt()
{
     mvt=new Chip("mvt",60,80);
     if(brOK){
           movechip("mvt");
     }
}window.onload=mvt</script>应该满足你了
鼠标放在停住的话你加一个鼠标事件就可以了，背景图片也可以，因为他是DIV的，DIV本来就可以放背景图片
if(ns4){
document.write('<layer id="mvt" width=40 height=60;"><form method="post" action="search.asp" onmouseover=stopme("mvt") onmouseout=movechip("mvt")> <input type="text" size="20"> <input type="button" value="Search" onclick="aa()"/></form><\/layer>');
}
else{
document.write('<div id="mvt" style="position:absolute; width:40; height:60;" onmouseover=stopme("mvt") onmouseout=movechip("mvt")><form method="post" action="search.asp" name="form2"><input type="text" size="20"><input type="button" value="Search" onclick="aa()"/></form><\/div>');
}看到了没function stopme(chipname)
{if(brOK)
     {//alert(chipname)
     eval("chip="+chipname);
     if(chip.timer1!=null)
     {clearTimeout(chip.timer1)}
     }
}这个就是停止函数啊

200分 网页漂浮搜索栏

解决方案 »

200分网页漂浮搜索栏