JQuery——深深地震撼了我

    网页上要做一个在线顾问的功能层，该层要随着网页的滚动而滚动，并且默认是收缩的，只露出一个标题图片。当mouseover时从右侧弹出，而且要有弹出的动感效果。
    我的javascript并不是很好，于是在网上找了一些类似的js代码，自己再修修改改，搞了半天，弄了一两百行代码，终于把这样的效果做出来了，恩，还算有点成就。这是昨天的事情。
    今天手头正好没事，我突然想到了前一阵子接触到的JQuery，于是在网上找到了JQuery API，稍微学习了一下，用了$("#层的id号").show("slow");和$("#层的id号").hide("slow");这两个语句，就把弹出和收缩的效果都完成了，而且相当有动感！是一种令人满意的展开的动感！！Oh,My God!!我被深深地震撼了！一百多行的代码，只需要一句话！这就是传说中的JQuery啊！这就叫新技术的力量！
    明天把我昨天修改完成的JS代码也附上，供有兴趣的人参考。

    顺便向高手们请教个关于IE8下编辑器的问题。我用了FreeTextBox，其它的编辑器，如ewebediter等，我在网上找到了解决的办法，但是FreeTextBox在IE8下无效的问题，我没有找到解决的办法。我试着把js代码修改了一下，在this.ie6，this.ie7等语句的后面，依样画葫芦地添加了一条this.ie8=什么什么，却没有用。哪位高手可以指点一下？？谢谢了先！
   

页面代码
 1 <div id="wrap">
 2         <div id="salecontainer" style="display:none">
 3             <table cellspacing="3" cellpadding="0" class="sc_tb">
 4                 <tr>
 5                     <td colspan="2" class="sc_pic">
 6                         <img src="图片地址" />
 7                     </td>
 8                 </tr>
 9                 <tr>
10                     <td colspan="2" class="sc_name">姓名</td>
11                 </tr>
12                 <tr>
13                     <th class="qq">Q&nbsp;Q：</th>
14                     <td class="qq"><a target="_blank" href="http://wpa.qq.com/msgrd?V=1&Uin=QQ号&Exe=QQ&Site=网站名称&Menu=YES">
15                         <img src="/Content/Autos/images/qq1.gif" border="0" /></a>
16                     </td>
17                 </tr>
18                 <tr>
19                     <th>电话：</th>
20                     <td>88888888</td>
21                 </tr>
22                 <tr>
23                     <th>职务：</th>
24                     <td>销售顾问</td>
25                 </tr>
26                 <tr>
27                     <th>理念：</th>
28                     <td>顾客就是上帝，服务决定一切</td>
29                 </tr>
30             </table>
31         </div>
32         <div id="saletitle">
33             div class="st_open" onmouseover="leftslider.show();document.getElementById('st_close').style.display='';"></div>
34             <div id="st_close" class="st_close" style="display:none;">
35                 <a href="javascript:void(0);" onclick="leftslider.hide();document.getElementById('st_close').style.display='none';">关<br />闭</a>
36             </div>
37         </div>
<script type="text/javascript">
        var leftslider = new slider('salecontainer', 3, 321, 133, 20, 1, 20);
        initFloatTips();
</script>

CSS
 1 #wrap{position:absolute; top:100px; right:0; width:158px; height:321px;}
 2   #salecontainer{float:right; width:133px; height:311px; padding-top:10px; background:url(images/sale2.gif) no-repeat; text-align:center;}
 3     .sc_tb{border:0; width:125px;}
 4     .sc_tb .qq{vertical-align:middle; height:25px; line-height:25px;}
 5     .sc_tb th{width:45px; color:#015dc7; font-weight:normal; vertical-align:top;}
 6     .sc_tb td{width:80px; line-height:16px; text-align:left; vertical-align:top;}
 7     .sc_tb td.sc_pic{width:125px;height:130px; text-align:center;  vertical-align:top;}
 8     .sc_tb td.sc_pic img{border:solid 1px #869eba; width:105px; height:125px;}
 9     .sc_tb td.sc_name{width:125px; height:30px; line-height:30px; font-weight:bold; font-size:14px; color:#015dc7; text-align:center;}
10   
11   #saletitle{float:right; width:25px; height:320px;}
12     .st_open{height:148px;background:url(images/sale1.gif) no-repeat; cursor:pointer;}
13     .st_close{height:38px; padding-top:8px; text-align:center; background:url(images/sale4.gif);}
14     .st_close a:link,.st_close a:visited,.st_close a:active{color:White; text-decoration:none;}
15     .st_close a:hover{color:#FFB463; text-decoration:none; font-weight:bold;}
16   #saletitle img{width:18px; height:37px; border:0;}

JS
  1 //----------------------- 滑动展开效果 -----------------------
  2 slider.names = new Array();
  3 function slider() {
  4     this.id = slider.names.length;
  5     slider.names[this.id] = this;
  6     this.target = document.getElementById(arguments[0]); //第一个参数：被操作div的id
  7     this.direction = arguments[1]; //第二个参数：div弹出的方向
  8     this.height = arguments[2]; //第三个参数：div的高度
  9     this.width = arguments[3]; //第四个参数：div的宽度
 10     this.step = arguments[4]; //第五个参数：希望动作分解为几步完成
 11     this.timer = 10 * arguments[5]; //第六个参数：每个动作的间隔时间，10ms为一个单位
 12     this.startopa = arguments[6]; //第七个参数：div开始的透明度
 13     this.sparent = this.target.parentNode; //获取操作div的父容器
 14     this.intervalid = null; //循环定时的id
 15     this.i = 0; //循环的计数器
 16     this.status = 0; //slider层的状态：0-可以展开；1-不可以展开
 17     this.target.style.display = "none"; //先将div隐去
 18     return this;
 19 }
 20 slider.prototype.initialize = function() {
 21     this.sparent.style.overflow = "hidden"; //设置父容器overflow
 22     this.target.style.width = Number(this.width) + 'px'; //设置目标div的宽度
 23     this.target.style.height = Number(this.height) + 'px'; //设置目标div的高度
 24     this.target.style.position = ""; //设置目标div的定位方式
 25     this.target.style.display = ""; //设置目标div的显示方式
 26     this.target.style.filter = 'Alpha(opacity=' + Number(this.startopa) + ')'; //设置目标div的透明度为初始透明度
 27     this.target.style.overflow = "hidden"; //设置overflow
 28     switch (this.direction)//根据弹出方向设定div的margin
 29     {
 30         case 1: //left to right
 31             this.target.style.marginLeft = "-" + this.width + "px";
 32             break;
 33         case 2: //top to bottom
 34             this.target.style.marginTop = "-" + this.height + "px";
 35             break;
 36         case 3: //right to left
 37             this.target.style.marginRight = "-" + this.width + "px";
 38             break;
 39     }
 40 }
 41 slider.prototype.show = function() {
 42     if (this.status == 0)//检查状态是否已经展开
 43     {
 44         this.initialize(); //操作div及其父容器的初始化
 45         this.intervalid = window.setInterval("slider.names[" + this.id + "].cycle()", this.timer); //设置动作循环
 46     }
 47 }
 48 slider.prototype.hide = function() {
 49     if (this.status == 1)//检查状态是否已经展开
 50     {
 51         this.intervalid = window.setInterval("slider.names[" + this.id + "].decycle()", this.timer); //设置动作循环
 52     }
 53 }
 54 slider.prototype.cycle = function() //单步循环动作
 55 {
 56     var opa = this.target.style.filter.split("=")[1].split(")")[0]//获取目标div的透明度数值
 57     var opastep = Math.round(((100 - Number(opa)) / this.step) + 2.5); //计算每步增加的透明度
 58     var nopa = Number(opa) + Number(opastep); //当前透明度
 59     if (nopa > 100) { this.target.style.filter = 'Alpha(opacity=100)'; } else { this.target.style.filter = 'Alpha(opacity=' + String(nopa) + ')'; } //给div透明度赋值
 60     switch (this.direction)//根据弹出方向计算和设定div的动作
 61     {
 62         case 1:  //left to right
 63             var opx = this.target.style.marginLeft.split("px")[0];
 64             var pxstep = Math.round((this.width / this.step) + 0.5);
 65             var npx = Number(opx) + Number(pxstep);
 66             if (npx > 0) { this.target.style.marginLeft = '0px'; } else { this.target.style.marginLeft = String(npx) + 'px'; }
 67             break;
 68         case 2:  //top to bottom
 69             var opx = this.target.style.marginTop.split("px")[0];
 70             var pxstep = Math.round((this.height / this.step) + 0.5);
 71             var npx = Number(opx) + Number(pxstep);
 72             if (npx > 0) { this.target.style.marginTop = '0px'; } else { this.target.style.marginTop = String(npx) + 'px'; }
 73             break;
 74         case 3:  //right to left
 75             var opx = this.target.style.marginRight.split("px")[0];
 76             var pxstep = Math.round((this.width / this.step) + 0.5);
 77             var npx = Number(opx) + Number(pxstep);
 78             if (npx > 0) { this.target.style.marginRight = '0px'; } else { this.target.style.marginRight = String(npx) + 'px'; }
 79             break;
 80     }
 81     this.i++ //计数器+1
 82     if (this.i > (this.step - 1)) { window.clearInterval(this.intervalid); this.i = 0; this.status = 1; } //循环完毕，清除循环定时
 83 }
 84 slider.prototype.decycle = function() //单步循环动作
 85 {
 86     var opa = this.target.style.filter.split("=")[1].split(")")[0]//获取目标div的透明度数值
 87     var opastep = Math.round(((100 - Number(opa)) / this.step) + 2.5) * 2; //计算每步增加的透明度
 88     var nopa = Number(opa) - Number(opastep); //当前透明度
 89     if (nopa < this.startopa) { this.target.style.filter = 'Alpha(opacity=' + this.startopa + ')'; } else { this.target.style.filter = 'Alpha(opacity=' + String(nopa) + ')'; } //给div透明度赋值
 90     switch (this.direction)//根据弹出方向计算和设定div的动作
 91     {
 92         case 1:  //left to right
 93             var opx = this.target.style.marginLeft.split("px")[0];
 94             var pxstep = Math.round((this.width / Math.round(this.step * 0.5)) + 0.5);
 95             var npx = Number(opx) - Number(pxstep);
 96             if (Math.abs(npx) > this.width + 2) { this.target.style.marginLeft = '-' + this.width + 'px'; } else { this.target.style.marginLeft = String(npx) + 'px'; }
 97             break;
 98         case 2:  //top to bottom
 99             var opx = this.target.style.marginTop.split("px")[0];
100             var pxstep = Math.round((this.height / Math.round(this.step * 0.5)) + 0.5);
101             var npx = Number(opx) - Number(pxstep);
102             if (Math.abs(npx) > this.height + 2) { this.target.style.marginTop = '-' + this.height + 'px'; } else { this.target.style.marginTop = String(npx) + 'px'; }
103             break;
104         case 3:  //right to left
105             var opx = this.target.style.marginRight.split("px")[0];
106             var pxstep = Math.round((this.width / Math.round(this.step * 0.5)) + 0.5);
107             var npx = Number(opx) - Number(pxstep);
108             if (Math.abs(npx) > this.width + 2) { this.target.style.marginRight = '-' + this.width + 'px'; } else { this.target.style.marginRight = String(npx) + 'px'; }
109             break;
110     }
111     this.i++ //计数器+1
112     if (this.i > (Math.round(this.step * 0.5) - 1)) { window.clearInterval(this.intervalid); this.i = 0; this.status = 0; this.target.style.display = "none"; } //循环完毕，清除循环定时
113 }
114 //var leftslider = new slider('salecontainer', 3, 321, 130, 20, 1, 20);
115 
116 
117 
118 //----------------------- 随屏幕滚动效果 -----------------------
119 
120 var tips; var theTop = 100/*这是默认高度,越大越往下*/; var old = theTop;
121 
122 function initFloatTips() {
123 
124     tips = document.getElementById('wrap');
125 
126     moveTips();
127 }
128 
129 function moveTips() {
130     var tt = 50;
131     if (window.innerHeight) {
132         pos = window.pageYOffset
133     }
134     else if (document.documentElement && document.documentElement.scrollTop) {
135         pos = document.documentElement.scrollTop
136     }
137     else if (document.body) {
138         pos = document.body.scrollTop;
139     }
140 
141     pos = pos - tips.offsetTop + theTop;
142     pos = tips.offsetTop + pos / 10;
143 
144     if (pos < theTop) pos = theTop;
145     if (pos != old) {
146         tips.style.top = pos + "px";
147         tt = 10;
148     }
149     old = pos;
150     setTimeout(moveTips, tt);
151 }
152 //initFloatTips();

用JQuery的页面代码和JQuery语句
 1 <div id="saletitle">
 2     <div class="st_open" onmouseover="divshow();"></div>
 3     <div id="st_close" class="st_close" style="display:none;">
 4         <a href="javascript:void(0);" onclick="divhide();">关<br />闭</a>
 5     </div>
 6 </div>
 7 
 8 <script type="text/javascript">
 9     function divshow() {
10         $("#salecontainer").show("slow");
11         document.getElementById('st_close').style.display='';
12     }
13     function divhide() {
14         $("#salecontainer").hide("slow");
15         document.getElementById('st_close').style.display='none';
16     }
17 
18     initFloatTips();
19 </script>

转载于:https://www.cnblogs.com/malijie/archive/2009/08/25/1553910.html