制作网页右侧或者左侧的图片，随着滚动条上下滑动的效果。 

<!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=gb2312" />
<title>左右侧随滚动条实例js代码</title>
</head>

<body>



<div style="width:500px;height:500px"></div>


<SCRIPT LANGUAGE="JavaScript">
<!--
function jMsg() { }
jMsg.prototype.msgDIV = function() {
    //动态计算浮动滚动条的位置
    lastScrollY = 0;
    var beat = function() {
        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("msgDiv").style.top = parseInt(document.getElementById("msgDiv").style.top) + percent + "px";
        lastScrollY = lastScrollY + percent;
    }
    msgDivCode = "<div id=\"msgDiv\" style='text-align:center; width:114px; height:126px;background:url(../images/logo1.png) no-repeat;z-index:2010; right:15px; top:520px; position:absolute; padding:100px 0px 0 2px; '></div>";
    document.write(msgDivCode);
    window.setInterval(beat, 120);
}
jMsg.prototype.msgDIVleft = function() {
    //动态计算浮动滚动条的位置
    lastScrollY = 0;
    var beat = function() {
        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("msgDivleft").style.top = parseInt(document.getElementById("msgDivleft").style.top) + percent + "px";
        lastScrollY = lastScrollY + percent;
    }
    msgDivCode = "<div id=\"msgDivleft\" style='text-align:center; width:140px; height:280px;z-index:2010; left:15px; top:520px; position:absolute; padding:100px 0px 0 2px; '><img style='max-height:100%; max-width:100%;' src='../images/logo1.png' /></div>";
    <!--在这里做的时候出现了问题，因为给了一张很大的图片，然后说不用修剪，直接把这个图片缩小就可以，这里才加的img标签，通过利用 img 的style max-height:100% width:100%来通过把图片缩小，固定外围的div，这时候就会显示外层div大小的图片20150506记录 -->
document.write(msgDivCode);
    window.setInterval(beat, 120);
}
var $jMsg = new jMsg();
$jMsg.msgDIV();
$jMsg.msgDIVleft();
//-->
</SCRIPT>
</body>
</html>

这段代码有左右两侧的随滚动条的区块。

具体效果如下图所示

posted @ 2015-05-06 14:34  风儿风儿飞  阅读(2184)  评论(0)  编辑  收藏  举报