JQ插件jkscroll应用到页面中的效果 IE下运行后，刷新。 <!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" xml:lang="en"> <head> <title>豪情信息管理系统--滚动条</title> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <link rel="stylesheet" href="https://files.cnblogs.com/jikey/ui.jkscroll.css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script type="text/javascript" src="https://files.cnblogs.com/jikey/jquery.jkscroll.js"></script> <BGSOUND CEP="0" /> <BGSOUND CEP="1" /> <style type="text/css"> *{margin:0;padding:0;} body{font:12px/21px arial;background:#fff;} a{color:#000;text-decoration:none;} a:hover{color:#c00;text-decoration:underline;} .el_wrap{100%;padding-top:5px;} .jk-scrolldemo{700px;padding:1px;margin:20px auto;border:1px solid #ccc;background:#fff;} .cont{height:800px;} .el_header{background:#79c2f5;height:80px;line-height:80px;} .sys_logo{color:#fff;font-size:22px;font-family:微软雅黑;padding-left:20px;} .el_sidebar{position:relative;float:left;300px;background:#fff;border:1px solid #a7b7d1;} .el_sidecont{100%;height:550px;overflow:hidden;} .el_main{margin-left:310px;height:550px;border:1px solid #ccc;background:#fff;} .el_menu{zoom:1;} .el_menu li h1{line-height:30px;background:url(http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/themes/claro/layout/images/accordion.png) repeat-x #f0f0f0;border-bottom:1px solid #ccc;} .el_menu li h1 a{display:block;height:30px;line-height:30px;padding-left:1em;font-size:14px;zoom:1;} .el_menu li ul{} .el_menu li ul li{100%;border:1px solid #d0e7c5;background:#F0FBEB;margin-bottom:5px;} .el_menu li ul li a{display:block;height:25px;line-height:25px;margin-top:5px;padding-left:3em;background:url(http://www.edojs.com/scripts/edo/res/images/icons/node.png) no-repeat 18px;} .el_submenu{padding:5px;zoom:1;} .el_submenu a{display:block;height:25px;line-height:25px;margin-top:5px;padding-left:3em;background:url(http://www.edojs.com/scripts/edo/res/images/icons/node.png) no-repeat 18px #F0FBEB;border:1px solid #d0e7c5;} .el_submenu a:hover{background:url(http://www.edojs.com/scripts/edo/res/images/icons/node.png) no-repeat 18px #fbfbda;text-decoration:none;zoom:1;} .el_main_cont{padding:10px;line-height:15px;overflow:hidden;} .el_main_cont h2{margin:20px 0;} .el_main_cont h3{margin:30px 0 10px;} .ele_text_res{color:#666;} </style> </head> <body> <div class="el_header"> <div class="sys_logo">电子信息管理系统</div> </div> <div class="el_wrap"> <div class="el_sidebar"> <div class="el_sidecont"> <ul class="el_menu"> <li> <h1><a href="#">菜单一</a></h1> <ul> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> </ul> </li> <li> <h1><a href="#">菜单一</a></h1> <ul> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> </ul> </li> <li> <h1><a href="#">菜单一</a></h1> <ul> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> </ul> </li> <li> <h1><a href="#">菜单一</a></h1> <ul> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> </ul> </li> <li> <h1><a href="#">菜单一</a></h1> <ul> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> </ul> </li> <li> <h1><a href="#">菜单一</a></h1> <ul> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> </ul> </li> <li> <h1><a href="#">菜单一</a></h1> <ul> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> </ul> </li> <li> <h1><a href="#">菜单一</a></h1> <ul> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> </ul> </li> <li> <h1><a href="#">菜单一</a></h1> <ul> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> </ul> </li> <li> <h1><a href="#">菜单一</a></h1> <ul> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> </ul> </li> <li> <h1><a href="#">菜单一</a></h1> <ul> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> </ul> </li> </ul> </div> </div> <div class="el_main"> <div class="el_main_cont"> <h2>春江花月夜</h2> <p>春江潮水连海平，海上明月共潮生。</p> <p>滟滟随波千万里，何处春江无月明。</p> <p>江流宛转绕芳甸，月照花林皆似霰。</p> <p>空里流霜不觉飞，汀上白沙看不见。</p> <p>江天一色无纤尘，皎皎空中孤月轮。</p> <p>江畔何人初见月？江月何年初照人？</p> <p>人生代代无穷已，江月年年望相似。</p> <p>不知江月待何人，但见长江送流水。</p> <p>白云一片去悠悠，青枫浦上不胜愁。</p> <p>谁家今夜扁舟子？何处相思明月楼？</p> <p>可怜楼上月徘徊，应照离人妆镜台。</p> <p>玉户帘中卷不去，捣衣砧上拂还来。</p> <p>此时相望不相闻，愿逐月华流照君。</p> <p>鸿雁长飞光不度，鱼龙潜跃水成文。</p> <p>昨夜闲潭梦落花，可怜春半不还家。</p> <p>江水流春去欲尽，江潭落月复西斜。</p> <p>斜月沉沉藏海雾，碣石潇湘无限路。</p> <p>不知乘月几人归，落月摇情满江树。</p> <h3>译文：</h3> <div class="ele_text_res"> <p>春天的江潮水势浩荡，与大海连成一片，一轮明月从海上升起，好像与潮水一起涌出来。</p> <p>月光照耀着春江，随着波浪闪耀千万里，所有地方的春江都有明亮的月光。</p> <p>江水曲曲折折地绕着花草丛生的原野流淌，月光照射着开遍鲜花的树林好像细密的雪珠在闪烁。</p> <p>月色如霜，所以霜飞无从觉察。洲上的白沙和月色融合在一起，看不分明。</p> <p>江水、天空成一色，没有一点微小灰尘，明亮的天空中只有一轮孤月高悬空中。</p> <p>江边上什么人最初看见月亮，江上的月亮哪一年最初照耀着人？</p> <p>人生一代代地无穷无尽，只有江上的月亮一年年地总是相像。</p> <p>不知江上的月亮等待着什么人，只见长江不断地一直运输着流水。</p> <p>游子像一片白云缓缓地离去，只剩下思妇站在离别的青枫浦不胜忧愁。</p> <p>哪家的游子今晚坐着小船在漂流？什么地方有人在明月照耀的楼上相思？</p> <p>可怜楼上不停移动的月光，应该照耀着离人的梳妆台。</p> <p>月光照进思妇的门帘，卷不走，照在她的捣衣砧上，拂不掉。</p> <p>这时互相望着月亮可是互相听不到声音，我希望随着月光流去照耀着您。</p> <p>鸿雁不停地飞翔，而不能飞出无边的月光；月照江面，鱼龙在水中跳跃，激起阵阵波纹。</p> <p>（此二句写月光之清澈无边，也暗含鱼雁不能传信之意。）</p> <p>昨天晚上随意谈着梦中落下的花，可惜的是春天过了一半还不能回家。</p> <p>江水带着春光将要流尽，水潭上的月亮又要西落。</p> <p>斜月慢慢下沉，藏在海雾里，碣石与潇湘的离人距离无限遥远。</p> <p>不知有几人能趁着月光回家，唯有那西落的月亮摇荡着离情，洒满了江边的树林。</p> </div> </div> </div> </div> <script type="text/javascript"> $(function(){ //滚动条调用 $('.el_sidecont').jkScrollBar({ pattern:'jkscroll-simple' }); $('.el_main').jkScrollBar({ pattern:'jkscroll-blue', iframe: '#el_frame' }); }); </script> <BGSOUND CEP="2" /> </body> </html> 运行代码