您的位置: 首页 > IT文章 > 网页特效 > 超酷的鼠标拖拽翻页(分页)效果实现javascript代码 超酷的鼠标拖拽翻页(分页)效果实现javascript代码 分类: IT文章 • 2022-05-13 16:04:17 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>拖动分页</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> <div> <ul> <li> <span>2009-4-9 12:35</span><a>https://www..net</a> </li> <li> <span>2009-4-9 12:35</span><a>啊！停不住的爱人</a> </li> <li> <span>2009-4-9 12:35</span><a>宁静温泉</a> </li> <li> <span>2009-4-9 12:35</span><a>你的样子</a> </li> <li> <span>2009-4-9 12:35</span><a>恋曲1980</a> </li> <li> <span>2009-4-9 12:35</span><a>恋曲1990</a> </li> <li> <span>2009-4-9 12:35</span><a>恋曲2000</a> </li> <li> <span>2009-4-9 12:35</span><a>亚细亚的孤儿</a> </li> <li> <span>2009-4-9 12:35</span><a>伴侣</a> </li> <li> <span>2009-4-9 12:35</span><a>童年</a> </li> </ul> </div> <div> <ul> <li> <span>2009-4-9 12:35</span><a></a> </li> <li> <span>2009-4-9 12:35</span><a>爱人同志</a> </li> <li> <span>2009-4-9 12:35</span><a>思念</a> </li> <li> <span>2009-4-9 12:35</span><a>母亲</a> </li> <li> <span>2009-4-9 12:35</span><a>是否</a> </li> <li> <span>2009-4-9 12:35</span><a>牧童</a> </li> <li> <span>2009-4-9 12:35</span><a>青春舞曲</a> </li> <li> <span>2009-4-9 12:35</span><a>蒲公英</a> </li> <li> <span>2009-4-9 12:35</span><a>未来的主人翁</a> </li> <li> <span>2009-4-9 12:35</span><a>如今才是唯一</a> </li> </ul> </div> <div> <ul> <li> <span>2009-4-9 12:35</span><a>.net</a> </li> <li> <span>2009-4-9 12:35</span><a>弹唱词</a> </li> <li> <span>2009-4-9 12:35</span><a>飞车</a> </li> <li> <span>2009-4-9 12:35</span><a>东方之珠</a> </li> <li> <span>2009-4-9 12:35</span><a>滚滚红尘</a> </li> <li> <span>2009-4-9 12:35</span><a>光阴的故事</a> </li> <li> <span>2009-4-9 12:35</span><a>之乎者也</a> </li> <li> <span>2009-4-9 12:35</span><a>现象七十二变</a> </li> <li> <span>2009-4-9 12:35</span><a>乡愁四韵</a> </li> <li> <span>2009-4-9 12:35</span><a>穿过你的黑发我的手</a> </li> </ul> </div> <div> <ul> <li> <span>2009-4-9 12:35</span><a>欢迎访问https://www..net</a> </li> <li> <span>2009-4-9 12:35</span><a>歌</a> </li> <li> <span>2009-4-9 12:35</span><a>黄色面孔</a> </li> <li> <span>2009-4-9 12:35</span><a>台北红玫瑰</a> </li> <li> <span>2009-4-9 12:35</span><a>我所不能了解的事</a> </li> </ul> </div> [Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
