主页 > 前端 > javascript >
来源：自学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>说明：按键盘← →方向键 或 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
