网站地图    收藏   

主页 > 前端 > javascript >

js控制键盘左右键翻页特效代码

来源:自学PHP网    时间:2016-06-14 16:24 作者: 阅读:

[导读] 本文章来给大家推荐两个js控制键盘左右键翻页特效代码,有需要使用的朋友可进入参考。...

例1

<SCRIPT language=javascript> 
document.onkeydown = pageEvent; 
var prevpage="http://www.111cn.net/"; 
var nextpage="http://www.111cn.net/"; 
function pageEvent(evt){ 
evt = evt ||window.event; 
var key=evt.which||evt.keyCode; 
if (key == 37) location = prevpage 
if (key == 39) location = nextpage 
}; 
</SCRIPT>

说明:按键盘&larr; &rarr;方向键 或 PageUp PageDown键直接翻页

上面只是一个核心代码,下面我们来看实例应用


<!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特效,js脚本,脚本,广告代码,111cn,111cn.net,sky,www.111cn.net,站长特效 网" />
<meta name="description" content="www.111cn.net,站长特效网,站长必备js特效及广告代码。大量高质量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;}
.111cn_net{position:relative;width:960px;margin:0 auto;}
.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;}
._111cnnet{position:absolute;right:45px;top:10px;width:216px;padding:10px;background:#393939;border:1px #555 solid;color:#fff;}
._111cnnet li{margin-bottom:4px;}
._111cnnet li.mt10{margin-bottom:10px;}
#url, #company , #description{color:#999;}
._111cnnet a{color:#999;}
._111cnnet a:hover{color:#fff;}
#content h1{color:#ccc;font-size:20px;text-align:center;padding:70px 0;}
#111cnnet{clear:both;color:#fff;}
#111cnnet a{color:#fff;}
#total{float:left;}
#_111cn_net{float:right;}
.f90{color:#f90;}
</style>
<script type="text/javascript">
var siteList = {"sites":[
 {"Url":"http://111cn.net","Pic":"/img/111cn_net_201008112.jpg","Name":"站长特效一号"},
 {"Url":"http://111cn.net","Pic":"/img/111cn_net_201008112.jpg","Name":"站长特效二号"},
 {"Url":"http://www.111cn.net","Pic":"/img/111cn_net_201008112.jpg","Name":"站长特效三号"},
 {"Url":"http://www.111cn.net","Pic":"/img/111cn_net_201008112.jpg","Name":"站长特效四号"},
 {"Url":"http://www.111cn.net","Pic":"/img/111cn_net_201008112.jpg","Name":"站长特效五号"},
 {"Url":"http://www.111cn.net","Pic":"/img/111cn_net_201008112.jpg","Name":"站长特效六号"},
 {"Url":"http://www.111cn.net","Pic":"/img/111cn_net_201008112.jpg","Name":"站长特效七号"},
 {"Url":"http://www.111cn.net","Pic":"/img/111cn_net_201008112.jpg","Name":"站长特效八号"},
 {"Url":"http://www.111cn.net","Pic":"/img/111cn_net_201008112.jpg","Name":"站长特效九号"},
 {"Url":"http://www.111cn.net","Pic":"/img/111cn_net_201008112.jpg","Name":"站长特效十号"},
 {"Url":"http://www.111cn.net","Pic":"/img/111cn_net_201008112.jpg","Name":"站长特效十一号"},
 {"Url":"http://www.111cn.net","Pic":"/img/111cn_net_201008112.jpg","Name":"站长特效十二号"},
 {"Url":"http://www.111cn.net","Pic":"/img/111cn_net_201008112.jpg","Name":"站长特效十三号"},
 {"Url":"http://www.111cn.net","Pic":"/img/111cn_net_201008112.jpg","Name":"站长特效十四号"},
 {"Url":"http://www.111cn.net","Pic":"/img/111cn_net_201008112.jpg","Name":"站长特效十五号"},
 {"Url":"http://www.111cn.net","Pic":"/img/111cn_net_201008112.jpg","Name":"站长特效十六号"},
 {"Url":"http://www.111cn.net","Pic":"/img/111cn_net_201008112.jpg","Name":"站长特效十七号"},
 {"Url":"http://www.111cn.net","Pic":"/img/111cn_net_201008112.jpg","Name":"站长特效十八号"},
 {"Url":"http://www.111cn.net","Pic":"/img/111cn_net_201008112.jpg","Name":"站长特效十九号"},
 {"Url":"http://www.111cn.net","Pic":"/img/111cn_net_201008112.jpg","Name":"站长特效二十号"},
 {"Url":"http://www.111cn.net","Pic":"/img/111cn_net_201008112.jpg","Name":"站长特效二十一号"},
 {"Url":"http://www.111cn.net","Pic":"/img/111cn_net_201008112.jpg","Name":"站长特效二十二号"},
 {"Url":"http://www.111cn.net","Pic":"/img/111cn_net_201008112.jpg","Name":"站长特效二十三号"},
 {"Url":"http://www.111cn.net","Pic":"/img/111cn_net_201008112.jpg","Name":"站长特效二十四号"},
 {"Url":"http://www.111cn.net","Pic":"/img/111cn_net_201008112.jpg","Name":"站长特效二十五号"},
 {"Url":"http://www.111cn.net","Pic":"/img/111cn_net_201008112.jpg","Name":"站长特效二十六号"},
 {"Url":"http://www.111cn.net","Pic":"/img/111cn_net_201008112.jpg","Name":"站长特效二十七号"},
 {"Url":"http://www.111cn.net","Pic":"/img/111cn_net_201008112.jpg","Name":"站长特效二十八号"},
 {"Url":"http://www.111cn.net","Pic":"/img/111cn_net_201008112.jpg","Name":"站长特效二十九号"},
 {"Url":"http://www.111cn.net","Pic":"/img/111cn_net_201008112.jpg","Name":"站长特效三十号"},
 {"Url":"http://www.111cn.net","Pic":"/img/111cn_net_201008112.jpg","Name":"站长特效三十一号"},
 {"Url":"http://www.111cn.net","Pic":"/img/111cn_net_201008112.jpg","Name":"站长特效三十二号"},
 {"Url":"http://www.111cn.net","Pic":"/img/111cn_net_201008112.jpg","Name":"站长特效三十三号"},
 {"Url":"http://www.111cn.net","Pic":"/img/111cn_net_201008112.jpg","Name":"站长特效三十四号"},
 {"Url":"http://www.111cn.net","Pic":"/img/111cn_net_201008112.jpg","Name":"站长特效三十五号"},
 {"Url":"http://www.111cn.net","Pic":"/img/111cn_net_201008112.jpg","Name":"站长特效三十六号"},
 {"Url":"http://www.111cn.net","Pic":"/img/111cn_net_201008112.jpg","Name":"站长特效三十七号"},
 {"Url":"http://111cnnet","Pic":"/img/111cn_net_201008112.jpg","Name":"站长特效三十八号"},
 {"Url":"http://www_111cn_net","Pic":"/img/111cn_net_201008112.jpg","Name":"站长特效三十九号"},
 {"Url":"http://_111cn_net","Pic":"/img/111cn_net_201008112.jpg","Name":"站长特效四十号"},
 {"Url":"http://_111cn_net","Pic":"/img/111cn_net_201008112.jpg","Name":"站长特效四十一号"},
 {"Url":"http://_111cn_net","Pic":"/img/111cn_net_201008112.jpg","Name":"站长特效四十二号"},
 {"Url":"http://_111cn_net","Pic":"/img/111cn_net_201008112.jpg","Name":"站长特效四十三号"},
 {"Url":"http://_111cn_net","Pic":"/img/111cn_net_201008112.jpg","Name":"站长特效四十四号"},
 {"Url":"http://_111cn_net","Pic":"/img/111cn_net_201008112.jpg","Name":"站长特效四十五号"},
 {"Url":"http://_111cn_net","Pic":"/img/111cn_net_201008112.jpg","Name":"站长特效四十六号"}
 ]
}
</script>
</head>
<a href="http://www.111cn.net/">站长特效网</a>,站长必备的高质量网页特效和广告代码。111cn.net,站长js特效。<hr>
<!--欢迎来到站长特效网,我们网站收集大量高质量js特效,提供许多广告代码下载,网址:www.111cn.net,111cn@msn.com,用.net打造靓站-->
<body onload="www_111cn_net();">
<!--把下面代码加到<body>与</body>之间-->
<div class="111cn_net">
 <div class="list">
     <div id="content"></div>
  <div id="111cnnet">
            <div id="total"></div>
            <div id="_111cn_net"></div>
        </div>
    </div>
    <div class="_111cnnet">
     <ul>
         <li>网址:</li>
         <li id="siteurl" class="mt10"><a href="http://111cn.net">http://www.111cn.net</a></li>
            <li>公司:</li>
            <li id="sitename" class="mt10">站长特效网</li>
            <li>描述:</li>
            <li id="description">专注网页特效及广告代码,打造国内最帅的网页特效站!欢迎收藏本站,或者推荐给你的好朋友!觉得好下次再来!站长特效网不会让你失望的!</li>
        </ul>
    </div>
</div>
<script type="text/javascript">
<!--//
function $(id){return document.getElementById(id);}//定义获取ID的方法
function GotoPage(num){//跳转页
 Page = num;
 www_111cn_net();
}//欢迎来到站长特效网,我们的网址是www.111cn.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
var PageSize = 9;//每页个数
var Page = 1;//当前页码
function www_111cn_net(){
 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>>"}
 $("_111cn_net").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._111cnnet) { /** 兼容Mozilla. */
 /** In Mozilla, sign of delta is different than in IE.
 * Also, delta is multiple of 3.
 */
 delta = -event._111cnnet / 3;
 }
 /** 如果 增量不等于0则触发
 * 主要功能为测试滚轮向上滚或者是向下
 */
 if (delta)
  handle(delta);
}/
/** 初始化 */
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;
  }
 }
}
//-->
</script>
</body>
</html>

 

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论