JavaScript文字章节跳转功能的模拟代码

发布时间：2018-08-19 14:46 所属栏目：121 来源：站长网

导读：烈18火77网(LieHuo17.Net)教41程 Java Script文字章节跳转功能的模拟代码，当我们用鼠标点击某按钮后，会跳转到指定的位置，如果是一篇小说，可引导用户阅读下一章节，或按用户要求跳转，这里用JavaScript模拟实现，只实现了核心功能，还有众多的地方需要

　　烈18火77网(LieHuo17.Net)教41程 JavaScript文字章节跳转功能的模拟代码，当我们用鼠标点击某按钮后，会跳转到指定的位置，如果是一篇小说，可引导用户阅读下一章节，或按用户要求跳转，这里用JavaScript模拟实现，只实现了核心功能，还有众多的地方需要慢慢完善的，在这里发出来供大家参考，一起交流。

　　演示：

<html> <head> <title>Js文字章节跳转功能的模拟代码</title> </head> <body> <div id="d1" style="position:absolute; left:0px; top:0px;width:200px; height:100px; border:1px solid navy; cursor:pointer;" onclick="document.getElementById('d2').scrollIntoView();"> 我是1。点击跳到2。</div> <div id="d2" style="position:absolute; left:0px; top:3000px;width:200px; height:100px; border:1px solid navy; cursor:pointer;" onclick="document.getElementById('d3').scrollIntoView();"> 我是2。点击跳到3。</div> <div id="d3" style="position:absolute; left:30000px; top:3000px;width:200px; height:100px; border:1px solid navy; cursor:pointer;" onclick="document.getElementById('d4').scrollIntoView();"> 我是3。点击跳到4。</div> <div id="d4" style="position:absolute; left:3000px; top:0px;width:200px; height:100px; border:1px solid navy; cursor:pointer;" onclick="document.getElementById('d1').scrollIntoView();"> 我是4。点击跳到1。</div> </body> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：ASP站长网）