拖拽放大镜　　购买查看照片

这里是用三张图做成一套放大镜

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Document</title>

</head>

<style>

*{

    padding: 0;

    margin: 0;

    list-style: none;

}

.box{

    width: 400px;

    height: 500px;

    margin-left:100px;

    /* border:3px solid #00f; */

}

.m{

    width: 400px;

    height: 400px;

    /* border:1px solid #000; */

    position: relative;

}

.small ul li{

    margin:0 5px;

    border:1px solid #0f0;

}

.small ul li img{

    vertical-align: middle;

}

.small ul{

    width: 400px;

    height: 100px;

    display:flex;

    align-items: center;

    justify-content: flex-start;

}

.small ul li.active{

    border-color:#f00;

}

.shade{

    width: 100px;

    height: 100px;

    background:rgba(255,255,0,0.5);

    position: absolute;

    left:0;

    top: 0;

    display:none;

}

.big{

    width: 400px;

    height: 400px;

    position:absolute;

    left:105%;

    top:0;

    border:solid;

    background-image:url("./images/big1.jpg");

    background-size:1600px 1600px;

    display:none;

    background-repeat:no-repeat;

}

.middle{

    width: 400px;

    height: 400px;

    border:1px solid #000;

    position:absolute;

    left:0;

    top:0;

}

.shade:hover{

    cursor:move;

}

/*

比例：

中等图和遮罩的比例 === 大图和大盒子的比例

400/100 === 1600/400

*/

</style>

<body>

<div class="box">

    <div class="m">

        <div class="middle">

            <img src="./images/middle1.jpg" alt="">

            <div class="shade"></div>

        </div>

        <div class="big"></div>

    </div>

    <div class="small">

        <ul>

            <li class="active"><a href="#"><img src="./images/small1.jpg" alt=""></a></li>

            <li><a href="#"><img src="./images/small2.jpg" alt=""></a></li>

        </ul>

    </div>

</div>

</body>

<script type="text/javascript">

// 遮罩在中等图片上移动过的距离/中等图片 === 大图移动的距离/大图

// 遮罩在中等图上向右移动了  中图1/4

// 大图就应该想左移动  大图的1/4

// 先做鼠标放到中等盒子上，遮罩和大盒子显示

function Enlarge(classname){

    // 将需要操作的元素都获取成对象属性

    this.box = document.querySelector("."+classname);

    this.m = this.box.querySelector(".m");

    this.middleImg = this.box.querySelector(".m img");

    this.middle = this.box.querySelector(".middle");

    this.shade = this.box.querySelector(".shade");

    this.ulis = this.box.querySelectorAll("ul li");

    this.big = this.box.querySelector(".big");

    var _this = this;

    // 绑定事件

    this.middle.onmouseenter = ()=>{

        this.over();

    }

    this.middle.onmouseleave= ()=>{

        // console.log(456);

        this.out();

    }

    // 点击小图的事件

    for(var i=0;i<this.ulis.length;i++){

        this.ulis[i].onclick = function(){

            _this.click(this);

        }

    }

}

// 定义点击小图方法

Enlarge.prototype.click = function(ele){

    // console.log(ele);

    // 将所有li的红框去掉

    for(var i=0;i<this.ulis.length;i++){

        this.ulis[i].style.borderColor = "#0f0"

    }

    // 给自己加红框

    ele.style.borderColor = "#f00";

    // 需要切换对应的中等图片

    // 先获取当前点击的li中的图片的路径

    // 先找到小图片这个标签

    var smallImg = ele.firstElementChild.firstElementChild;

    // 通过这个标签的src找路径 - src属性获取

    var smallPath = smallImg.getAttribute("src");

    // './images/small2.jpg'

    // str.slice(开始下标);

    // 点最后一次出现的位置

    var lastIndex = smallPath.lastIndexOf(".");

    // 根据点的位置截取数字以及后面的扩展名

    var suffix = smallPath.slice(lastIndex-1);

    // 拼接中等图片的路径

    var middlePath = "./images/middle" + suffix;

    // 给中等图片的img标签设置src属性

    this.middleImg.setAttribute("src",middlePath);

    // 设置大图的路径

    var bigPath = "./images/big"+suffix;

    // 设置给大盒子的背景

    this.big.style.backgroundImage = "url("+bigPath+")"

    // console.log(suffix);

}

// 定义鼠标离开中的图片上的方法

Enlarge.prototype.out = function(){

    this.shade.style.display = "none"

    this.big.style.display = "none"

}

// 定义鼠标放到中等图片上的方法

Enlarge.prototype.over = function(){

    // console.log(123);

    this.shade.style.display = "block"

    this.big.style.display = "block"

    var _this = this;

    // 需要一个鼠标移动事件

    this.middle.onmousemove=function(e){

        // console.log(123);

        // 拖拽- 需要获取光标位置

        var e = e || window.event;

        var x = e.pageX;

        var y = e.pageY;

        // console.log(x,y);

        var l = x - _this.box.offsetLeft - this.offsetLeft - _this.shade.offsetWidth/2;

        if(l<=0){

            l=0;

        }

        if(l>=this.clientWidth - _this.shade.offsetWidth){

            l=this.clientWidth - _this.shade.offsetWidth

        }

        _this.shade.style.left = l + "px";

        var t = y - _this.box.offsetTop - this.offsetTop - _this.shade.offsetHeight/2;

        if(t<=0){

            t = 0;

        }

        if(t>=this.clientHeight - _this.shade.offsetHeight){

            t=this.clientHeight - _this.shade.offsetHeight

        }

        _this.shade.style.top = t + "px";

        // 大图也跟着移动

        _this.fangda(l,t);

    }

}

Enlarge.prototype.fangda = function(l,t){

    // 需要计算移动过的比例

    // 遮罩距离左边的距离 - l

    // 大图的宽度

    var w = this.middle.clientWidth;

    // 比例就是 l/w;

    var percentw = l/w;

    // 根据这个比例计算大图的left值

    // 这个比例就应该等于 大图的left/大图的宽度（大图宽度设置过背景大小）

    // 获取背景大小

    var style = window.getComputedStyle(this.big).backgroundSize;

    // 获取到的是宽px 高px组成的一个字符串 ，需要使用空格分隔获取到具体的宽和高

    var bigW = parseInt(style.split(" ")[0]);

    // 大图的left就是比例 * 大图的宽

    var bigL = percentw * bigW;

    // 高度

    var h = this.middle.clientHeight;

    var percenth = t/h;

    var bigH = parseInt(style.split(" ")[1]);

    var bigT = percenth * bigH;

    // 需要设置给背景的定位

    this.big.style.backgroundPosition = `-${bigL}px -${bigT}px`;

    // console.log(bigW);

}

var enlarge = new Enlarge("box");

// 1.遮罩的位置一定要在光标位置基础上 - 外面盒子左边的间距

// 2.如果有滚动条，光标位置就使用pageX pageY

// 3.放大镜，咱们讲的使用的是3套图，小、中、大，但是放大镜可以使用一套图来做 - 如果使用小图放大会模糊，大图缩小不模糊 - 一定要找大图去做

</script>

</html>

这是只用一张图做

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Document</title>

</head>

<style>

.middle{

    width: 400px;

    height: 400px;

    border:1px solid #000;

    position:relative;

}

.middle>img{

    width: 400px;

    height: 400px;

}

.small{

    width: 400px;   

    height: 100px;

    display: flex;

    justify-content: flex-start;

    align-items: center;

}

.small img{

    border:1px solid #0f0;

    width: 50px;

    height: 50px;

    margin:0 5px;

}

.small img.active{

    border-color:red;

}

.shade{

    width: 100px;

    height: 100px;

    background:rgba(255,255,0,0.5);

    position:absolute;

    left: 0;

    top: 0;

    display:none;

}

.big{

    width: 400px;

    height: 400px;

    position: absolute;

    left:105%;

    top: 0;

    overflow:hidden;

    display:none;

}

.big>img{

    width: 1600px;

    height: 1600px;

    position:absolute;

    left: 0;

    top: 0;

}

.box{

    margin:50px;

}

.shade:hover{

    cursor:move;

}

</style>

<body>

<div class="box">

    <div class="middle">

        <img src="./images/1.jpg">

        <div class="shade"></div>

        <div class="big">

            <img src="./images/1.jpg">

        </div>

    </div>

    <div class="small">

        <img class="active" src="./images/1.jpg">

        <img src="./images/2.jpg">

    </div>

</div>

</body>

<script type="text/javascript">

function Enlarge(){

    // 获取元素

    this.box = document.querySelector(".box");

    this.middle = this.box.querySelector(".middle");

    this.middleImg = this.box.querySelector(".middle>img");

    this.shade = this.box.querySelector(".shade");

    this.big = this.box.querySelector(".big");

    this.bigImg = this.box.querySelector(".big>img");

    this.smallImgs = this.box.querySelectorAll(".small>img");

    var _this = this;

    // 鼠标移入显示遮罩和大图

    this.middle.onmouseover = ()=>{

        this.over();

    }

    this.middle.onmouseout = ()=>{

        this.out();

    }

    // 小图的点击事件

    for(var i=0;i<this.smallImgs.length;i++){

        this.smallImgs[i].onclick=function(){

            _this.click(this);

        }

    }

}

// 小图的点击事件

Enlarge.prototype.click = function(ele){

    for(var i=0;i<this.smallImgs.length;i++){

        this.smallImgs[i].className = '';

    }

    ele.className = "active"

    // 点小图换中图和大图

    // 获取当前点击元素的src

    // ele.getAttribute("src");

    // 元素有一些属性可以直接使用 .  来操作，比如，index、src

    // console.log(ele.src);

    this.middleImg.src = this.bigImg.src = ele.src

}

Enlarge.prototype.over = function(){

    this.shade.style.display = this.big.style.display = "block";

    // 中等盒子的移动事件

    this.middle.onmousemove= e=>{

        // 拖拽 - 获取光标位置

        var e = e || window.event;

        var x = e.pageX;

        var y = e.pageY;

        var l = x - this.box.offsetLeft - this.shade.clientWidth/2;

        if(l<=0){

            l = 0;

        }

        if(l>=this.middle.clientWidth - this.shade.clientWidth){

            l=this.middle.clientWidth - this.shade.clientWidth

        }

        this.shade.style.left = l + "px"

        var t = y - this.box.offsetTop - this.shade.clientHeight/2;

        if(t<=0){

            t = 0;

        }

        if(t>=this.middle.clientHeight - this.shade.clientHeight){

            t=this.middle.clientHeight - this.shade.clientHeight

        }

        this.shade.style.top = t + "px"

        // 计算比例

        var percentX = this.shade.offsetLeft/this.middle.clientWidth;

        var percentY = this.shade.offsetTop/this.middle.clientHeight;

        // 根据比例计算大图应该定位的值

        var bigX = this.bigImg.clientWidth * percentX;

        var bigY = this.bigImg.clientHeight * percentY;

        // 将值设置给大图的定位

        this.bigImg.style.left = -bigX + "px";

        this.bigImg.style.top = -bigY + "px";

    }

}

Enlarge.prototype.out = function(){

    this.shade.style.display = this.big.style.display = "none"

}

var enlarge = new Enlarge();

</script>

</html>

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 204,732评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 87,496评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 151,264评论 0赞 338
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,807评论 1赞 277
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,806评论 5赞 368
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,675评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,029评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,683评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 41,704评论 1赞 299
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,666评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,773评论 1赞 332
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,413评论 4赞 321
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,016评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,978评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,204评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,083评论 2赞 350
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,503评论 2赞 343

推荐阅读更多精彩内容