随机漂浮图片、右侧上下浮动快捷栏JS

随机漂浮图片JS：

//公共脚本文件 main.js
    function addEvent(obj,evtType,func,cap){
        cap=cap||false;
        if(obj.addEventListener){
            obj.addEventListener(evtType,func,cap);
            return true;
        }else if(cap){
            if(document.all){
                obj.setCapture();
            }else{
                document.captureEvents(Event.MOUSEMOVE);
            }
            return true;
        }else if(obj.attachEvent){
            return obj.attachEvent("on" + evtType,func);
        }else{
            return false;
        }
    }
    function removeEvent(obj,evtType,func,cap){
        cap=cap||false;
        if(obj.removeEventListener){
            obj.removeEventListener(evtType,func,cap);
            return true;
        }else if(cap){
            if(document.all){
                obj.releaseCapture();
            }else{
                document.releaseEvents(obj.MOUSEMOVE);
            }
            return true;
        }else if(obj.detachEvent){
            return obj.detachEvent("on" + evtType,func);
        }else{
            return false;
        }
    }
    function getPageScroll(){
        var xScroll,yScroll;
        if (self.pageXOffset) {
            xScroll = self.pageXOffset;
        } else if (document.documentElement && document.documentElement.scrollLeft){
            xScroll = document.documentElement.scrollLeft;
        } else if (document.body) {
            xScroll = document.body.scrollLeft;
        }
        if (self.pageYOffset) {
            yScroll = self.pageYOffset;
        } else if (document.documentElement && document.documentElement.scrollTop){
            yScroll = document.documentElement.scrollTop;
        } else if (document.body) {
            yScroll = document.body.scrollTop;
        }
        arrayPageScroll = new Array(xScroll,yScroll);
        return arrayPageScroll;
    }
    function GetPageSize(){
        var xScroll, yScroll;
        if (window.innerHeight && window.scrollMaxY) {    
            xScroll = document.body.scrollWidth;
            yScroll = window.innerHeight + window.scrollMaxY;
        } else if (document.body.scrollHeight > document.body.offsetHeight){
            xScroll = document.body.scrollWidth;
            yScroll = document.body.scrollHeight;
        } else {
            xScroll = document.body.offsetWidth;
            yScroll = document.body.offsetHeight;
        }
        var windowWidth, windowHeight;
        if (self.innerHeight) {
            windowWidth = self.innerWidth;
            windowHeight = self.innerHeight;
        } else if (document.documentElement && document.documentElement.clientHeight) {
            windowWidth = document.documentElement.clientWidth;
            windowHeight = document.documentElement.clientHeight;
        } else if (document.body) {
            windowWidth = document.body.clientWidth;
            windowHeight = document.body.clientHeight;
        }    
        if(yScroll < windowHeight){
            pageHeight = windowHeight;
        } else { 
            pageHeight = yScroll;
        }
        if(xScroll < windowWidth){    
            pageWidth = windowWidth;
        } else {
            pageWidth = xScroll;
        }
        arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight) 
        return arrayPageSize;
    }
    
    //广告脚本文件 AdMove.js
    /*
    例子
    <div id="Div2">
        ***** content ******
    </div>
    var ad=new AdMove("Div2");
    ad.Run();
    */
    var AdMoveConfig=new Object();
    AdMoveConfig.IsInitialized=false;
    AdMoveConfig.AdCount=0;
    AdMoveConfig.ScrollX=0;
    AdMoveConfig.ScrollY=0;
    AdMoveConfig.MoveWidth=0;
    AdMoveConfig.MoveHeight=0;
    AdMoveConfig.Resize=function(){
        var winsize=GetPageSize();
        AdMoveConfig.MoveWidth=winsize[2];
        AdMoveConfig.MoveHeight=winsize[3];
        AdMoveConfig.Scroll();
    }
    AdMoveConfig.Scroll=function(){
        var winscroll=getPageScroll();
        AdMoveConfig.ScrollX=winscroll[0];
        AdMoveConfig.ScrollY=winscroll[1];
    }
    addEvent(window,"resize",AdMoveConfig.Resize);
    addEvent(window,"scroll",AdMoveConfig.Scroll);
    function AdMove(id,addCloseButton){
        if(!AdMoveConfig.IsInitialized){
            AdMoveConfig.Resize();
            AdMoveConfig.IsInitialized=true;
        }
        AdMoveConfig.AdCount++;
        var obj=document.getElementById(id);
        obj.style.position="absolute";
        var W=AdMoveConfig.MoveWidth-obj.offsetWidth;
        var H=AdMoveConfig.MoveHeight-obj.offsetHeight;
        var x = W*Math.random(),y = H*Math.random();
        var rad=(Math.random()+1)*Math.PI/6;
        var kx=Math.sin(rad),ky=Math.cos(rad);
        var dirx = (Math.random()<0.5?1:-1), diry = (Math.random()<0.5?1:-1);
        var step = 1;
        var interval;
        if(addCloseButton){
            /*var closebtn=document.createElement("div");
            obj.appendChild(closebtn);
            closebtn.style.position="absolute";
            closebtn.style.top="1px";
            closebtn.style.left=(obj.offsetWidth-28) + "px";
            closebtn.style.width="24px";
            closebtn.style.height="12px";
            closebtn.style.borderStyle="solid";
            closebtn.style.borderWidth="1px";
            closebtn.style.borderColor="#000";
            closebtn.style.backgroundColor="#fff";
            closebtn.style.fontSize="12px";
            closebtn.style.color="#000";
            closebtn.style.cursor="pointer";
            closebtn.innerHTML="关闭";
            closebtn.onclick=function(){
                clearInterval(interval);
                closebtn.onclick=null;
                obj.onmouseover=null;
                obj.onmouseout=null;
                obj.MoveHandler=null;
                AdMoveConfig.AdCount--;
                if(AdMoveConfig.AdCount<=0){
                    removeEvent(window,"resize",AdMoveConfig.Resize);
                    removeEvent(window,"scroll",AdMoveConfig.Scroll);
                    AdMoveConfig.Resize=null;
                    AdMoveConfig.Scroll=null;
                    AdMoveConfig=null;
                }
                obj.removeChild(closebtn);
                obj.style.overflow="hidden";
                setTimeout(function(){CloseIt(obj);},0);
            }*/
            /*var movebtn=document.createElement("div");
            obj.appendChild(movebtn);
            movebtn.style.position="absolute";
            movebtn.style.top="1px";
            movebtn.style.left=(obj.offsetWidth-56) + "px";
            movebtn.style.width="24px";
            movebtn.style.height="12px";
            movebtn.style.borderStyle="solid";
            movebtn.style.borderWidth="1px";
            movebtn.style.borderColor="#000";
            movebtn.style.backgroundColor="#fff";
            movebtn.style.fontSize="12px";
            movebtn.style.color="#000";
            movebtn.style.cursor="pointer";
            movebtn.innerHTML="移动";
            function BoxMouseMove(e){
                if(movebtn.moveflag){
                    var mx,my;
                    if(e){
                        mx=e.pageX;
                        my=e.pageY;
                    }else{
                        mx=event.x;
                        my=event.y;
                    }
                    x=mx-movebtn.lastleft;
                    y=my-movebtn.lasttop;
                    movebtn.parentNode.style.left = x + "px";
                    movebtn.parentNode.style.top = y + "px";
                }
            }
            movebtn.onmousemove=function(e){
                BoxMouseMove(e);
            }
            movebtn.onmousedown=function(e){
                var mx,my;
                if(e){
                    mx=e.pageX;
                    my=e.pageY;
                }else{
                    mx=event.x;
                    my=event.y;
                }
                addEvent(movebtn,"mousemove",BoxMouseMove,true);
                movebtn.lastleft=mx-parseInt(movebtn.parentNode.offsetLeft);
                movebtn.lasttop=my-parseInt(movebtn.parentNode.offsetTop);
                movebtn.moveflag=true;
                movebtn.style.cursor="move";
                document.onmousemove=movebtn.onmousemove;
                document.onmouseup=movebtn.onmouseup;
            }
            movebtn.onmouseup=function(){
                movebtn.moveflag=false;
                removeEvent(movebtn,"mousemove",BoxMouseMove,true);
                movebtn.style.cursor="pointer";
                document.onmousemove=null;
                document.onmouseup=null;
            }*/
        }
        obj.MoveHandler=function(){
            obj.style.left = (x + AdMoveConfig.ScrollX) + "px";
            obj.style.top = (y + AdMoveConfig.ScrollY) + "px";
            rad=(Math.random()+1)*Math.PI/6;
            W=AdMoveConfig.MoveWidth-obj.offsetWidth;
            H=AdMoveConfig.MoveHeight-obj.offsetHeight;
            x = x + step*kx*dirx;
            if (x < 0){dirx = 1;x = 0;kx=Math.sin(rad);ky=Math.cos(rad);} 
            if (x > W){dirx = -1;x = W;kx=Math.sin(rad);ky=Math.cos(rad);}
            y = y + step*ky*diry;
            if (y < 0){diry = 1;y = 0;kx=Math.sin(rad);ky=Math.cos(rad);} 
            if (y > H){diry = -1;y = H;kx=Math.sin(rad);ky=Math.cos(rad);}
        }
        this.SetLocation=function(vx,vy){x=vx;y=vy;}
        this.SetDirection=function(vx,vy){dirx=vx;diry=vy;}
        this.Run=function(){
            var delay = 10;
            interval=setInterval(obj.MoveHandler,delay);
            obj.onmouseover=function(){clearInterval(interval);document.onmousemove = mouseMove;}
            obj.onmouseout=function(){interval=setInterval(obj.MoveHandler, delay);document.onmousemove = null;}
        }
    }
    function CloseIt(obj){
        var w=parseInt(obj.style.width);
        var h=parseInt(obj.style.height);
        if(isNaN(w))w=3;
        if(isNaN(h))h=3;
        w-=3;
        h-=3;
        if(w<=0&&h<=0){
            obj.style.display="none";
            return;
        }
        if(w>0){
            obj.style.width=w + "px";
        }
        if(h>0){
            obj.style.height=h + "px";
        }
        setTimeout(function(){CloseIt(obj);},2);
    }
    
//判断鼠标点击的范围,确定是超连接还是关闭图片
function isURL()
{
    var image=document.getElementById('showImg');
    var imgX=getLeft(image);
    var imgY=getTop(image);
    var mouseX=event.clientX;
    var mouseY=event.clientY;    
    
    if( ( mouseX>(imgX+$("#showImg").attr("width")-20) && (mouseX<(imgX+$("#showImg").attr("width"))) && 
        ( mouseY>imgY)      && (mouseY<(imgY+20))) 
    )
    {
        var imgUrl=document.getElementById('imgUrl');
        imgUrl.target='_self';
        imgUrl.href='#';
        var div=document.getElementById('img');
        div.style.display="none";
    }
}

function getTop(e)
{
    var offset=e.offsetTop;
    if(e.offsetParent!=null) 
    offset+=getTop(e.offsetParent);
    return offset;
}
//获取图片的横坐标
function getLeft(e)
{
    var offset=e.offsetLeft;
    if(e.offsetParent!=null) 
    offset+=getLeft(e.offsetParent);
    return offset;
}
function mouseMove(ev){
    ev = ev || window.event;
    var img=document.getElementById('showImg');
    var imgX=getLeft(img);
    var imgY=getTop(img);
    var mousePos = mouseCoords(ev);
    var mouseX =mousePos.x;
    var mouseY =mousePos.y;
    
    //window.status="X："+mouseX+" Y："+mouseY+" imgX："+imgX+" imgX："+imgY;
    //当鼠标位置进入到关闭区域的时候,改变鼠标样式
    if( ( mouseX>(imgX+$("#showImg").attr("width")-20) && (mouseX<(imgX+$("#showImg").attr("width"))) && 
        ( mouseY>imgY)      && (mouseY<(imgY+20))) 
    )
    {
        document.getElementById('showImg').style.cursor='hand';
        //document.getElementById('showImg').alt='关闭';
        $("#showImg").attr("title","关闭");
        
    }
    else
    {
        document.getElementById('showImg').style.cursor='default';
        //document.getElementById('showImg').alt='';
        $("#showImg").attr("title","");
    }
}
function mouseCoords(ev)
{
  if(ev.pageX || ev.pageY)
  {
    return {x:ev.pageX, y:ev.pageY};
  }
  return {
    x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
    y:ev.clientY + document.body.scrollTop - document.body.clientTop
  };
}

漂浮图片HTML：

<div id="img" style="z-index: 10; position: absolute; margin: 0px;  180px;
        height: 100px; top: 157px; left: 180px">
    <div>
        <a id="imgUrl" href="<%= strUrls%>" target="_blank">
            <img id="showImg" src="../windowPic/<%= filePath%>" width="180" height="100" border="0"
                name="pic" onclick="isURL();" style="filter: revealtrans(duration=2.0,transition=19)">
            </a>
    </div>
    <iframe src="javascript:false" style="z-index: -1; position: absolute; filter: progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0);
             180px; height: 100px; visibility: inherit; top: 0px; left: 0px; border: 0px;">
    </iframe>
</div>

参考：http://www.sheitc.gov.cn/ 

改动：注释了“移动”、“关闭”功能，将右上角20×20像素设置成关闭按钮区域，鼠标到该区域自动出"关闭"title，点击则关闭随机浮动图片。（用到了jQuery）

使用iframe使浮动图片显示在顶层。

使用示例：

<script type="text/javascript">
    var ad1=new AdMove("img",true);
    ad1.Run();
</script>

 右侧上下浮动窗口JS：

var lastScrollY=0;
function heartBeat(){ 
    var diffY;
    if (document.documentElement && document.documentElement.scrollTop){
        diffY = document.documentElement.scrollTop;
    }
    else if (document.body){
        diffY = document.body.scrollTop;
    }else{
    /*Netscape stuff*/
    }
    percent=.1*(diffY-lastScrollY);
    if(percent>0)percent=Math.ceil(percent);
    else percent=Math.floor(percent);
    document.getElementById("track").style.top=parseInt(document.getElementById("track").style.top)+percent+"px";
    lastScrollY=lastScrollY+percent;
}
                     
window.setInterval(heartBeat,40);

右侧浮动窗口HTML就不贴出了，就是一DIV，ID为“track”，基本CSS为“z-index: 6; position: absolute; height: 150px; _ 210px;right: 0px; top: 242px;”。