<!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>
这段代码有左右两侧的随滚动条的区块。
具体效果如下图所示
