html的map自適應

本文轉載自查看原文 2016-08-07 14:39 1902 html

Map常識

請自己看吧:http://www.w3school.com.cn/tags/tag_map.asp

Map自適應

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            html,body{padding: 0; margin: 0;}
        </style>
    </head>
    <body>
        <img src="img/img.jpg" border="0" usemap="#planetmap" alt="Planets"  width="100%"/>
        <map name="planetmap" id="planetmap">
            <area shape="rect" coords="130,40,136,60"   id="eye"  href ="#" alt="eye" />
        </map>
        <script type="text/javascript" src="js/jquery-2.1.4.min.js" ></script>
        <script>
            $("#eye").click(function(){
                alert("眼睛");
            })
            
            //重新定位map位置
            function rsz(){
                //正常情況下為386尺寸:計算比例
                var bl=$("body").innerWidth()/386;
                var x1=bl*130;
                var y1=bl*40;
                var x2=bl*136;
                var y2=bl*60;
                
                //重新計算位置
                $("#eye").attr({"coords":x1+","+y1+","+x2+","+y2})
            }
            
            //窗口寬度改變時執行
            $(window).resize(function() {
                rsz();
            });
            
            //頁面初始化時候執行
            $(function(){
                rsz();
            })
        </script>
    </body>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Html-自適應 html自適應界面 html中map area 熱區自適應的原生js實現方案 html頁面自適應寬度【html】iframe 的高度自適應 html iframe高度自適應 html layui高度自適應 HTML熱區map坐標，隨窗口大小自適應辦法（javascript）錨點自適應 map area coords HTML5移動端實現自適應