您的位置：首页 > 其它

报纸查阅

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">

  

        <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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 报纸查阅热区边框上一页下一页

相关文章推荐

新的分享

章节导航