报纸查阅
2016-05-12 10:54
483 查看
<!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" />
<title>报纸查阅</title>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<style>
.page{width:709px; height:auto; margin:0 auto;}
.page .prev,.page .next{ width:334px; float:left; text-align:center; cursor:pointer;}
.main{width:709px; height:auto; margin:0 auto;}
</style>
</head>
<script>
//获取热区范围信息
function getOffset(obj) {
var x = obj.offsetLeft,
y = obj.offsetTop;
while (obj.offsetParent) {
obj = obj.offsetParent;
x += obj.offsetLeft;
y += obj.offsetTop;
}
return {
x: x,
y: y
};
};
//鼠标划过添加红色边框
function showBorder(obj,a) {
var img = document.getElementById(a);
var div = document.getElementById("border");//id名称可以改
var offset = getOffset(img);
var coords = obj.coords.split(",");
div.style.display = "block";
div.style.left = offset.x + parseInt(coords[0]) + "px";
div.style.top = offset.y + parseInt(coords[1]) + "px";
div.style.width = parseInt(coords[2]) - parseInt(coords[0]) + "px";
div.style.height = parseInt(coords[3]) - parseInt(coords[1]) + "px";
}
//鼠标离开添加红色边框
function hideBorder() {
document.getElementById("border").style.display = "none";//id名称可以改
}
//以下是上一页下一页按钮
$(document).ready(function(){
//上一个
$(".prev").click(function(){//class名称可以改
var p=$(".main .myytp");//class名称可以改
var len=p.length;
for(var i=0; i<len; i++){
if (p.eq(i).css("display") == "block" && i==0)
{
alert("上一个没有了");//提示文字可以改
break;
}else if(p.eq(i).css("display") == "block")
{
p.eq(i-1).show().siblings().hide();
break;
}
}
});
//下一个
$(".next").click(function(){//class名称可以改
var p=$(".main .myytp");//class名称可以改
var len=p.length;
for(var i=0; i<len; i++){
if (p.eq(i).css("display") == "block" && i==len-1)
{
alert("已经是最后一个了");//提示文字可以改
break;
}else if(p.eq(i).css("display") == "block")
{
p.eq(i+1).show().siblings().hide();
break;
}
}
});
});
</script>
<body>
<!--分页按钮-->
<div class="page">
<div class="prev"><img src="images/prev.jpg" /></div>
<div class="next"><img src="images/next.jpg" /></div>
</div>
<!--主体每一张报纸-->
<div class="main">
<!--myytp我下面放了3张报纸-->
<div class="myytp">
<img src="images/1.jpg" width="709" height="1024"usemap="#bdMap" id="tp1" style="margin:0" border="0" />
<map name="bdMap" id="bdMap">
<area shape="rect" coords="166,82,573,168" href="#" onmouseover="showBorder(this,'tp1');" onmouseout="hideBorder()" />
<area shape="rect" coords="18,154,117,450" href="#" onmouseover="showBorder(this,'tp1');" onmouseout="hideBorder()"/>
<area shape="rect" coords="170,232,317,419" href="#" onmouseover="showBorder(this,'tp1');" onmouseout="hideBorder()"/>
<area shape="rect" coords="363,253,508,398" href="#" onmouseover="showBorder(this,'tp1');" onmouseout="hideBorder()" />
<area shape="rect" coords="18,80,114,148" href="#" onmouseover="showBorder(this,'tp1');" onmouseout="hideBorder()"/>
<area shape="rect" coords="33,484,675,849" href="#" onmouseover="showBorder(this,'tp1');" onmouseout="hideBorder()" />
</map>
</div>
<div class="myytp">
<img src="images/2.jpg" width="709" height="1024" usemap="#Map" id="tp2" border="0"/>
<map name="Map" id="Map">
<area shape="rect" coords="69,78,356,222" href="#" onmouseover="showBorder(this,'tp2');" onmouseout="hideBorder()"/>
<area shape="rect" coords="433,119,692,337" href="#" onmouseover="showBorder(this,'tp2');" onmouseout="hideBorder()"/>
<area shape="rect" coords="40,275,332,559" href="#" onmouseover="showBorder(this,'tp2');" onmouseout="hideBorder()"/>
<area shape="rect" coords="388,405,675,678" href="#" onmouseover="showBorder(this,'tp2');" onmouseout="hideBorder()" />
</map>
</div>
<div class="myytp">
<img src="images/3.jpg" width="709" height="1024" usemap="#Map1" id="tp3" border="0"/>
<map name="Map1" id="Map1">
<area shape="rect" coords="38,191,323,331" href="#" onmouseover="showBorder(this,'tp3');" onmouseout="hideBorder()"/>
<area shape="rect" coords="411,199,670,417" href="#" onmouseover="showBorder(this,'tp3');" onmouseout="hideBorder()"/>
<area shape="rect" coords="26,385,318,669" href="#" onmouseover="showBorder(this,'tp3');" onmouseout="hideBorder()"/>
<area shape="rect" coords="350,458,637,731" href="#" onmouseover="showBorder(this,'tp3');" onmouseout="hideBorder()" />
</map>
</div>
</div>
<!--分页按钮-->
<div class="page">
<div class="prev"><img src="images/prev.jpg" /></div>
<div class="next"><img src="images/next.jpg" /></div>
</div>
<!--划过热区时红色的边框线-->
<div id="border" style=" display:none; position:absolute;border:2px solid #FF0000; "></div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>报纸查阅</title>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<style>
.page{width:709px; height:auto; margin:0 auto;}
.page .prev,.page .next{ width:334px; float:left; text-align:center; cursor:pointer;}
.main{width:709px; height:auto; margin:0 auto;}
</style>
</head>
<script>
//获取热区范围信息
function getOffset(obj) {
var x = obj.offsetLeft,
y = obj.offsetTop;
while (obj.offsetParent) {
obj = obj.offsetParent;
x += obj.offsetLeft;
y += obj.offsetTop;
}
return {
x: x,
y: y
};
};
//鼠标划过添加红色边框
function showBorder(obj,a) {
var img = document.getElementById(a);
var div = document.getElementById("border");//id名称可以改
var offset = getOffset(img);
var coords = obj.coords.split(",");
div.style.display = "block";
div.style.left = offset.x + parseInt(coords[0]) + "px";
div.style.top = offset.y + parseInt(coords[1]) + "px";
div.style.width = parseInt(coords[2]) - parseInt(coords[0]) + "px";
div.style.height = parseInt(coords[3]) - parseInt(coords[1]) + "px";
}
//鼠标离开添加红色边框
function hideBorder() {
document.getElementById("border").style.display = "none";//id名称可以改
}
//以下是上一页下一页按钮
$(document).ready(function(){
//上一个
$(".prev").click(function(){//class名称可以改
var p=$(".main .myytp");//class名称可以改
var len=p.length;
for(var i=0; i<len; i++){
if (p.eq(i).css("display") == "block" && i==0)
{
alert("上一个没有了");//提示文字可以改
break;
}else if(p.eq(i).css("display") == "block")
{
p.eq(i-1).show().siblings().hide();
break;
}
}
});
//下一个
$(".next").click(function(){//class名称可以改
var p=$(".main .myytp");//class名称可以改
var len=p.length;
for(var i=0; i<len; i++){
if (p.eq(i).css("display") == "block" && i==len-1)
{
alert("已经是最后一个了");//提示文字可以改
break;
}else if(p.eq(i).css("display") == "block")
{
p.eq(i+1).show().siblings().hide();
break;
}
}
});
});
</script>
<body>
<!--分页按钮-->
<div class="page">
<div class="prev"><img src="images/prev.jpg" /></div>
<div class="next"><img src="images/next.jpg" /></div>
</div>
<!--主体每一张报纸-->
<div class="main">
<!--myytp我下面放了3张报纸-->
<div class="myytp">
<img src="images/1.jpg" width="709" height="1024"usemap="#bdMap" id="tp1" style="margin:0" border="0" />
<map name="bdMap" id="bdMap">
<area shape="rect" coords="166,82,573,168" href="#" onmouseover="showBorder(this,'tp1');" onmouseout="hideBorder()" />
<area shape="rect" coords="18,154,117,450" href="#" onmouseover="showBorder(this,'tp1');" onmouseout="hideBorder()"/>
<area shape="rect" coords="170,232,317,419" href="#" onmouseover="showBorder(this,'tp1');" onmouseout="hideBorder()"/>
<area shape="rect" coords="363,253,508,398" href="#" onmouseover="showBorder(this,'tp1');" onmouseout="hideBorder()" />
<area shape="rect" coords="18,80,114,148" href="#" onmouseover="showBorder(this,'tp1');" onmouseout="hideBorder()"/>
<area shape="rect" coords="33,484,675,849" href="#" onmouseover="showBorder(this,'tp1');" onmouseout="hideBorder()" />
</map>
</div>
<div class="myytp">
<img src="images/2.jpg" width="709" height="1024" usemap="#Map" id="tp2" border="0"/>
<map name="Map" id="Map">
<area shape="rect" coords="69,78,356,222" href="#" onmouseover="showBorder(this,'tp2');" onmouseout="hideBorder()"/>
<area shape="rect" coords="433,119,692,337" href="#" onmouseover="showBorder(this,'tp2');" onmouseout="hideBorder()"/>
<area shape="rect" coords="40,275,332,559" href="#" onmouseover="showBorder(this,'tp2');" onmouseout="hideBorder()"/>
<area shape="rect" coords="388,405,675,678" href="#" onmouseover="showBorder(this,'tp2');" onmouseout="hideBorder()" />
</map>
</div>
<div class="myytp">
<img src="images/3.jpg" width="709" height="1024" usemap="#Map1" id="tp3" border="0"/>
<map name="Map1" id="Map1">
<area shape="rect" coords="38,191,323,331" href="#" onmouseover="showBorder(this,'tp3');" onmouseout="hideBorder()"/>
<area shape="rect" coords="411,199,670,417" href="#" onmouseover="showBorder(this,'tp3');" onmouseout="hideBorder()"/>
<area shape="rect" coords="26,385,318,669" href="#" onmouseover="showBorder(this,'tp3');" onmouseout="hideBorder()"/>
<area shape="rect" coords="350,458,637,731" href="#" onmouseover="showBorder(this,'tp3');" onmouseout="hideBorder()" />
</map>
</div>
</div>
<!--分页按钮-->
<div class="page">
<div class="prev"><img src="images/prev.jpg" /></div>
<div class="next"><img src="images/next.jpg" /></div>
</div>
<!--划过热区时红色的边框线-->
<div id="border" style=" display:none; position:absolute;border:2px solid #FF0000; "></div>
</body>
</html>
相关文章推荐
- WordPress 单页面上一页下一页的实现方法【附代码】
- JavaScript获得当前网页来源页面(即上一页)的方法
- 点图片上一页下一页翻页效果
- ASP.NET返回上一页面的实现代码
- js返回上一页并刷新代码整理
- php获取文章上一页与下一页的方法
- js实现上一页下一页的效果【附代码】
- 鼠标滑过弹出层
- 接收上一页提交参数的书包pPage
- 【更新】比较智能的爬取姓名
- js返回上一页效果
- js返回上一页
- 防止点浏览器返回按钮,返回上一页的JS方法
- 万能分页显示上一页下一页
- 仿京东轮播图
- 织梦DedeCms文章上一篇、下一篇修改
- PHP简单实现上一页下一页功能示例
- python学习笔记--虫师
- android源码分析之Camera API2.0
- android 音效处理 (2)