HTML5中，如何为图片制作放大镜效果？-PHP中文网问答

HTML5中，如何为图片制作放大镜效果？

PHP中文网 2017-04-17 13:40:34

[HTML讨论组]

842

PHP中文网

认证高级PHP讲师

全部回复(2)

巴扎黑2017-04-17 13:42:34 2楼

在文档中显示缩略图, 通过getComputedStyle来获取缩略图大小, 并映射成真实大小的图片尺寸;
给缩略图添加mouseon事件, 当鼠标处在缩略图上时显示放大镜元素; 反之则移除
给缩略图添加mousemove事件, 读取event.offsetX和event.offsetY, 并根据1中的关系换算成在放大的图片中应该显示的部分;
在放大镜中添加图片, 并通过position:absolute来定位和移动图片.

文字说得可能不是很清楚, 待我写个demo...

https://jsfiddle.net/hymin/9j...

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Magnifier Demo</title>
    <style>
       //container用来放缩略图
        p.container{
            width:400px;
            margin: 100px auto;
        }
        p.container > img{
            width: 100%; 
        }
        //magnifier用来放实际大小的图片. 注意overflow, display和position属性
        p.magnifier{
            width: 400px; 
            height: 400px; 
            position: relative;
            overflow: hidden;
            margin: 50px auto;
            display: none;
        }
        p.magnifier > img{
            position: absolute;
        }
        //当鼠标hover在缩略图上时, 显示后一个p, 即magnifier元素
        p.container:hover + p{
            display: block;
        }
    </style>
</head>
<body>
    <p class='container'><img src="cooper.jpg" alt=""></p>
    <p class="magnifier"><img src="cooper.jpg" alt=""></p>
    //用来显示坐标
    <span class='dataX'></span><span>, </span><span class='dataY'></span>
    <script>
        //需要在window.onload事件里完成, 否则获取不到图片正常高度
        window.onload = function(){
            //用起来方便些
            var selector = document.querySelector.bind(document); 
            //定义数据对象
            var data = {
                dataX: '', 
                dataY: ''
            }; 
            var img = selector('p.magnifier > img'); 
            var thumbnail = selector('p.container'); 
            var magnifier = selector('p.magnifier'); 

            var mousemoveTimer = null; 
            //获取缩略图大小
            var thumbnailX = thumbnail.clientWidth; 
            //确定转换系数, 例如在缩略图上移动1px, 则真实图片需要移动6px
            var converter = img.naturalWidth/thumbnailX; 

            selector('p.container > img').addEventListener('mousemove', function(e) {
                    //写数据
                    data.dataX = e.offsetX; 
                    data.dataY = e.offsetY; 
                    //移动图片位置
                    img.style.left = '-' + e.offsetX*converter + 'px'; 
                    img.style.top = '-' + e.offsetY*converter + 'px'; 
            }); 
            //视图和数据结构绑定
            Object.defineProperty(data, 'dataX', {
                set: function(val){
                    selector('span.dataX').innerHTML = val; 
                }
            })
            Object.defineProperty(data, 'dataY', {
                set: function(val){
                    selector('span.dataY').innerHTML = val; 
                }
            })
            // debugger; 
        }
    </script>
</body>
</html>

赞 +0

添加回复

大家讲道理2017-04-17 13:42:34 1楼

我一直喜欢只用CSS加HTML制作一些效果，而尽量避免js。
以下是我的思路。

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

    <p class="test">
        <p class="inner">
            <img src="slide2.jpg" alt="none">
        </p>
    </p>
</body>
</html>

第一层p嵌套背景原图。
第二层p制作放大镜形状。
内部的img来实现放大，并且在第二层加上overflow：hidden。可以使得内容被限制在放大镜中。

.test{
    position: relative;
    width: 500px;
    height: 333px;
    background:black url(slide2.jpg);
    background-size: cover;
}

.inner{
    width: 200px;
    height: 200px;
    background-size: cover;
    border: 2px solid black;
    box-shadow: 2px 2px 10px gray;
    border-radius: 80%;
    overflow: hidden;
}

.inner img{
    transform: scale(1.5) translate(15px,15px);
    width: 500px;
    height: 333px;
}

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>