在静态图片上加跳转链接

最新推荐文章于 2023-05-18 11:25:11 发布

原创最新推荐文章于 2023-05-18 11:25:11 发布 · 1.6k 阅读

2 ·

CC 4.0 BY-SA版权

前端同时被 3 个专栏收录

33 篇文章

订阅专栏

javascript

12 篇文章

订阅专栏

网页

7 篇文章

订阅专栏

开发中常会遇到一张静态图片,需要点击图片不同位置跳转链接如下图

在这里插入图片描述

因为手机屏幕的大小不同,设置图片宽度为100%,根据浏览器渲染图片机制,高度会根据宽度等比例缩放
<img src="https://wodan-idc.oss-cn-hangzhou.aliyuncs.com/shijianke-wap/h5/test/img/doushanzhuanti.jpg" width="100%"/>
计算浏览器可见区域的宽度

        function getclientWidth() {
            var clientWidth;
            if (document.body.clientWidth && document.documentElement.clientWidth) {
                clientWidth = (document.body.clientWidth < document.documentElement.clientWidth) ? document.body.clientWidth : document.documentElement.clientWidth;
            } else {
                clientWidth = (document.body.clientWidth > document.documentElement.clientWidth) ? document.body.clientWidth : document.documentElement.clientWidth;
            }
            return clientWidth;
        }

以iphone6 的屏幕宽度375作为标准计算缩放比率,所有的参数都用这个比率来计算代码如下

  function init() {
            var rate = getclientWidth() / 375  //以iphone6 的屏幕宽度375作为标准 计算缩放比率
            var linkWidth = '100vw'
            var linkHeight = 100 * rate + 'px'
            var linkMb = 10 * rate + 'px'
            var pBox = document.getElementById('hotLinkBox')
            pBox.style.paddingTop = 200 * rate + 'px'
            var links = ['https://m.jianke.cc/job/291f4e00-041b-4dc4-b781-3b922906a08f.html', 'https://m.jianke.cc/job/92048c7f-6a11-4433-bf9f-232379ed387c.html', 'https://m.jianke.cc/job/94e57209-92a6-4d95-923e-c024c3a382d8.html',
                'https://m.jianke.cc/job/67d35d10-524d-4914-b45b-e75d9e5c501a.html', 'https://m.jianke.cc/job/07fa38bd-7c09-4c36-a29f-020ae20cedb3.html', 'https://m.jianke.cc/job/3e3c9d34-4910-4e36-9f02-79daee3b1442.html']
            links.forEach(function (item){
                var hotLink = document.createElement('div')
                var link = document.createElement('a')
                link.setAttribute('href', item)
                hotLink.appendChild(link)
                link.style.height = linkHeight
                link.style.width = linkWidth
                link.style.marginBottom = linkMb
                pBox.appendChild(hotLink)
            })

        }
<style>
    html, body {
        padding: 0;
        margin: 0;
    }

    a {
        display: block;
    }

    .hot-link-box {
        width: 100vw;
        position: absolute;
        top: 0;
        left: 0;
        padding-top: 200px;
    }
</style>