javascript 动态设置div层固定位置效果

发布时间：2018-09-16 15:08:35 所属栏目：活动来源：站长网

导读：烈14火64网(LieHuo38.Net)网页特效教68程动态设定一个固定层的位置，并不随滚动条的滚动而变化，可适时设定层的X/Y位置，当你拖动滚动条的时候，它并不会变化，一个参考例子吧，或许对你有用处。实例效果： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0

　　烈14火64网(LieHuo38.Net)网页特效教68程动态设定一个固定层的位置，并不随滚动条的滚动而变化，可适时设定层的X/Y位置，当你拖动滚动条的时候，它并不会变化，一个参考例子吧，或许对你有用处。

　　实例效果：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=gbk" /> <title>Fixed position定位 </title> <style type="text/css"> body { font-size:12px; margin:0; } #posBlock { margin:0; border:4px solid #D2E2F4; width:480px; line-height:22px; background:#F0F5FB; color:#555555; font-size:12px; } #content { width:500px; line-height:22px; padding:5px; } #testBlock { border:1px solid #D2E2F4; background:#F0F5FB; width:300px; padding:5px; } </style> <script type="text/javascript"> var fixedPosition = function(element ,top ,left){ if (!window.XMLHttpRequest && window.ActiveXObject) { element.style.position = "absolute"; fixedPosition.setGlobal(); } else { element.style.position = "fixed"; } element.style.top = top +"px"; element.style.left = left +"px"; }; /*添加css规则*/ fixedPosition.addCSSRule = function(key ,value){ var css = document.styleSheets[document.styleSheets.length-1]; css.cssRules ? (css.insertRule(key +"{"+ value +"}", css.cssRules.length)) : (css.addRule(key ,value)); }; /*标志特定公共规则是否存在*/ fixedPosition.inited = false; /*设置特定公共规则*/ fixedPosition.setGlobal = function(){ if (! fixedPosition.inited) { document.body.style.height = "100%"; document.body.style.overflow = "auto"; fixedPosition.addCSSRule("*html" ,"overflow-x:auto;overflow-y:hidden;"); fixedPosition.inited = true; } }; </script> <script type="text/javascript"> //<![CDATA[ var $ = function(id){ return document.getElementById(id); }; var setPosition = function(){ try { var x = parseInt($("x_").value); var y = parseInt($("y_").value); fixedPosition($("posBlock") ,y ,x); } catch (e) { alert("请输入数字"); } }; //]]> </script> </head> <body> <h5 id="posBlock">#posBlock 我就在这里，是不会跟着滚动条的变化而变化的。</h5> <div id="testBlock"> 重新设定#posBlock位置 x: <input type="text" id="x_" /> y: <input type="text" id="y_" /> <input type="button" value="设定" onclick="setPosition()" /> </div> <script> fixedPosition($("posBlock") ,150 ,5); fixedPosition($("testBlock") ,250 ,350); </script> 烈火.net.liehuo学院(www.veryhuo.com) 烈火.net.liehuo学院(www.veryhuo.com) 烈火.net.liehuo学院(www.veryhuo.com) 烈火.net.liehuo学院(www.veryhuo.com) 烈火.net.liehuo学院(www.veryhuo.com) 烈火.net.liehuo学院(www.veryhuo.com) 烈火.net.liehuo学院(www.veryhuo.com) 烈火.net.liehuo学院(www.veryhuo.com) 烈火.net.liehuo学院(www.veryhuo.com) 烈火.net.liehuo学院(www.veryhuo.com) 烈火.net.liehuo学院(www.veryhuo.com) 烈火.net.liehuo学院(www.veryhuo.com) 烈火.net.liehuo学院(www.veryhuo.com) 烈火.net.liehuo学院(www.veryhuo.com) 烈火.net.liehuo学院(www.veryhuo.com) 烈火.net.liehuo学院(www.veryhuo.com) 烈火.net.liehuo学院(www.veryhuo.com) 烈火.net.liehuo学院(www.veryhuo.com) 烈火.net.liehuo学院(www.veryhuo.com) 烈火.net.liehuo学院(www.veryhuo.com) 烈火.net.liehuo学院(www.veryhuo.com) 烈火.net.liehuo学院(www.veryhuo.com) 烈火.net.liehuo学院(www.veryhuo.com) 烈火.net.liehuo学院(www.veryhuo.com) 烈火.net.liehuo学院(www.veryhuo.com) 烈火.net.liehuo学院(www.veryhuo.com) <script>fixedPosition($("adBlock") ,450 ,250);</script> </body> </html> <center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：晋江门户网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!