您的位置：农牧网资源中心 >> 网页特效 >> 背景特效 >> 阅读资讯：滚动条调制并改变背景的特效

滚动条调制并改变背景的特效

[ 来源：不详 | 作者：佚名 | 时间：2007-6-10 11:00:49 | 收藏本文 ]

<div id="NewsContentLabel" class="NewsContent">提示:点击代码可以查看效果<html><title>免费<a target="_blank" href="http://www.newasp.cn/" class="UBBWordLink">网络</a>－网页特效－滚动条调制并改变背景的特效</title><head><STYLE type=text/css>BODY { MARGIN: 25px 25px 25px}#all TD { FONT-SIZE: 12px; LINE-HEIGHT: 15px; FONT-FAMILY: Verdana, Arial,新宋体, 宋体}INPUT { FONT-SIZE: 12px; LINE-HEIGHT: 15px; FONT-FAMILY: Verdana, Arial,新宋体, 宋体}SELECT { FONT-SIZE: 12px; LINE-HEIGHT: 15px; FONT-FAMILY: Verdana, Arial,新宋体, 宋体}P { FONT-SIZE: 12px; LINE-HEIGHT: 15px; FONT-FAMILY: Verdana, Arial,新宋体, 宋体}TEXTAREA { FONT-SIZE: 12px; LINE-HEIGHT: 15px; FONT-FAMILY: Verdana, Arial,新宋体, 宋体}#all A:active { COLOR: #7d070c}#all A:visited { COLOR: #7d070c}#all A:hover { COLOR: #336699}#all A:link { COLOR: #7d070c}</STYLE><SCRIPT language=JavaScript></SCRIPT><META content=Microsoft FrontPage 6.0 name=GENERATOR><style>.drag { CURSOR: hand; POSITION: relative}</style></HEAD><BODY id=all text=#000000 bgColor=#336699>      <table width=100% border=0 cellpadding=8 height=124>        <tr>           <td align=center height=17>           </td>        </tr>        <tr>           <td bgcolor=#f7f7f7 height=71>             <p>              <script language=JavaScript1.2>// Slider script by Ronald H. Jankowsky (http://www.freewl.com), parts of code (draglayer, movelayer) by DynamicDrive.com// This script is free for use, please leave this notice intactvar sPosition;var showPerc=100;document.onmousedown=dragLayerdocument.onmouseup=new Function(dragMe=false)var Color= new Array();Color[0] = 00;Color[1] = 11;Color[2] = 22;Color[3] = 33;Color[4] = 44;Color[5] = 55;Color[6] = 66;Color[7] = 77;Color[8] = 88;Color[9] = 99;Color[10] = AA;Color[11] = BB;Color[12] = CC;Color[13] = DD;Color[14] = EE;Color[15] = FF;// Demofunction to change bg-color by moving slidervar rVal,gVal,bVal, cColfunction chgBg() { cCol = document.bgColor; rVal=cCol.substr(1,2); gVal=cCol.substr(3,2); bVal=cCol.substr(5,2); ind = Math.round(showPerc/16); if (ind < 0) ind = 0; if (ind > 15) ind=15;// If more sliders are used, each of them has to be handled separately if (kObj.id ==knobImg) document.bgColor=#+Color[ind]+gVal+bVal; if (kObj.id ==knobImg1)  document.bgColor=#+rVal+Color[ind]+bVal; if (kObj.id ==knobImg2)  document.bgColor=#+rVal+gVal+Color[ind];}// Drag and move engine (original code by DynamicDrive.com), dont change unless explicitely indicatedvar dragMe=false, kObj, yPos,directionfunction moveLayer() {if (event.button==1 && dragMe) { oldY = kObj.style.pixelTop; kObj.style.pixelTop=temp2+event.clientY-yPos; // Limit movement of knob to stay inside layer if (kObj.style.pixelTop > oldY) direction=dn; else direction=up; if (kObj.style.pixelTop < 2 && direction==up) {kObj.style.pixelTop=2; direction=dn;} if (kObj.style.pixelTop > 102 && direction==dn) {kObj.style.pixelTop=102; direction=up;}// Set working variable showPerc depending on 100 or 250 scaling sPosition=kObj.style.pixelTop; showPerc = (perCent[0].checked) ? sPosition-2 : (sPosition-2)/2*5; // The following line should be replaced by the function-call with the actual task to perform chgBg();  return false; }}function dragLayer() {if (!document.all) return;if (event.srcElement.className==drag) {dragMe=true; kObj=event.srcElement; temp2=kObj.style.pixelTop; yPos=event.clientY; document.onmousemove=moveLayer; }}</script>              提示:这是一个颜色的调节器，现在本例子只简单的改变了背景的颜色，你完全可以将这使用方法应用到如聊天室的字体颜色等程序上，可以让你的应用增添色彩.<script language=JavaScript>document.write(<font color=#7d070c style=\font-size: 14px\>+document.title+</font>);</script><input type=radio value=false name=perCent>              Prozent                <input type=radio CHECKED value=true  name=perCent>               255</p>             <div id=outerLyr  style=Z-INDEX: 1; LEFT: 233px; WIDTH: 23px; POSITION: absolute; TOP: 111px; HEIGHT: 120px; BACKGROUND-COLOR: #000000><img  class=drag id=knobImg  style=Z-INDEX: 3; LEFT: 2px; WIDTH: 20px; TOP: 100px; HEIGHT: 17px  src=../tempimgs/js/knob.jpeg>                <div id=innerLyr  style=Z-INDEX: 2; LEFT: 2px; WIDTH: 20px; POSITION: absolute; TOP: 2px; HEIGHT: 117px; BACKGROUND-COLOR: #777777>                  <div id=barLyr  style=Z-INDEX: 1; LEFT: 9px; WIDTH: 2px; POSITION: absolute; TOP: 5px; HEIGHT: 110px; BACKGROUND-COLOR: #000000></div>               </div>             </div>             <div id=outerLyr1  style=Z-INDEX: 1; LEFT: 268px; WIDTH: 23px; POSITION: absolute; TOP: 111px; HEIGHT: 120px; BACKGROUND-COLOR: #000000><img  class=drag id=knobImg1  style=Z-INDEX: 3; LEFT: 2px; WIDTH: 20px; TOP: 100px; HEIGHT: 17px  src=../tempimgs/js/knob.jpeg>                <div id=innerLyr1  style=Z-INDEX: 2; LEFT: 2px; WIDTH: 20px; POSITION: absolute; TOP: 2px; HEIGHT: 117px; BACKGROUND-COLOR: #777777>                  <div id=barLyr1  style=Z-INDEX: 1; LEFT: 9px; WIDTH: 2px; POSITION: absolute; TOP: 5px; HEIGHT: 110px; BACKGROUND-COLOR: #000000></div>               </div>             </div>             <div id=outerLyr2  style=Z-INDEX: 1; LEFT: 300px; WIDTH: 23px; POSITION: absolute; TOP: 111px; HEIGHT: 120px; BACKGROUND-COLOR: #000000><img  class=drag id=knobImg2  style=Z-INDEX: 3; LEFT: 2px; WIDTH: 20px; TOP: 100px; HEIGHT: 17px  src=../tempimgs/js/knob.jpeg>                <div id=innerLyr2  style=Z-INDEX: 2; LEFT: 2px; WIDTH: 20px; POSITION: absolute; TOP: 2px; HEIGHT: 117px; BACKGROUND-COLOR: #777777>                  <div id=barLyr2  style=Z-INDEX: 1; LEFT: 9px; WIDTH: 2px; POSITION: absolute; TOP: 5px; HEIGHT: 110px; BACKGROUND-COLOR: #000000></div>               </div>                            </div>           </td>         </tr>       </table> </head></html> </div><div id="Message" class="Message"></div>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

[] [返回上一页] [打印]