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

<!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开源项目--kafka

    kafka是一种高吞吐量的分布式发布订阅消息系统,她有如下特性: 通过O(1)的磁盘数据结构提供消息的持久化,这种结构对于即使数以TB的消息存储也能够保持长时间的稳定性能. 高吞吐量:即使是非常普通的 ...

  2. Matlab read_grib.r4 安装新方法（转自：http://blog.sina.com.cn/s/blog_9f36648b010179s7.html）

    最近,打算用Matlab处理些GRIB格式的文件,需要在Matlab中添加read_grib.m文件,其实相当于是添加一个工具箱.read_grib.m的下载见:http://www.renci.or ...

  3. 【转】关于usr/bin/ld: cannot find -lxxx问题总结

    原文网址:http://eminzhang.blog.51cto.com/5292425/1285705 /usr/bin/ld: cannot find -lxxx问题总结   linux下编译应用 ...

  4. 文件同步工具BT Sync介绍和使用说明

    BT Sync介绍 BT 下载,相信大伙儿都知道的.今儿个要介绍的 BT Sync,跟 BT 下载一样,都是 BitTorrent 公司发明滴玩意儿,都是采用 P2P 协议来进行传输. 简而言之,BT ...

  5. C语言结构

    一个进程在内存中的布局如图所示:        .text段(正文段)——保存程序所执行的程序二进制文件,CPU执行的机器指令部分:一个程序只有一个副本:只读,防止程序由于意外事故而修改自身指令. . ...

  6. POJ2773 - Happy 2006(欧拉函数)

    题目大意 给定两个数m,k,要求你求出第k个和m互质的数 题解 我们需要知道一个等式,gcd(a,b)=gcd(a+t*b,b) 证明如下:gcd(a+t*b,b)=gcd(b,(a+t*b)%b)= ...

  7. linux设备驱动----利用mdev（udev）自动创建设备文件节点

    1.mdev的使用方法和原理: mdev是busybox 自带的一个简化版的udev,适合于嵌入式的应用埸合.其具有使用简单的特点.它的作用,就是在系统启动和热插拔或动态加载驱动程序时,自动产生驱动程 ...

  8. 非常实用的Android Studio快捷键

    One—打印Log 生成tag: logt 打印log: logm logd loge Two—代码提示 Ctrl + Alt + Space Three—代码移动 选中代码: Ctrl + w 向 ...

  9. ASP.NET MVC- JSON ,Jquery, State management and Asynch controllers

    一.JSON  MVC And JQuery In case you are new to JSON please read this before moving ahead with this la ...

  10. JDK之jstat的用法

    http://www.51testing.com/html/92/77492-203728.html jstat的用法 用以判断JVM是否存在内存问题呢?如何判断JVM垃圾回收是否正常?一般的top指 ...