本来想写一下,电子商务网站需要注意的几个问题的,时间太晚了,这几天也忒忙,国外的电商网站真的不好搞,比国内的要复杂的多,他们考虑的问题太多,细节上的东西想的真是太细太细,网站还没有推出,还没有得到用户的反馈,就有这么多的问题,太有压力,下面分享一个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; } |