<span class="cp"><!DOCTYPE HTML></span>
<span class="nt"><html></span>
<span class="nt"><head></span>
<span class="nt"><meta</span> <span class="na">http-equiv=</span><span class="s">"content-type"</span> <span class="na">content=</span><span class="s">"text/html; charset=utf-8"</span><span class="nt">/></span>
<span class="nt"><title></span>Scroll<span class="nt"></title></span>
<span class="nt"><style></span>
<span class="nt">div</span><span class="p">{</span>
<span class="k">padding</span><span class="o">:</span> <span class="m">0</span><span class="p">;</span>
<span class="k">margin</span><span class="o">:</span><span class="m">0</span><span class="p">;</span>
<span class="k">border</span><span class="o">:</span> <span class="m">1px</span> <span class="k">solid</span> <span class="m">#000000</span><span class="p">;</span>
<span class="p">}</span>
<span class="nf">#div1</span><span class="p">{</span>
<span class="k">color</span><span class="o">:</span> <span class="nb">green</span><span class="p">;</span>
<span class="p">}</span>
<span class="nf">#div2</span><span class="p">{</span>
<span class="k">color</span><span class="o">:</span> <span class="nb">yellow</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.content</span><span class="o">,</span> <span class="nc">.navi</span><span class="p">{</span>
<span class="k">float</span><span class="o">:</span> <span class="k">left</span><span class="p">;</span>
<span class="k">height</span><span class="o">:</span> <span class="m">100px</span><span class="p">;</span>
<span class="k">width</span><span class="o">:</span> <span class="m">100px</span><span class="p">;</span>
<span class="k">overflow</span><span class="o">:</span> <span class="k">hidden</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.navi_item</span><span class="p">{</span>
<span class="k">margin</span><span class="o">:</span> <span class="m">5px</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.navi_item_current</span><span class="p">{</span>
<span class="k">background</span><span class="o">:</span> <span class="nb">red</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"></head></span>
<span class="nt"><body></span>
<span class="nt"><div</span> <span class="na">id=</span><span class="s">"div1"</span> <span class="na">class=</span><span class="s">"content"</span><span class="nt">></span>
1 <span class="nt"><br></span>2 <span class="nt"><br></span>3 <span class="nt"><br></span>4 <span class="nt"><br></span>5 <span class="nt"><br></span>6 <span class="nt"><br></span>7 <span class="nt"><br></span>
8 <span class="nt"><br></span>9 <span class="nt"><br></span>10 <span class="nt"><br></span>11 <span class="nt"><br></span>12 <span class="nt"><br></span>13 <span class="nt"><br></span>14 <span class="nt"><br></span>
15
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">id=</span><span class="s">"div2"</span> <span class="na">class=</span><span class="s">"content"</span><span class="nt">></span>
1 <span class="nt"><br></span>2 <span class="nt"><br></span>3 <span class="nt"><br></span>4 <span class="nt"><br></span>5 <span class="nt"><br></span>6 <span class="nt"><br></span>7 <span class="nt"><br></span>
8 <span class="nt"><br></span>9 <span class="nt"><br></span>10 <span class="nt"><br></span>11 <span class="nt"><br></span>12 <span class="nt"><br></span>13 <span class="nt"><br></span>14 <span class="nt"><br></span>
15
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">id=</span><span class="s">"div3"</span> <span class="na">class=</span><span class="s">"navi"</span><span class="nt">></span>div3
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"navi_item navi_item_current"</span><span class="nt">></span>div4<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"navi_item"</span><span class="nt">></span>div5<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"><p></span>鼠标滚动值<span class="nt"><span</span> <span class="na">id=</span><span class="s">"info"</span><span class="nt">></span>0<span class="nt"></span></p>
<div class="aritcle_card">
<a class="aritcle_card_img" href="/xiazai/code/10335">
<img src="https://img.php.cn/upload/webcode/000/000/017/176148720656284.png" alt="斯摩派(smapie)企业建站程序">
</a>
<div class="aritcle_card_info">
<a href="/xiazai/code/10335">斯摩派(smapie)企业建站程序</a>
<p>一个让ASP程序轻松做最少的代码编写量，一般企业所需要的功能都有，参数设置，数据库管理，文件管理，数据初始化，生成HTML页面（这是为了某些客户需要静态页面的需求），页面管理（这里是为了网站中某些单页面需求而开发的，这里你在前台只要用sub_c.article(2) 这个2是这里的id号，也可以是在比如index.asp?id=2 是一样的效果）公告管理，友情链接，信息发布（这里有分类，分类是无限</p>
<div class="">
<img src="/static/images/card_xiazai.png" alt="斯摩派(smapie)企业建站程序">
<span>0</span>
</div>
</div>
<a href="/xiazai/code/10335" class="aritcle_card_btn">
<span>查看详情</span>
<img src="/static/images/cardxiayige-3.png" alt="斯摩派(smapie)企业建站程序">
</a>
</div>
</span>
<span class="nt"><script></span>
<span class="c1">//当超过某个伐值时切换导航</span>
<span class="kd">var</span> <span class="nx">threshold</span> <span class="o">=</span> <span class="mi">200</span><span class="p">;</span>
<span class="c1">//鼠标滚轮滚动时每次滚动的距离(px)</span>
<span class="kd">var</span> <span class="nx">range</span> <span class="o">=</span> <span class="mi">10</span><span class="p">;</span>
<span class="c1">//记录鼠标滚轮总共的</span>
<span class="kd">var</span> <span class="nx">currentOffset</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">scrollFunc</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">){</span>
<span class="kd">var</span> <span class="nx">offset</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
<span class="nx">e</span> <span class="o">=</span> <span class="nx">e</span> <span class="o">||</span> <span class="nb">window</span><span class="p">.</span><span class="nx">event</span><span class="p">;</span>
<span class="k">if</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">wheelDelta</span><span class="p">){</span><span class="c1">//IE/Opera/Chrome</span>
<span class="nx">offset</span> <span class="o">=</span> <span class="nx">e</span><span class="p">.</span><span class="nx">wheelDelta</span><span class="p">;</span>
<span class="p">}</span><span class="k">else</span> <span class="k">if</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">detail</span><span class="p">){</span><span class="c1">//Firefox</span>
<span class="c1">//firefox 鼠标滚动返回+(-)3，正负方向也相反, 为了统一乘以-40，</span>
<span class="nx">offset</span> <span class="o">=</span> <span class="o">-</span><span class="nx">e</span><span class="p">.</span><span class="nx">detail</span> <span class="o">*</span> <span class="mi">40</span><span class="p">;</span>
<span class="p">}</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"info"</span><span class="p">).</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="nx">offset</span><span class="p">;</span>
<span class="nx">navi</span><span class="p">(</span><span class="nx">offset</span><span class="p">);</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">navi</span><span class="p">(</span><span class="nx">scrollOffset</span><span class="p">){</span>
<span class="c1">//1表示向下，-1表示向上</span>
<span class="kd">var</span> <span class="nx">direct</span> <span class="o">=</span> <span class="mi">1</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">div2</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"div2"</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">div1</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"div1"</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">navi</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"div3"</span><span class="p">).</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="s2">"div"</span><span class="p">);</span>
<span class="c1">//鼠标滚轮向下为负数</span>
<span class="nx">direct</span> <span class="o">=</span> <span class="nx">scrollOffset</span> <span class="o">></span> <span class="mi">0</span> <span class="o">?</span> <span class="o">-</span><span class="mi">1</span> <span class="o">:</span> <span class="mi">1</span><span class="p">;</span>
<span class="nx">currentOffset</span> <span class="o">=</span> <span class="nx">currentOffset</span> <span class="o">+</span> <span class="nx">direct</span> <span class="o">*</span> <span class="nx">range</span><span class="p">;</span>
<span class="nx">currentOffset</span> <span class="o">=</span> <span class="nx">currentOffset</span> <span class="o"><</span> <span class="mi">0</span> <span class="o">?</span> <span class="mi">0</span> <span class="o">:</span> <span class="nx">currentOffset</span><span class="p">;</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">currentOffset</span><span class="p">);</span>
<span class="k">if</span><span class="p">(</span><span class="nx">currentOffset</span> <span class="o">></span> <span class="nx">threshold</span><span class="p">){</span>
<span class="nx">div1</span><span class="p">.</span><span class="nx">scrollTop</span> <span class="o">=</span> <span class="nx">currentOffset</span> <span class="o">-</span> <span class="nx">threshold</span><span class="p">;</span>
<span class="nx">navi</span><span class="p">[</span><span class="mi">1</span><span class="p">].</span><span class="nx">className</span> <span class="o">=</span> <span class="s2">"navi_item navi_item_current"</span><span class="p">;</span>
<span class="nx">navi</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">className</span> <span class="o">=</span> <span class="s2">"navi_item"</span><span class="p">;</span>
<span class="p">}</span><span class="k">else</span><span class="p">{</span>
<span class="nx">div2</span><span class="p">.</span><span class="nx">scrollTop</span> <span class="o">=</span> <span class="nx">currentOffset</span><span class="p">;</span>
<span class="nx">navi</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">className</span> <span class="o">=</span> <span class="s2">"navi_item navi_item_current"</span><span class="p">;</span>
<span class="nx">navi</span><span class="p">[</span><span class="mi">1</span><span class="p">].</span><span class="nx">className</span> <span class="o">=</span> <span class="s2">"navi_item"</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="cm">/*注册事件*/</span>
<span class="k">if</span><span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">){</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">'DOMMouseScroll'</span><span class="p">,</span><span class="nx">scrollFunc</span><span class="p">,</span><span class="kc">false</span><span class="p">);</span>
<span class="p">}</span><span class="c1">//W3C</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">onmousewheel</span><span class="o">=</span><span class="nb">document</span><span class="p">.</span><span class="nx">onmousewheel</span><span class="o">=</span><span class="nx">scrollFunc</span><span class="p">;</span><span class="c1">//IE/Opera/Chrome/Safari</span>
<span class="nt"></script></span>
<span class="nt"></body></span>
<span class="nt"></html></span>
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
789
收藏
