支持键盘方向键和鼠标滚轮翻页效果

8个月前 (03-18 10:53)阅读回复0
大陆
大陆
  • 管理员
  • 发消息
  • 注册排名1
  • 经验值5294
  • 级别管理员
  • 主题1058
  • 回复2
楼主

可以通过鼠标滚轮和键盘方向键实现翻页功能，这个翻页特效支持火狐浏览器，实用js特效代码。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。">
<title>支持键盘方向键和鼠标滚轮翻页效果_武鸣人</title>
<style type="text/css">
*{margin:0;padding:0;}
img{border:0;}
li{list-style:none;}
a{text-decoration:none;}
a:hover{text-decoration:underline;}
body{background:#262626;font-size:9px;font-family:Verdana,Geneva,sans-serif;}
.wuming_ren{position:relative;width:960px;margin:50px 50px 50px 50px;}
.list{width:670px;}
.entry{float:left;width:202px;position:relative;margin:10px;_display:inline;}
.entry a{display:block;text-decoration:none;border:1px #525252 solid;}
.entry a:hover{border:1px #999 solid;}
.entry .url{position:absolute;left:1px;bottom:1px;height:28px;width:200px;background:#000;text-align:center;filter:alpha(opacity=80);-moz-opacity:0.8;opacity:0.8;}
.entry .url span{display:block;border:0;color:#fff;margin-top:6px;padding:2px;font-weight:bold;}
._wuming{position:absolute;right:45px;top:10px;width:216px;padding:10px;background:#393939;border:1px #555 solid;color:#fff;}
._wuming li{margin-bottom:4px;}
._wuming li.mt10{margin-bottom:10px;}
#url, #company , #description{color:#999;}
._wuming a{color:#999;}
._wuming a:hover{color:#fff;}
#content h1{color:#ccc;font-size:20px;text-align:center;padding:70px 0;}
#wumingren{clear:both;color:#fff;}
#wumingren a{color:#fff;}
#total{float:left;}
#_wuming_ren{float:right;}
.f90{color:#f90;}
</style>
<script type="text/javascript">
var siteList = {"sites":[
 {"Url":"https://www.wuming.ren","Pic":"/img/20240318_www_wuming_ren_5.jpg","Name":"武鸣人一号"},
 {"Url":"https://www.wuming.ren","Pic":"/img/20240318_www_wuming_ren_5.jpg","Name":"武鸣人二号"},
 {"Url":"https://www.wuming.ren","Pic":"/img/20240318_www_wuming_ren_5.jpg","Name":"武鸣人三号"},
 {"Url":"https://www.wuming.ren","Pic":"/img/20240318_www_wuming_ren_5.jpg","Name":"武鸣人四号"},
 {"Url":"https://www.wuming.ren","Pic":"/img/20240318_www_wuming_ren_5.jpg","Name":"武鸣人五号"},
 {"Url":"https://www.wuming.ren","Pic":"/img/20240318_www_wuming_ren_5.jpg","Name":"武鸣人六号"},
 {"Url":"https://www.wuming.ren","Pic":"/img/20240318_www_wuming_ren_5.jpg","Name":"武鸣人七号"},
 {"Url":"https://www.wuming.ren","Pic":"/img/20240318_www_wuming_ren_5.jpg","Name":"武鸣人八号"},
 {"Url":"https://www.wuming.ren","Pic":"/img/20240318_www_wuming_ren_5.jpg","Name":"武鸣人九号"},
 {"Url":"https://www.wuming.ren","Pic":"/img/20240318_www_wuming_ren_5.jpg","Name":"武鸣人十号"},
 {"Url":"https://www.wuming.ren","Pic":"/img/20240318_www_wuming_ren_5.jpg","Name":"武鸣人十一号"},
 {"Url":"https://www.wuming.ren","Pic":"/img/20240318_www_wuming_ren_5.jpg","Name":"武鸣人十二号"},
 {"Url":"https://www.wuming.ren","Pic":"/img/20240318_www_wuming_ren_5.jpg","Name":"武鸣人十三号"},
 {"Url":"https://www.wuming.ren","Pic":"/img/20240318_www_wuming_ren_5.jpg","Name":"武鸣人十四号"},
 {"Url":"https://www.wuming.ren","Pic":"/img/20240318_www_wuming_ren_5.jpg","Name":"武鸣人十五号"},
 {"Url":"https://www.wuming.ren","Pic":"/img/20240318_www_wuming_ren_5.jpg","Name":"武鸣人十六号"},
 {"Url":"https://www.wuming.ren","Pic":"/img/20240318_www_wuming_ren_5.jpg","Name":"武鸣人十七号"},
 {"Url":"https://www.wuming.ren","Pic":"/img/20240318_www_wuming_ren_5.jpg","Name":"武鸣人十八号"},
 {"Url":"https://www.wuming.ren","Pic":"/img/20240318_www_wuming_ren_5.jpg","Name":"武鸣人十九号"},
 {"Url":"https://www.wuming.ren","Pic":"/img/20240318_www_wuming_ren_5.jpg","Name":"武鸣人二十号"},
 {"Url":"https://www.wuming.ren","Pic":"/img/20240318_www_wuming_ren_5.jpg","Name":"武鸣人二十一号"},
 {"Url":"https://www.wuming.ren","Pic":"/img/20240318_www_wuming_ren_5.jpg","Name":"武鸣人二十二号"},
 {"Url":"https://www.wuming.ren","Pic":"/img/20240318_www_wuming_ren_5.jpg","Name":"武鸣人二十三号"},
 {"Url":"https://www.wuming.ren","Pic":"/img/20240318_www_wuming_ren_5.jpg","Name":"武鸣人二十四号"},
 {"Url":"https://www.wuming.ren","Pic":"/img/20240318_www_wuming_ren_5.jpg","Name":"武鸣人二十五号"},
 {"Url":"https://www.wuming.ren","Pic":"/img/20240318_www_wuming_ren_5.jpg","Name":"武鸣人二十六号"},
 {"Url":"https://www.wuming.ren","Pic":"/img/20240318_www_wuming_ren_5.jpg","Name":"武鸣人二十七号"},
 {"Url":"https://www.wuming.ren","Pic":"/img/20240318_www_wuming_ren_5.jpg","Name":"武鸣人二十八号"},
 {"Url":"https://www.wuming.ren","Pic":"/img/20240318_www_wuming_ren_5.jpg","Name":"武鸣人二十九号"},
 {"Url":"https://www.wuming.ren","Pic":"/img/20240318_www_wuming_ren_5.jpg","Name":"武鸣人三十号"},
 {"Url":"https://www.wuming.ren","Pic":"/img/20240318_www_wuming_ren_5.jpg","Name":"武鸣人三十一号"},
 {"Url":"https://www.wuming.ren","Pic":"/img/20240318_www_wuming_ren_5.jpg","Name":"武鸣人三十二号"},
 {"Url":"https://www.wuming.ren","Pic":"/img/20240318_www_wuming_ren_5.jpg","Name":"武鸣人三十三号"},
 {"Url":"https://www.wuming.ren","Pic":"/img/20240318_www_wuming_ren_5.jpg","Name":"武鸣人三十四号"},
 {"Url":"https://www.wuming.ren","Pic":"/img/20240318_www_wuming_ren_5.jpg","Name":"武鸣人三十五号"},
 {"Url":"https://www.wuming.ren","Pic":"/img/20240318_www_wuming_ren_5.jpg","Name":"武鸣人三十六号"},
 {"Url":"https://www.wuming.ren","Pic":"/img/20240318_www_wuming_ren_5.jpg","Name":"武鸣人三十七号"},
 {"Url":"https://www.wuming.ren","Pic":"/img/20240318_www_wuming_ren_5.jpg","Name":"武鸣人三十八号"},
 {"Url":"https://www.wuming.ren","Pic":"/img/20240318_www_wuming_ren_5.jpg","Name":"武鸣人三十九号"},
 {"Url":"https://www.wuming.ren","Pic":"/img/20240318_www_wuming_ren_5.jpg","Name":"武鸣人四十号"},
 {"Url":"https://www.wuming.ren","Pic":"/img/20240318_www_wuming_ren_5.jpg","Name":"武鸣人四十一号"},
 {"Url":"https://www.wuming.ren","Pic":"/img/20240318_www_wuming_ren_5.jpg","Name":"武鸣人四十二号"},
 {"Url":"https://www.wuming.ren","Pic":"/img/20240318_www_wuming_ren_5.jpg","Name":"武鸣人四十三号"},
 {"Url":"https://www.wuming.ren","Pic":"/img/20240318_www_wuming_ren_5.jpg","Name":"武鸣人四十四号"},
 {"Url":"https://www.wuming.ren","Pic":"/img/20240318_www_wuming_ren_5.jpg","Name":"武鸣人四十五号"},
 {"Url":"https://www.wuming.ren","Pic":"/img/20240318_www_wuming_ren_5.jpg","Name":"武鸣人四十六号"}
 ]
}
</script>
</head>
<a href="https://www.wuming.ren">武鸣人</a>，各种信息资源免费发布，分享励志语录经典短句，减肥健身常识，各种js特效代码。网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
<body onload="www_wuming_ren();">
<!--把下面代码加到<body>与</body>之间-->
<div class="wuming_ren">
 <div class="list">
     <div id="content"></div>
  <div id="wumingren">
            <div id="total"></div>
            <div id="_wuming_ren"></div>
        </div>
    </div>
    <div class="_wuming">
     <ul>
         <li>网址:</li>
         <li id="siteurl" class="mt10"><a href="https://www.wuming.ren">https://www.wuming.ren</a></li>
            <li>公司:</li>
            <li id="sitename" class="mt10">武鸣人</li>
            <li>描述:</li>
            <li id="description">本站主要记录个人减肥健身及各种日常生活琐事，分享互联网当下流行的励志语录经典短句，收集各种js网页特效代码！</li>
        </ul>
    </div>
</div>
<script type="text/javascript">
<!--//
function $(id){return document.getElementById(id);}//定义获取ID的方法
function GotoPage(num){//跳转页
 Page = num;
 www_wuming_ren();
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
var PageSize = 9;//每页个数
var Page = 1;//当前页码
function www_wuming_ren(){
 var obj = eval(siteList);//获取JSON
 var sites = obj.sites;
 //获取分页总数
 var Pages = Math.floor((sites.length - 1) / PageSize) + 1;
 if(Page < 1)Page = 1;//如果当前页码小于1
 if(Page > Pages)Page = Pages;//如果当前页码大于总数
 var Temp = "";
 var BeginNO = (Page - 1) * PageSize + 1;//开始编号
 var EndNO = Page * PageSize;//结束编号
 if(EndNO > sites.length) EndNO = sites.length;
 if(EndNO == 0) BeginNO = 0;
 if(!(Page <= Pages)) Page = Pages;
 $("total").innerHTML = "Total:<strong class='f90'>" + sites.length + "</strong>  Show:<strong class='f90'>" + BeginNO + "-" + EndNO + "</strong>";
 //分页
 if(Page > 1 && Page !== 1){Temp ="<a href='javascript:void(0)' onclick='GotoPage(1)'><<Index</a> <a href='javascript:void(0)' onclick='GotoPage(" + (Page - 1) + ")'>Previous</a> "}else{Temp = "<<Index Previous "};
 //完美的翻页列表
 var PageFrontSum = 3;//当页前显示个数
 var PageBackSum = 3;//当页后显示个数
 var PageFront = PageFrontSum - (Page - 1);
 var PageBack = PageBackSum - (Pages - Page);
 if(PageFront > 0 && PageBack < 0)PageBackSum += PageFront;//前少后多，前剩余空位给后
 if(PageBack > 0 && PageFront < 0)PageFrontSum += PageBack;//后少前多，后剩余空位给前
 var PageFrontBegin = Page - PageFrontSum;
 if(PageFrontBegin < 1)PageFrontBegin = 1;
 var PageFrontEnd = Page + PageBackSum;
 if(PageFrontEnd > Pages)PageFrontEnd = Pages;
 if(PageFrontBegin != 1) Temp += '<a href="javascript:void(0)" onclick="GotoPage(' + (Page - 10) + ')" title="前10页">..</a>';
 for(var i = PageFrontBegin;i < Page;i ++){
  Temp += " <a href='javascript:void(0)' onclick='GotoPage(" + i + ")'>" + i + "</a>";
 }
 Temp += " <strong class='f90'>" + Page + "</strong>";
 for(var i = Page + 1;i <= PageFrontEnd;i ++){
  Temp += " <a href='javascript:void(0)' onclick='GotoPage(" + i + ")'>" + i + "</a>";
 }
 if(PageFrontEnd != Pages) Temp += " <a href='javascript:void(0)' onclick='GotoPage(" + (Page + 10) + ")' title='后10页'>..</a>";
 if(Page != Pages){Temp += "  <a href='javascript:void(0)' onclick='GotoPage(" + (Page + 1) + ");'>Next</a> <a href='javascript:void(0)' onclick='GotoPage(" + Pages + ")'>Last>></a>"}else{Temp += "  Next Last>>"}
 $("_wuming_ren").innerHTML = Temp;
 //输出数据
 if(EndNO == 0){//如果为空
  $("content").innerHTML += "<h1>No Images</h1>";
  return;
 }
 var html = "";
 for(var i = BeginNO - 1;i < EndNO;i ++){
  html += "<div class='entry'>";
  html += "<a href='" +sites[i].Url+ "' rel='bookmark' title=" +sites[i].Name+ ">";
  html += "<img src='" +sites[i].Pic+ "' width='200' height='170' />";
  html += "<p class='url'><span>" +sites[i].Name+ "</span></p></a>";
  html += "</div>";
 }
 $("content").innerHTML = html;
 clickShow();//调用鼠标点击事件
 //键盘左右键翻页
 document.onkeydown=function(e){
  var theEvent = window.event || e;
  var code = theEvent.keyCode || theEvent.which;
  if(code==37){
   if(Page > 1 && Page !== 1){
    GotoPage(Page - 1);
   }
  }
  if(code==39){
   if(Page != Pages){
    GotoPage(Page + 1);
   }
  }
 }
 //鼠标滚轮翻页
function handle(delta){
 if (delta > 0){
  if(Page > 1 && Page !== 1){
   GotoPage(Page - 1);
  }
 }
 else{
  if(Page != Pages){
   GotoPage(Page + 1);
  }
 }
}
function wheel(event){
 var delta = 0;
 if (!event) /* For IE. */
  event = window.event;
 if (event.wheelDelta) { /* IE或者Opera. */
  delta = event.wheelDelta / 120;
  /** 在Opera9中，事件处理不同于IE
  */
 if (window.opera)
  delta = -delta;
 } else if (event._wuming) { /** 兼容Mozilla. */
 /** In Mozilla, sign of delta is different than in IE.
 * Also, delta is multiple of 3.
 */
 delta = -event._wuming / 3;
 }
 /** 如果 增量不等于0则触发
 * 主要功能为测试滚轮向上滚或者是向下
 */
 if (delta)
  handle(delta);
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
/** 初始化 */
if (window.addEventListener)
 /** Mozilla的基于DOM的滚轮事件 **/
 window.addEventListener("DOMMouseScroll", wheel, false);
 /** IE/Opera. */
 window.onmousewheel = document.onmousewheel = wheel;
}
//获取链接地址和网站名称
function showLink(source){
 var siteUrl = $("siteurl");
 var siteName = $("sitename");
 var description = $("description");
 if(source.getAttribute("rel") == "bookmark"){
  var url = source.getAttribute("href");
  var title = source.getAttribute("title");
  siteUrl.innerHTML = "<a href='" + url + "' target='_blank'>"+ url +"</a>";
  siteName.innerHTML = title;
 }
}
//鼠标点击事件
function clickShow(){
 var links = $("content").getElementsByTagName("a");
 for(var i=0; i<links.length; i++){
  var url = links[i].getAttribute("href");
  var title = links[i].getAttribute("title");
  links[i].onclick = function(){
   showLink(this);
   return false;
  }
 }
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
//-->
</script>
</body>
</html>


赞0
踩0
☆收藏0

本文来自武鸣人网站，转载请注明出处

本文地址：https://www.wuming.ren/a/318.html

方向键翻页
回帖

支持键盘方向键和鼠标滚轮翻页效果 期待您的回复！

取消
载入表情清单……
载入颜色清单……
插入网络图片

取消确定

图片上传中
编辑器信息
提示信息