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

<!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. html5 svg 第八章 文字text

    虽然它可能是真实的,每一个画面讲述了一个故事,这是完全正确的,用言语来帮助讲故事.因此,SVG有几个元素,让你将文本添加到您的图形. 文本术语 Text Terminology 在我们调查的主要方法添 ...

  2. Android 开发性能优化之SparseArray(二)

    一.SparseIntArray API SparseIntArrays map integers to integers.  Unlike a normal array of integers, t ...

  3. Android Activity管理类

    public class AppManager { private static Stack<Activity> activityStack; private static AppMana ...

  4. 【翻译】Selenium IDE v1.0.11 支持转换格式吗?

    原文: http://blog.reallysimplethoughts.com/2011/06/10/does-selenium-ide-v1-0-11-support-changing-forma ...

  5. QT-opencv小结

    gcc –v 4.5 cmake编译opencv 2.4.4   ox00000005错误(gcc版本不对) gcc –v4.5  <----------qt 推荐打包,而不是static

  6. The Shortest Path in Nya Graph

    Problem Description This is a very easy problem, your task is just calculate el camino mas corto en ...

  7. [codevs1554]最佳课题选择

    题目描述 Matrix67要在下个月交给老师n篇论文,论文的内容可以从m个课题中选择.由于课题数有限,Matrix67不得不重复选择一些课题.完成不同课题的论文所花的时间不同.具体地说,对于某个课题i ...

  8. Asp.Net MVC4新特性指南（2）：新特性介绍

       上一章讲解了最基本的MVC4说明.今天就介绍下几种新特性的使用例子:   就当大家有MVC3的基础了.在这个基础上在看下面的介绍就容易多了.1.Web API MVC4包括一个更好的解决方案:A ...

  9. aix挂载centos 的nfs

    centos作为服务器,提供nfs文件系统,aix作为客户端,挂载centos的指定目录 (1)NFS的安装配置:centos 5 : yum -y install nfs-utils portmap ...

  10. Error message “Assembly must be registered in isolation” when registering Plugins in Microsoft Dynamics CRM 2011 2013 解决办法

    Error message “Assembly must be registered in isolation” when registering Plugins in Microsoft Dynam ...