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

<!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="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; 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; 140px; height:280px;z-index:2010; left:15px; top:520px; position:absolute; padding:100px 0px 0 2px; '><img style='max-height:100%; max-100%;' src='../images/logo1.png' /></div>";
    <!--在这里做的时候出现了问题，因为给了一张很大的图片，然后说不用修剪，直接把这个图片缩小就可以，这里才加的img标签，通过利用 img 的style max-height:100% 100%来通过把图片缩小，固定外围的div，这时候就会显示外层div大小的图片20150506记录 -->
document.write(msgDivCode);
    window.setInterval(beat, 120);
}
var $jMsg = new jMsg();
$jMsg.msgDIV();
$jMsg.msgDIVleft();
//-->
</SCRIPT>
</body>
</html>

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

具体效果如下图所示

相关阅读:
Python 之nmap模块问题解决
 phpstudy --mysql支持外联。
Kali 更新
 Win 10 访问IPV6地址问题。
Macbookpro 使用Parallels Deskop安装kali Parallels Tools
Windows 转 Mac 利用git继续管理github
shell脚本移植问题（windwos移植到linux）
APP测试项总结
 apktool 反编译
 微信小程序-服务器返回数据中包含有换行符失效问题解决方案
原文地址：https://www.cnblogs.com/woxiangxintj/p/4481952.html