首先需要两张一样的图片，一张大图，一张小图，大图显示，当鼠标移入时，小图上出现一个滑块，可以滑动，大图也跟着显示，大图的显示区域和小图一样，当滑块滑到不同的位置，大图显示不同的区域，当鼠标移出时，滑块和大图都隐藏。

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>放大镜</title>

    <style type="text/css">

*{

    padding: 0px;

    margin: 0px;

}

#left{

    width:400px;

    height:400px;

    border:1px solid blue;

    position: relative;

    float:left;

    background: url(xiao.jpg) no-repeat;

}

#left #huakuai{

    width:200px;

    height:200px;

    background:white;

    position: absolute;

    opacity: 0.6;

    filter:alpha(opacity=60);

    display: none;

}

#left #cover{

    width:400px;

    height: 400px;

    position: absolute;

    z-index: 3;

    top:0px;

    left:0px;

    background: red;

    opacity: 0;

    filter:alpha(opacity=0);

    /*相当于给左边的div加了一个盖子，鼠标直接作用在盖子上，不用作用滑块上，防止滑块的抖动*/

}

#right{

    width:400px;

    height:400px;

    border:1px solid blue;

    overflow: hidden;

    float: left;

    margin-left:20px;

    position:relative;

    display: none;

}

#right #right_img{

    position: absolute;

    top:0px;

    left:0px;

    /*根据鼠标的移动，图片的显示区域显示相应的位置*/

}

    </style>

    <script type="text/javascript">

window.onload=function(){

    var oleft=document.getElementById('left');//获得左边原图的div元素

    var ohk=document.getElementById('huakuai');//获得滑块元素

    var ocover=document.getElementById('cover');//获得盖子元素

    var oright=document.getElementById('right');//获得右边div区域

    var oright_img=document.getElementById('right_img');//获得右边图片区域

    oleft.onmouseover=function(){//当鼠标移入左边的div时，

        ohk.style.display='block';//滑块显示

        oright.style.display='block';//右边div显示

    }

     oleft.onmouseout=function(){//鼠标移出，

        ohk.style.display='none';//滑块隐藏

        oright.style.display='none';//右边div隐藏

    }

    ocover.onmousemove=function(e){//鼠标在盖子上移动的事件

        var ev=e||window.event;//兼容性

        var m_left=ev.layerX||ev.offsetX;//兼容性获得鼠标的横坐标

        var left=m_left-100;//表示滑块到div左边框的距离，鼠标在div中间

        if(left<0){//如果滑块要超出左边框，另左边距等于0

            left=0;

        }

        if(left>200){//如果滑块要超出右边框，另左边框为最大值200

            left=200;

        }

        huakuai.style.left=left+'px';//将左边距赋值给小滑块

        var m_top=ev.layerY||ev.offsetY;//同理设置垂直方向的值

        var top=m_top-100;

        if(top<0){

            top=0;

        }

        if(top>200){

            top=200;

        }

        huakuai.style.top=top+'px';

        var right_left=left*-2;//因为大图为小图的2倍，所以乘以2,因为图片要向左上移动，位置像素值为负，所以再乘以-1

        var right_top=top*-2;//同理，获得垂直方向的值

        oright_img.style.left=right_left+'px';//赋值

        oright_img.style.top=right_top+'px';

    }

}

    </script>

</head>

<body>

<div id="left">

    <div id="huakuai"></div>

    <div id="cover"></div>

</div>

<div id="right">

    <img src="datu.jpg" id="right_img">

</div>

</body>

</html>

图片如下：

js购物时的放大镜效果的更多相关文章

  1. 利用JS实现购物网站商品放大镜效果

    大家几乎都有在网上购物的经验,有的网站会有一个商品放大镜功能, 就是把鼠标移到图片上的时候,旁边会有另外一张大的图片展示,等同于 放大镜效果,那这样的效果怎样实现的呢,我把代码发给大家,请大家参考. ...

  2. js、jquery实现放大镜效果

    在一些电商网站的商品详情页面,都会有放大镜效果,实现起来并不是很困难,今天用了两个小时,写了一个放大镜效果的实例,来分享给大家! 实现的效果大概是这个样子的 预览 先来看一下效果吧,点击下面的链接预览 ...

  3. 原生js实现简单的放大镜效果

    前言:相信很多同学在浏览购物网站的时候都会用到过放大镜的功能,这个功能在日常的网站也会经常用到.接下来我们开始实现一下它吧: (1)首先了解一下放大镜效果的html架构:如下图,它由两部分组成. ht ...

  4. jquery+js实现鼠标位移放大镜效果

    jQuery实现仿某东商品详情页放大镜效果 用jquery+js实现放大镜效果,效果大概如下图! 效果是不是大家很感兴趣,放大镜查看细节,下边大家可以详细看一看具体是怎么实现的.下边直接看代码! HT ...

  5. js 实现淘宝放大镜功能，可更改配置参数 带完整版解析代码[magnifier.js]

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS写淘宝放大镜效果 基本功能: 运 ...

  6. 原生js实现放大镜效果

    今天做任务的时候,有一个任务就是让实现电商网站常用的放大镜效果,类似于这样的效果,之前并没有做过这种放大镜效果,刚开始的思路是对图片进行裁剪,但是后来发现实在是难以实现,于是求助了万能的谷歌,发现一个 ...

  7. js原生淘宝京东宝贝放大镜效果

    js实现商城放大镜效果 效果: 鼠标放上去会有半透明遮罩.右边会有大图片局部图. 鼠标移动时右边的大图片也会局部移动. 技术点: Event Event 是一个事件对象,当一个事件发生后,和当前事件发 ...

  8. Magnifier.js - 支持鼠标滚轮缩放的图片放大镜效果

    Magnifier.js 是一个 JavaScript 库,能够帮助你在图像上实现放大镜效果,支持使用鼠标滚轮放大/缩小功能.放大的图像可以显示在镜头本身或它的外部容器中.Magnifier.js 使 ...

  9. JS 文本输入框放大镜效果

    JS 文本输入框放大镜效果 今天下午研究了下 "文本输入框放大镜效果" 当然KISSY官网也有这种组件 请看kissy demo 其实这种效果 对于很多童鞋来说 应该并不陌生!我今 ...

随机推荐

  1. Oracle rman 命令详解

    一.list常用命令总结备忘 list命令列出控制文件.RMAN恢复目录中备份信息, 是我们对所有可见的数据库备份文件的一个最直观的了解的方法 list incarnation;    list ba ...

  2. spring--注解注入--12

    12.1  概述 12.1.1  什么是零配置 在SSH集成一章中大家注意到项目结构和包结构是不是很有规律,类库放到WEB-INF/lib文件夹下,jsp文件放到WEB-INF/jsp文件夹下,web ...

  3. UVA 11426 GCD - Extreme (II) 欧拉函数

    分析:枚举每个数的贡献,欧拉函数筛法 #include <cstdio> #include <iostream> #include <ctime> #include ...

  4. unix时间戳和localtime

    今天看代码的时候看到这么一段 void user::setHelpday() { int time = ::getTickCount(); m_helpday = (time +( * ))/( * ...

  5. Shell的那些事儿

    日常工作中,哪种语言对你的帮助最大?我觉得非Shell莫属.最早接触Shell应该是在大学的时候,如做Linux文件系统裁减会用到一些命令,如find, tar, xargs, cp等等,并把它们通过 ...

  6. mongodb在java驱动包下的操作(转)

    推荐几章很有用的文章 java操作参考文档 http://www.cnblogs.com/hoojo/archive/2011/06/02/2068665.html http://blog.csdn. ...

  7. 多目标遗传算法 ------ NSGA-II （部分源码解析） 临时种群生成新父代种群 fillnds.c

    /* Nond-domination based selection routines */ # include <stdio.h> # include <stdlib.h> ...

  8. WIN10环境下搭建与连接VPN服务器

    搭建VPN服务器 0.前言 1.WIN+E打开此电脑 2.勾选始终显示菜单,并应用,确定 3.新建传入连接,可以添加用户,也可以直接选取已有用户 连接VPN服务器 1.打开vpn设置 2.添加vpn连 ...

  9. PAT 1003. Emergency (25)

    1003. Emergency (25) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue As an emerg ...

  10. 推送通知/传感器/UIDynamic仿真(推送通知已适配iOS10)

    推送通知/传感器/UIDynamic 一.推送通知 1.推送通知简介 什么是推送通知 此处的推送通知与NSNotification没有任何关系 可以理解为,向用户推送一条信息来通知用户某件事情 作用: ...