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

<!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. apache开源项目--CouchDB

    Apache CouchDB 是一个面向文档的数据库管理系统.它提供以 JSON 作为数据格式的 REST 接口来对其进行操作,并可以通过视图来操纵文档的组织和呈现. CouchDB 是 Apache ...

  2. Orchard中的多语言功能

    在Orchard中支持了两种本地化的方法: 1.对Orchard应用程序和模块中的一些文本字符串进行本地化.这个就相当程序本身的多语言支持,大多数的CMS系统都支持这一功能,如:DotNetNuke. ...

  3. SQL中取当前记录的ID----->SCOPE_IDENTITY()

    SQL Server 2000中,有三个比较类似的功能:他们分别是:SCOPE_IDENTITY.IDENT_CURRENT 和 @@IDENTITY,它们都返回插入到 IDENTITY 列中的值.I ...

  4. 转载-smarty教程(基本语法)

    转自:http://hi.baidu.com/qxxgvpdtzhbckpr/item/681049160d7be60db98a1aec 1.smarty的配置      首先,使用smarty第一件 ...

  5. 关于 UGUI 字体花屏或乱码。

    我们项目从某个时候开始ui突然开始出现字体花屏现象(unity 开发版本:5.3.6p6),而且很难必现却又时有发生,确实查找和解决起来不太容易. 关于这个问题,uwa官方给出了解释,http://b ...

  6. C++类型引用浅析

    C++类型引用浅析 引言 从最早被Bjarne Stroustrup 发明,作为C语言的扩展,到广为人知C++98标准,再到最新的C++11.C++14和C++17标准,C++一直在不断地进步.演化. ...

  7. Phonegap3.4 教程

    英文原扯:http://coenraets.org/blog/cordova-phonegap-3-tutorial/ 我只是对着原文学习一遍,记录在这里,一来为了加深印象(边翻译边学习),二来为了自 ...

  8. WCF入门到精通（二）——契约

    第一次接触WCF,如有写的不对的地方有望大家指出来,谢谢!! 本篇文章主要说下WCF中的契约的种类.契约的种类.如何定义契约等内容. 契约是一种双边或多边的协议,是利益相关方就某个问题达成的一种共识, ...

  9. tmux快捷键`

    Ctrl+b 激活控制台:此时以下按键生效 系统操作 ? 列出所有快捷键:按q返回 d 脱离当前会话:这样可以暂时返回Shell界面,输入tmux attach能够重新进入之前的会话 D 选择要脱离的 ...

  10. Ⅷ.spring的点点滴滴--抽象对象和子对象

    承接上文 抽象对象和子对象 .net篇(环境为vs2012+Spring.Core.dll v1.31) public class parent { public string Name { get; ...