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

<!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. MsoShapeType /InlineShape枚举

    指定形状的类型或形状范围. 名称 值 说明 msoAutoShape 1 自选图形. msoCallout 2 标注. msoCanvas 20 画布. msoChart 3 图. msoCommen ...

  2. android webview 访问https页面 SslError 处理

    在Android中,WebView可以用来加载http和https网页到本地应用的控件.但是在默认情况下,通过loadUrl(String url)方法,可以顺利loadUrl(“http://www ...

  3. 基于WebForm+EasyUI的业务管理系统形成之旅 -- 系统设置(Ⅰ)

    上篇<基于WebForm+EasyUI的业务管理系统形成之旅 -- 总体介绍>,主要介绍系统总体的界面效果和用户体验UI设计. 在MVC.MVP大行其道的今天,写WebForm该系列篇章, ...

  4. GIS数据格式：Geodatabase

    转自:http://www.cnblogs.com/quansixiang/archive/2010/09/17/1829286.html 1  Geodatabase概念 Geodatabase是A ...

  5. nginx 健康检查和负载均衡机制分析

    nginx 是优秀的反向代理服务器,这里主要讲它的健康检查和负载均衡机制,以及这种机制带来的问题.所谓健康检查,就是当后端出现问题(具体什么叫出现问题,依赖 于具体实现,各个实现定义不一样),不再往这 ...

  6. HDU 2122

    思路:prime,考虑重边!!! #include<stdio.h> #include<string.h> int map[1001][1001],dist[1001]; in ...

  7. 组合数学及其应用——格路径与Schroder数

    格路径问题是探讨在如下所示中的一个格点图上,从(0,0)位置到达(p,q)所有可能的情况数.我们称这样的通路为一条格路径. 格点图: · · · · · · · · · · · · · · · · · ...

  8. (android 源码下开发应用程序) 如何在 Android 各 level ( 包含 user space 與 kernel space ) 使用dump call stack的方法

    http://janbarry0914.blogspot.com/2014/07/androiddump-call-stack.html dump call stack [文章重點] 了解 Andro ...

  9. Hadoop源码的编译过程详细解读（各版本）

    说在前面的话   重新试多几次.编译过程中会出现下载某个包的时间太久,这是由于连接网站的过程中会出现假死,按ctrl+c,重新运行编译命令. 如果出现缺少了某个文件的情况,则要先清理maven(使用命 ...

  10. 在YII中使用Redis等缓存

    Yii AR 单行数据-自动缓存机制 | LOCKPHP Yii AR 单行数据-自动LOG机制 CActiveRecordBehavior进阶 | LOCKPHP 缓存 - 权威指南 - Yii F ...