本来想写一下,电子商务网站需要注意的几个问题的,时间太晚了,这几天也忒忙,国外的电商网站真的不好搞,比国内的要复杂的多,他们考虑的问题太多,细节上的东西想的真是太细太细,网站还没有推出,还没有得到用户的反馈,就有这么多的问题,太有压力,下面分享一个DIV随屏幕滚动JS代码
JS部分:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<span style="color: #003366;font-weight: bold">var</span> tips<span style="color: #339933">;</span> <span style="color: #003366;font-weight: bold">var</span> theTop <span style="color: #339933">=</span> <span style="color: #CC0000">250</span><span style="color: #006600;font-style: italic">/*这是默认高度*/</span><span style="color: #339933">;</span> <span style="color: #003366;font-weight: bold">var</span> old <span style="color: #339933">=</span> theTop<span style="color: #339933">;</span>
<span style="color: #003366;font-weight: bold">function</span> initFloatTips<span style="color: #009900">(</span><span style="color: #009900">)</span> <span style="color: #009900">{</span>
   tips <span style="color: #339933">=</span> document.<span style="color: #660066">getElementById</span><span style="color: #009900">(</span><span style="color: #3366CC">'floatTips'</span><span style="color: #009900">)</span><span style="color: #339933">;</span>
   moveTips<span style="color: #009900">(</span><span style="color: #009900">)</span><span style="color: #339933">;</span>
<span style="color: #009900">}</span><span style="color: #339933">;</span>
<span style="color: #003366;font-weight: bold">function</span> moveTips<span style="color: #009900">(</span><span style="color: #009900">)</span> <span style="color: #009900">{</span>
   <span style="color: #003366;font-weight: bold">var</span> tt<span style="color: #339933">=</span><span style="color: #CC0000">50</span><span style="color: #339933">;</span>
   <span style="color: #000066;font-weight: bold">if</span> <span style="color: #009900">(</span>window.<span style="color: #660066">innerHeight</span><span style="color: #009900">)</span> <span style="color: #009900">{</span>
     pos <span style="color: #339933">=</span> window.<span style="color: #660066">pageYOffset</span>
   <span style="color: #009900">}</span>
   <span style="color: #000066;font-weight: bold">else</span> <span style="color: #000066;font-weight: bold">if</span> <span style="color: #009900">(</span>document.<span style="color: #660066">documentElement</span> <span style="color: #339933">&&</span> document.<span style="color: #660066">documentElement</span>.<span style="color: #660066">scrollTop</span><span style="color: #009900">)</span> <span style="color: #009900">{</span>
     pos <span style="color: #339933">=</span> document.<span style="color: #660066">documentElement</span>.<span style="color: #660066">scrollTop</span>
   <span style="color: #009900">}</span>
   <span style="color: #000066;font-weight: bold">else</span> <span style="color: #000066;font-weight: bold">if</span> <span style="color: #009900">(</span>document.<span style="color: #660066">body</span><span style="color: #009900">)</span> <span style="color: #009900">{</span>
     pos <span style="color: #339933">=</span> document.<span style="color: #660066">body</span>.<span style="color: #660066">scrollTop</span><span style="color: #339933">;</span>
   <span style="color: #009900">}</span>
   pos<span style="color: #339933">=</span>pos<span style="color: #339933">-</span>tips.<span style="color: #660066">offsetTop</span><span style="color: #339933">+</span>theTop<span style="color: #339933">;</span>
   pos<span style="color: #339933">=</span>tips.<span style="color: #660066">offsetTop</span><span style="color: #339933">+</span>pos<span style="color: #339933">/</span><span style="color: #CC0000">10</span><span style="color: #339933">;</span>
   <span style="color: #000066;font-weight: bold">if</span> <span style="color: #009900">(</span>pos <span style="color: #339933"><</span> theTop<span style="color: #009900">)</span> pos <span style="color: #339933">=</span> theTop<span style="color: #339933">;</span>
   <span style="color: #000066;font-weight: bold">if</span> <span style="color: #009900">(</span>pos <span style="color: #339933">!=</span> old<span style="color: #009900">)</span> <span style="color: #009900">{</span>
     tips.<span style="color: #660066">style</span>.<span style="color: #660066">top</span> <span style="color: #339933">=</span> pos<span style="color: #339933">+</span><span style="color: #3366CC">"px"</span><span style="color: #339933">;</span>
     tt<span style="color: #339933">=</span><span style="color: #CC0000">10</span><span style="color: #339933">;</span>
   <span style="color: #009900">}</span>
   old <span style="color: #339933">=</span> pos<span style="color: #339933">;</span>
   setTimeout<span style="color: #009900">(</span>moveTips<span style="color: #339933">,</span>tt<span style="color: #009900">)</span><span style="color: #339933">;</span>
<span style="color: #009900">}</span>
 
$<span style="color: #009900">(</span>document<span style="color: #009900">)</span>.<span style="color: #660066">ready</span><span style="color: #009900">(</span><span style="color: #003366;font-weight: bold">function</span><span style="color: #009900">(</span><span style="color: #009900">)</span><span style="color: #009900">{</span>
initFloatTips<span style="color: #009900">(</span><span style="color: #009900">)</span><span style="color: #339933">;</span>
<span style="color: #009900">}</span><span style="color: #009900">)</span>

DIV的ID命名要和JS中的相对应,下面是CSS样式,大家可以自己按需要定义:

1
2
3
4
5
6
7
div#floatTips{
position:absolute;
padding:3px;
bottom:0px;
right:0px;
z-index:9999;
}