DEDECMS教程之实现按键盘方向键实现上一页/下一页翻页效果,这样可以提高用户体验,特别是在小说站和图片站中用的比较多,
DEDECMS教程:实现键盘翻页效果
。DEDECMS教程之键盘翻页的制作方法:
打开 include/arc.archives.class.php 查找到以下代码:
<span style="color: rgb(34, 95, 45); font-weight: normal; font-style. normal;" class="sh_variable">$this</span><span class="sh_symbol">-></span>PreNext<span class="sh_symbol">[</span><span style="color: rgb(255, 0, 255); font-weight: normal; font-style. normal;" class="sh_string">'pre'</span><span class="sh_symbol">]</span> <span class="sh_symbol">=</span> <span style="color: rgb(255, 0, 255); font-weight: normal; font-style. normal;" class="sh_string">"上一篇:<a href='$mlink'>{$preRow['title']}</a> "</span><span class="sh_symbol">;</span>
替换成以下代码:
<span style="color: rgb(34, 95, 45); font-weight: normal; font-style. normal;" class="sh_variable">$this</span><span class="sh_symbol">-></span>PreNext<span class="sh_symbol">[</span><span style="color: rgb(255, 0, 255); font-weight: normal; font-style. normal;" class="sh_string">'pre'</span><span class="sh_symbol">]</span> <span class="sh_symbol">=</span> <span style="color: rgb(255, 0, 255); font-weight: normal; font-style. normal;" class="sh_string">"$mlink "</span><span class="sh_symbol">;</span><span style="color: rgb(34, 95, 45); font-weight: normal; font-style. normal;" class="sh_variable">$this</span><span class="sh_symbol">-></span>PreNext<span class="sh_symbol">[</span><span style="color: rgb(255, 0, 255); font-weight: normal; font-style. normal;" class="sh_string">'next'</span><span class="sh_symbol">]</span> <span class="sh_symbol">=</span> <span style="color: rgb(255, 0, 255); font-weight: normal; font-style. normal;" class="sh_string">"下一篇:<a href='$mlink'>{$nextRow['title']}</a> "</span><span class="sh_symbol">;</span>
然后在内容页用js进行调用,代码如下:
<span class="sh_symbol"><</span>script. type<span class="sh_symbol">=</span><span style="color: rgb(255, 0, 255); font-weight: normal; font-style. normal;" class="sh_string">"text/javascript"</span> language<span class="sh_symbol">=</span><span style="color: rgb(255, 0, 255); font-weight: normal; font-style. normal;" class="sh_string">"javascript"</span><span class="sh_symbol">></span>
<span class="sh_symbol"><!--</span>
document<span class="sh_symbol">.</span>onkeydown<span class="sh_symbol">=</span>nextpage<span class="sh_symbol">;</span>
<span style="color: rgb(165, 42, 42); font-weight: normal; font-style. normal;" class="sh_keyword">var</span> prevpage<span class="sh_symbol">=</span><span style="color: rgb(255, 0, 255); font-weight: normal; font-style. normal;" class="sh_string">'{dede:prenext get='</span>pre<span style="color: rgb(255, 0, 255); font-weight: normal; font-style. normal;" class="sh_string">'/}'</span><span class="sh_symbol">;</span>
<span style="color: rgb(165, 42, 42); font-weight: normal; font-style. normal;" class="sh_keyword">var</span> nextpage<span class="sh_symbol">=</span><span style="color: rgb(255, 0, 255); font-weight: normal; font-style. normal;" class="sh_string">'{dede:prenext get='</span>next<span style="color: rgb(255, 0, 255); font-weight: normal; font-style. normal;" class="sh_string">'/}'</span><span class="sh_symbol">;</span>
<span style="color: rgb(165, 42, 42); font-weight: normal; font-style. normal;" class="sh_keyword">var</span> index_page <span class="sh_symbol">=</span> <span style="color: rgb(255, 0, 255); font-weight: normal; font-style. normal;" class="sh_string">"index.html"</span><span class="sh_symbol">;</span>
<span style="color: rgb(255, 0, 0); font-weight: normal; font-style. normal;" class="sh_comment">//var bookpage="index.html";</span>
<span style="color: rgb(165, 42, 42); font-weight: normal; font-style. normal;" class="sh_keyword">function</span> <span style="color: rgb(0, 0, 0); font-weight: bold; font-style. normal;" class="sh_function">nextpage</span><span class="sh_symbol">(</span>event<span class="sh_symbol">)</span>
<span class="sh_cbracket">{</span>
event <span class="sh_symbol">=</span> event <span class="sh_symbol">?</span> event <span class="sh_symbol">:</span> <span class="sh_symbol">(</span>window<span class="sh_symbol">.</span>event <span class="sh_symbol">?</span> window<span class="sh_symbol">.</span>event <span class="sh_symbol">:</span> null<span class="sh_symbol">);</span>
<span style="color: rgb(255, 0, 0); font-weight: normal; font-style. normal;" class="sh_comment">//if (event.keyCode==13) location=bookpage</span>
<span style="color: rgb(165, 42, 42); font-weight: normal; font-style. normal;" class="sh_keyword">if</span> <span class="sh_symbol">(</span>event<span class="sh_symbol">.</span>keyCode<span class="sh_symbol">==</span><span style="color: rgb(255, 0, 255); font-weight: normal; font-style. normal;" class="sh_number">13</span><span class="sh_symbol">)</span> location<span class="sh_symbol">=</span>index_page
<span style="color: rgb(165, 42, 42); font-weight: normal; font-style. normal;" class="sh_keyword">if</span> <span class="sh_symbol">(</span>event<span class="sh_symbol">.</span>keyCode<span class="sh_symbol">==</span><span style="color: rgb(255, 0, 255); font-weight: normal; font-style. normal;" class="sh_number">37</span><span class="sh_symbol">)</span>
<span class="sh_cbracket">{</span>
<span style="color: rgb(165, 42, 42); font-weight: normal; font-style. normal;" class="sh_keyword">if</span> <span class="sh_symbol">(</span>prevpage<span class="sh_symbol">!=</span><span style="color: rgb(255, 0, 255); font-weight: normal; font-style. normal;" class="sh_string">''</span> <span class="sh_symbol">&&</span> prevpage<span class="sh_symbol">!=</span><span style="color: rgb(255, 0, 255); font-weight: normal; font-style. normal;" class="sh_string">'上一篇:没有了 '</span><span class="sh_symbol">)</span>
location<span class="sh_symbol">=</span>prevpage<span class="sh_symbol">;</span>
<span style="color: rgb(165, 42, 42); font-weight: normal; font-style. normal;" class="sh_keyword">else</span>
<span style="color: rgb(0, 0, 0); font-weight: bold; font-style. normal;" class="sh_function">alert</span><span class="sh_symbol">(</span><span style="color: rgb(255, 0, 255); font-weight: normal; font-style. normal;" class="sh_string">'这是第一页'</span><span class="sh_symbol">);</span>
<span class="sh_cbracket">}</span>
<span style="color: rgb(165, 42, 42); font-weight: normal; font-style. normal;" class="sh_keyword">if</span> <span class="sh_symbol">(</span>event<span class="sh_symbol">.</span>keyCode<span class="sh_symbol">==</span><span style="color: rgb(255, 0, 255); font-weight: normal; font-style. normal;" class="sh_number">39</span><span class="sh_symbol">)</span>
<span class="sh_cbracket">{</span>
<span style="color: rgb(165, 42, 42); font-weight: normal; font-style. normal;" class="sh_keyword">if</span> <span class="sh_symbol">(</span>nextpage<span class="sh_symbol">!=</span><span style="color: rgb(255, 0, 255); font-weight: normal; font-style. normal;" class="sh_string">''</span> <span class="sh_symbol">&&</span> nextpage<span class="sh_symbol">!=</span><span style="color: rgb(255, 0, 255); font-weight: normal; font-style. normal;" class="sh_string">'下一篇:没有了 '</span><span class="sh_symbol">)</span>
location<span class="sh_symbol">=</span>nextpage<span class="sh_symbol">;</span>
<span style="color: rgb(165, 42, 42); font-weight: normal; font-style. normal;" class="sh_keyword">else</span>
<span style="color: rgb(0, 0, 0); font-weight: bold; font-style. normal;" class="sh_function">alert</span><span class="sh_symbol">(</span><span style="color: rgb(255, 0, 255); font-weight: normal; font-style. normal;" class="sh_string">'已经是最后一页了'</span><span class="sh_symbol">);</span>
<span class="sh_cbracket">}</span>
<span class="sh_cbracket">}</span>
<span style="color: rgb(255, 0, 0); font-weight: normal; font-style. normal;" class="sh_comment">//--></span>
<span style="color: rgb(165, 42, 42); font-weight: normal; font-style. normal;" class="sh_keyword">function</span> <span style="color: rgb(0, 0, 0); font-weight: bold; font-style. normal;" class="sh_function">getElement</span><span class="sh_symbol">(</span>aID<span class="sh_symbol">)</span>
<span class="sh_cbracket">{</span>
<span style="color: rgb(165, 42, 42); font-weight: normal; font-style. normal;" class="sh_keyword">return</span> <span class="sh_symbol">(</span>document<span class="sh_symbol">.</span>getElementById<span class="sh_symbol">)</span> <span class="sh_symbol">?</span> document<span class="sh_symbol">.</span><span style="color: rgb(0, 0, 0); font-weight: bold; font-style. normal;" class="sh_function">getElementById</span><span class="sh_symbol">(</span>aID<span class="sh_symbol">):</span> document<span class="sh_symbol">.</span>all<span class="sh_symbol">[</span>aID<span class="sh_symbol">];</span>
<span class="sh_cbracket">}</span>
<span style="color: rgb(165, 42, 42); font-weight: normal; font-style. normal;" class="sh_keyword">function</span> <span style="color: rgb(0, 0, 0); font-weight: bold; font-style. normal;" class="sh_function">makeRequest</span><span class="sh_symbol">(</span>url<span class="sh_symbol">)</span><span class="sh_cbracket">{</span>
http_request<span class="sh_symbol">=</span>false<span class="sh_symbol">;</span>
<span style="color: rgb(165, 42, 42); font-weight: normal; font-style. normal;" class="sh_keyword">if</span><span class="sh_symbol">(</span>window<span class="sh_symbol">.</span>XMLHttpRequest<span class="sh_symbol">)</span><span class="sh_cbracket">{</span><span style="color: rgb(255, 0, 0); font-weight: normal; font-style. normal;" class="sh_comment">//Mozilla,Safari,...</span>
http_request<span class="sh_symbol">=</span><span style="color: rgb(165, 42, 42); font-weight: normal; font-style. normal;" class="sh_keyword">new</span> <span style="color: rgb(0, 0, 0); font-weight: bold; font-style. normal;" class="sh_function">XMLHttpRequest</span><span class="sh_symbol">();</span>
<span style="color: rgb(165, 42, 42); font-weight: normal; font-style. normal;" class="sh_keyword">if</span><span class="sh_symbol">(</span>http_request<span class="sh_symbol">.</span>overrideMimeType<span class="sh_symbol">)</span><span class="sh_cbracket">{</span>
http_request<span class="sh_symbol">.</span><span style="color: rgb(0, 0, 0); font-weight: bold; font-style. normal;" class="sh_function">overrideMimeType</span><span class="sh_symbol">(</span><span style="color: rgb(255, 0, 255); font-weight: normal; font-style. normal;" class="sh_string">'text/xml'</span><span class="sh_symbol">);</span>
<span class="sh_cbracket">}</span>
<span class="sh_cbracket">}</span><span style="color: rgb(165, 42, 42); font-weight: normal; font-style. normal;" class="sh_keyword">else</span> <span style="color: rgb(165, 42, 42); font-weight: normal; font-style. normal;" class="sh_keyword">if</span><span class="sh_symbol">(</span>window<span class="sh_symbol">.</span>ActiveXObject<span class="sh_symbol">)</span><span class="sh_cbracket">{</span><span style="color: rgb(255, 0, 0); font-weight: normal; font-style. normal;" class="sh_comment">//IE</span>
try<span class="sh_cbracket">{</span>
http_request<span class="sh_symbol">=</span><span style="color: rgb(165, 42, 42); font-weight: normal; font-style. normal;" class="sh_keyword">new</span> <span style="color: rgb(0, 0, 0); font-weight: bold; font-style. normal;" class="sh_function">ActiveXObject</span><span class="sh_symbol">(</span><span style="color: rgb(255, 0, 255); font-weight: normal; font-style. normal;" class="sh_string">"Msxml2.XMLHTTP"</span><span class="sh_symbol">);</span>
<span class="sh_cbracket">}</span><span style="color: rgb(0, 0, 0); font-weight: bold; font-style. normal;" class="sh_function">catch</span><span class="sh_symbol">(</span>e<span class="sh_symbol">)</span><span class="sh_cbracket">{</span>
try<span class="sh_cbracket">{</span>
http_request<span class="sh_symbol">=</span><span style="color: rgb(165, 42, 42); font-weight: normal; font-style. normal;" class="sh_keyword">new</span> <span style="color: rgb(0, 0, 0); font-weight: bold; font-style. normal;" class="sh_function">ActiveXObject</span><span class="sh_symbol">(</span><span style="color: rgb(255, 0, 255); font-weight: normal; font-style. normal;" class="sh_string">"Microsoft.XMLHTTP"</span><span class="sh_symbol">);</span>
<span class="sh_cbracket">}</span><span style="color: rgb(0, 0, 0); font-weight: bold; font-style. normal;" class="sh_function">catch</span><span class="sh_symbol">(</span>e<span class="sh_symbol">)</span><span class="sh_cbracket">{}</span>
<span class="sh_cbracket">}</span>
<span class="sh_cbracket">}</span>
<span style="color: rgb(165, 42, 42); font-weight: normal; font-style. normal;" class="sh_keyword">if</span><span class="sh_symbol">(!</span>http_request<span class="sh_symbol">)</span><span class="sh_cbracket">{</span>
<span style="color: rgb(0, 0, 0); font-weight: bold; font-style. normal;" class="sh_function">alert</span><span class="sh_symbol">(</span><span style="color: rgb(255, 0, 255); font-weight: normal; font-style. normal;" class="sh_string">'Giving up:(Cannot create an XMLHTTP instance)'</span><span class="sh_symbol">);</span>
<span style="color: rgb(165, 42, 42); font-weight: normal; font-style. normal;" class="sh_keyword">return</span> false<span class="sh_symbol">;</span>
<span class="sh_cbracket">}</span>
<span style="color: rgb(165, 42, 42); font-weight: normal; font-style. normal;" class="sh_keyword">return</span> http_request<span class="sh_symbol">;</span>
<span class="sh_cbracket">}</span>
<span class="sh_symbol"></</span>script<span class="sh_symbol">></span>
加入到文章模版的
标签之前的内容就行了,电脑资料
《DEDECMS教程:实现键盘翻页效果》(https://www.unjs.com)。当然为了防止页面代码臃肿,大家可以将此代码放在单独JS文件中采用外部调用即可,保持页面简洁清爽。
DEDECMS教程之实现按键盘方向键实现上一页/下一页翻页效果制作完毕!