随机漂浮图片、右侧上下浮动快捷栏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

  };

}

View Code

漂浮图片HTML：

<div id="img" style="z-index: 10; position: absolute; margin: 0px; width: 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);

            width: 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; _width: 210px;right: 0px; top: 242px;”。