因为在www.wuxuegy.com网站中挂个联系方式的块,所以要手动添加一个滑动的广告条效果, 如图所示

image

右边的广告条会随着滑动

页面代码

1.ad.html

<!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>ad</title>
<script language="javascript" src="http://ajax.css.network/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script language="javascript" src="jquery.dimensions.js"></script>
<script language="javascript" src="ad.js"></script>
<style type="text/css">
    #floatMenu
    {
        font-size:12px;
        position:absolute;       
        top:150px;
        right:50px;
        margin-left:50px;       
        width:240px;       
        }       
</style>
</head>
<body>

<div style="height:900px;"> </div>
<div id="floatMenu"  >
    <table cellpadding=0 cellspacing=0 id=corner class="[3,’blue’,”]">
<tr><td>
<table cellpadding=2 cellspacing=0 id=box class="[1,1]" width=250 height=100>
<tr><td>联系我们</td></tr>
<tr><td valign=top>
内容:<br />
第一行<br />
第二行<br />
第三行<br />
第四行<br />
第五行<br />
第六行<br />

</td></tr>
</table>
</td></tr></table>

<script type="text/javascript" >corner()</script>

</div>

</body>
</html>

2.引用的库文件 jquery.dimensions.js

(function($){
$.dimensions = {
    version: ‘@VERSION’
};

// Create innerHeight, innerWidth, outerHeight and outerWidth methods
$.each( [ ‘Height’, ‘Width’ ], function(i, name){
    // innerHeight and innerWidth
    $.fn[ ‘inner’ + name ] = function() {
        if (!this[0]) return;
        var torl = name == ‘Height’ ? ‘Top’    : ‘Left’,  // top or left
            borr = name == ‘Height’ ? ‘Bottom’ : ‘Right’; // bottom or right
        return this.css(‘display’) != ‘none’ ? this[0][‘client’ + name] : num( this, name.toLowerCase() ) + num(this, ‘padding’ + torl) + num(this, ‘padding’ + borr);
    };
    // outerHeight and outerWidth
    $.fn[ ‘outer’ + name ] = function(options) {
        if (!this[0]) return;
        var torl = name == ‘Height’ ? ‘Top’    : ‘Left’,  // top or left
            borr = name == ‘Height’ ? ‘Bottom’ : ‘Right’; // bottom or right
        options = $.extend({ margin: false }, options || {});
        var val = this.css(‘display’) != ‘none’ ?
                this[0][‘offset’ + name] :
                num( this, name.toLowerCase() )
                    + num(this, ‘border’ + torl + ‘Width’) + num(this, ‘border’ + borr + ‘Width’)
                    + num(this, ‘padding’ + torl) + num(this, ‘padding’ + borr);
        return val + (options.margin ? (num(this, ‘margin’ + torl) + num(this, ‘margin’ + borr)) : 0);
    };
});

// Create scrollLeft and scrollTop methods
$.each( [‘Left’, ‘Top’], function(i, name) {
    $.fn[ ‘scroll’ + name ] = function(val) {
        if (!this[0]) return;
        return val != undefined ?
            // Set the scroll offset
            this.each(function() {
                this == window || this == document ?
                    window.scrollTo(
                        name == ‘Left’ ? val : $(window)[ ‘scrollLeft’ ](),
                        name == ‘Top’  ? val : $(window)[ ‘scrollTop’  ]()
                    ) :
                    this[ ‘scroll’ + name ] = val;
            }) :
            // Return the scroll offset
            this[0] == window || this[0] == document ?
                self[ (name == ‘Left’ ? ‘pageXOffset’ : ‘pageYOffset’) ] ||
                    $.boxModel && document.documentElement[ ‘scroll’ + name ] ||
                    document.body[ ‘scroll’ + name ] :
                this[0][ ‘scroll’ + name ];
    };
});

$.fn.extend({
    position: function() {
        var left = 0, top = 0, elem = this[0], offset, parentOffset, offsetParent, results;
        if (elem) {
            // Get *real* offsetParent
            offsetParent = this.offsetParent();
            // Get correct offsets
            offset       = this.offset();
            parentOffset = offsetParent.offset();
            // Subtract element margins
            offset.top  -= num(elem, ‘marginTop’);
            offset.left -= num(elem, ‘marginLeft’);
            // Add offsetParent borders
            parentOffset.top  += num(offsetParent, ‘borderTopWidth’);
            parentOffset.left += num(offsetParent, ‘borderLeftWidth’);
            // Subtract the two offsets
            results = {
                top:  offset.top  – parentOffset.top,
                left: offset.left – parentOffset.left
            };
        }
        return results;
    },
    offsetParent: function() {
        var offsetParent = this[0].offsetParent;
        while ( offsetParent && (!/^body|html$/i.test(offsetParent.tagName) && $.css(offsetParent, ‘position’) == ‘static’) )
            offsetParent = offsetParent.offsetParent;
        return $(offsetParent);
    }
});

function num(el, prop) {
    return parseInt($.curCSS(el.jquery?el[0]:el,prop,true))||0;
};

})(jQuery);

3.ad.js

var name = "#floatMenu";
    var menuYloc = null;   
        $(document).ready(function(){
            menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px")))
            $(window).scroll(function () {
                offset = menuYloc+$(document).scrollTop()+"px";
                $(name).animate({top:offset},{duration:500,queue:false});
            });
        });

function setcorner(id,r,bo,bg)    {
switch(id){
case 1: x=parseInt("-"+r);xx=-1;y=parseInt("-"+r);yy=-1;break
case 2: x=parseInt("-"+r);xx=-1;y=1;yy=r;break
case 3: x=1;xx=r;y=parseInt("-"+r);yy=-1;break
case 4: x=1;xx=r;y=1;yy=r;break
      }
corner_html="<div style="width:"+r+"px;height:"+r+"px;overflow:hidden">"
for(i=x;i<=xx;i++)    {
for(ii=y;ii<=yy;ii++)    {
rr=i*i+ii*ii-r*r
if(rr<0){color=bg}else{color=""}
if(Math.abs(rr)<r){color=bo}
corner_html+="<img vspace=0 hspace=0 width=1px height=1px style="float:left;background:"+color+"">"
            }
            }
corner_html+="</div>"
return(corner_html)
            }
function corner()
{
corner_table=document.all.tags("table")
for(box_i=0;box_i<corner_table.length;box_i++)
{
if(corner_table[box_i].id=="box")
{corner_table[box_i].id="box_"+box_i}
}
for(corner_i=0;corner_i<corner_table.length;corner_i++) {
if(corner_table[corner_i].id=="corner"){
corner_table[corner_i].id="corner_"+corner_i
corner_id=document.getElementById(corner_table[corner_i].id)
style=eval(corner_id.className)
if(style.length==3){
switch(style[1]){
case "black": bo="#666666";bg="#999999";break
case "blue": bo="#666666";bg="#B2D0EA";break
case "red": bo="#FF3333";bg="#ff9999";break
case "green": bo="#009900";bg="#66cc33";break
case "yellow": bo="#cc9900";bg="#ff9966";break
case "pink": bo="#cc33cc";bg="#ff99ff";break
        }
bc=style[2]
           }
else{bo=style[1];bg=style[2];bc=style[3]}
size=style[0]
corner_img="<img width=1px height=1px>"
corner_id.insertRow(0)
corner_id.insertRow(2)
corner_id.rows[0].insertCell(0)
corner_id.rows[0].insertCell(0)
corner_id.rows[0].insertCell(0)
corner_id.rows[1].insertCell(0)
corner_id.rows[1].insertCell(2)
corner_id.rows[2].insertCell(0)
corner_id.rows[2].insertCell(0)
corner_id.rows[2].insertCell(0)
corner_id.rows[0].cells[1].innerHTML=corner_img
corner_id.rows[1].cells[0].innerHTML=corner_img
corner_id.rows[1].cells[2].innerHTML=corner_img
corner_id.rows[2].cells[1].innerHTML=corner_img
corner_id.rows[0].cells[0].innerHTML=setcorner(1,size,bo,bg)
corner_id.rows[0].cells[2].innerHTML=setcorner(2,size,bo,bg)
corner_id.rows[2].cells[0].innerHTML=setcorner(3,size,bo,bg)
corner_id.rows[2].cells[2].innerHTML=setcorner(4,size,bo,bg)
corner_id.rows[1].cells[1].style.background=bc
corner_id.rows[0].cells[1].style.background=bg
corner_id.rows[1].cells[0].style.background=bg
corner_id.rows[1].cells[2].style.background=bg
corner_id.rows[2].cells[1].style.background=bg
corner_id.rows[0].cells[1].style.borderTop="1px solid "+bo
corner_id.rows[1].cells[0].style.borderLeft="1px solid "+bo
corner_id.rows[1].cells[2].style.borderRight="1px solid "+bo
corner_id.rows[2].cells[1].style.borderBottom="1px solid "+bo
box_id=eval("box_"+(corner_i+1))
box_style=eval(box_id.className)
if(box_style[0]==0){box_id.rows[0].style.display="none"}
box_id.rows[0].style.height="18px"
box_id.rows[0].style.fontWeight="bold"
box_id.rows[0].style.color="#ffffff"
box_id.rows[0].style.background=bg
box_id.rows[1].style.background="#ffffff"
box_id.rows[1].cells[0].style.border=box_style[1]+"px solid "+bo
                                }
                        }
}

 

没有使用图片,直接像ad.html中调用的方式那样调用即可