html的map自适应

最新推荐文章于 2023-06-05 09:48:02 发布

weixin_30799995

最新推荐文章于 2023-06-05 09:48:02 发布

阅读量86

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/dshvv/p/5746117.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>

转载于:https://www.cnblogs.com/dshvv/p/5746117.html

weixin_30799995

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html的map自适应

Map常识请自己看吧:http://www.w3school.com.cn/tags/tag_map.aspMap自适应<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title&gt...
复制链接

扫一扫