JavaScript 实现鼠标拖拽翻页功能

HTML 结构与样式定义

<html> <head> <title>blog</title> <meta http-equiv=content-type content="text/html; charset=gb2312"> <style> body{     border:0px;     margin:0px;     overflow:hidden;     background-color:transparent;     font-family:宋体; } .page{     position:absolute;     width:700px;     border:1px solid #999;     background-color:#000;     left:425px;     margin-left:-350px;     cursor:default;     z-index:0; } ul{     height:320px;     list-style:none;     margin:40px 50px 0px;     padding:0px; } li{     width:100%;     height:30px;     line-height:30px;     font-size:14px;     text-align:left;     border-bottom:1px dashed #999; } a{     text-decoration:none;     color:#999; } a:hover{     font-weight:bold; } li span{     float:right;     color:#999; } .tip{     display:block;     width:100%;     font-size:12px;     color:#999;     text-align:center;     margin:10px 0px 20px; } </style> </head> <body onselectstart="return false;">  <div>     <ul>         <li><span>2009-4-9 12:35</span>东方之珠</li>         <li><span>2009-4-9 12:35</span>啊！停不住的爱人</li>         <li><span>2009-4-9 12:35</span>宁静温泉</li>         <li><span>2009-4-9 12:35</span>你的样子</li>         <li><span>2009-4-9 12:35</span>恋曲1980</li>         <li><span>2009-4-9 12:35</span>恋曲1990</li>         <li><span>2009-4-9 12:35</span>恋曲2000</li>         <li><span>2009-4-9 12:35</span>亚细亚的孤儿</li>         <li><span>2009-4-9 12:35</span>伴侣</li>         <li><span>2009-4-9 12:35</span>童年</li>     </ul> </div> <div>     <ul>         <li><span>2009-4-9 12:35</span>爱的箴言</li>         <li><span>2009-4-9 12:35</span>爱人同志</li>         <li><span>2009-4-9 12:35</span>思念</li>         <li><span>2009-4-9 12:35</span>母亲</li>         <li><span>2009-4-9 12:35</span>是否</li>         <li><span>2009-4-9 12:35</span>牧童</li>         <li><span>2009-4-9 12:35</span>青春舞曲</li>         <li><span>2009-4-9 12:35</span>蒲公英</li>         <li><span>2009-4-9 12:35</span>未来的主人翁</li>         <li><span>2009-4-9 12:35</span>如今才是唯一</li>     </ul> </div> <div>     <ul>         <li><span>2009-4-9 12:35</span>暗恋</li>         <li><span>2009-4-9 12:35</span>弹唱词</li>         <li><span>2009-4-9 12:35</span>飞车</li>         <li><span>2009-4-9 12:35</span>东方之珠</li>         <li><span>2009-4-9 12:35</span>滚滚红尘</li>         <li><span>2009-4-9 12:35</span>光阴的故事</li>         <li><span>2009-4-9 12:35</span>之乎者也</li>         <li><span>2009-4-9 12:35</span>现象七十二变</li>         <li><span>2009-4-9 12:35</span>乡愁四韵</li>         <li><span>2009-4-9 12:35</span>穿过你的黑发我的手</li>     </ul> </div> <div>     <ul>         <li><span>2009-4-9 12:35</span>大兵歌</li>         <li><span>2009-4-9 12:35</span>歌</li>         <li><span>2009-4-9 12:35</span>黄色面孔</li>         <li><span>2009-4-9 12:35</span>台北红玫瑰</li>         <li><span>2009-4-9 12:35</span>我所不能了解的事</li>     </ul> </div> </body> </html> 

外部脚本加载注意事项

注意：引入外部 JavaScript 文件后，需要刷新页面才能执行相关脚本。