用js实现放大镜的效果

  第一次发博客,还有点小激动,本人现在正在天津上大学,希望以后从事前端这一行业,学习的时间不长,写博客为了记录自己的学习过程和收获,当然也算是巩固。可能写的东西不会像大牛那样高大上,只是一些基本的内容,当然我也会收藏一些我认为好的,不错的文章(其实最主要是我能看懂。。。。)。我相信以后自己也能够写出高大上的东西。加油!

  废话说的有点多,说正事。前几天看了一段潭州教育的教学视频,其中的老师是用JQuery实现放大镜的效果(老师讲的是在是太慢,各种乱扯,跳着看的)。由于我还没有好好的学习过JQuery,但是那些基本的代码还是可以看懂的,所以就想拿现在正在学习的js练一下手,最后还是成功的实现了这个效果。

  思路:先让move块和bimg块隐藏,当鼠标移动到box上时,使move块和bimg块显示,获取鼠标当前的位置,然后经过计算给与move块和bimg块适当的值实现放大镜效果(move块和bimg块的位置的计算后面有详细介绍)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>放大镜</title>
    <link href="css/bigimg.css" rel="stylesheet" />
    <script src="js/bigimg.js"></script>
</head>
<body onload="bigimg()">
    <div id="box">
        <img src="images/simg.jpg" alt="#">
        <div id="move"></div>
        <div id="bimg">
            <img id="b_bimg" src="images/bimg.jpg" alt="#">
        </div>
    </div>
</body>
</html>

css样式:

*{
    margin:0px;
    padding:0px;
}
#box{
    width:430px;
    height:430px;
    margin:100px;
    margin-left:17%;
    position:relative;//这里使用相对定位,好让其他的元素能依靠这个元素定位
}
#move{
    background-image:url(../images/move.png);
    width:220px;
    height:220px;
    position:absolute;
    left:0px;
    top:0px;
    display:none;//先让他隐藏,用js使其显示
}
#bimg{
    width:430px;
    height:430px;
    overflow:hidden;
    position:absolute;
    top:0px;
    left:450px;
    display:none;//先让他隐藏,用js使其显示
}
#bimg img{
    width:800px;
    height:800px;
    position:absolute;
    top:0px;
    left:0px;
}

Javascript:

function bigimg(){
    var bbox = document.getElementById("box");
    var bmove = document.getElementById("move");
    var bbimg = document.getElementById("bimg");
    var b_bimg = document.getElementById("b_bimg");
    bbox.onmouseover = function(){//鼠标移动到box上显示大图片和选框
        bbimg.style.display = "block";
        bmove.style.display="block";
    }
    bbox.onmouseout = function(){//鼠标移开box不显示大图片和选框
        bbimg.style.display = "none";
        bmove.style.display="none";
    }
    bbox.onmousemove = function(e){//获取鼠标位置
        var x = e.clientX;//鼠标相对于视口的位置
        var y = e.clientY;
        var t = bbox.offsetTop;//box相对于视口的位置
        var l = bbox.offsetLeft;
        var _left = x - l - bmove.offsetWidth/2;//计算move的位置
        var _top = y - t -bmove.offsetHeight/2;
        if(_top<=0)//滑到box的最顶部
            _top = 0;
        else if(_top>=bbox.offsetHeight-bmove.offsetHeight)//滑到box的最底部
            _top = bbox.offsetHeight-bmove.offsetHeight ;
        if(_left<=0)//滑到box的最左边
            _left=0;
        else if(_left>=bbox.offsetWidth-bmove.offsetWidth)//滑到box的最右边
            _left=bbox.offsetWidth-bmove.offsetWidth ;
        bmove.style.top = _top +"px";//设置move的位置
        bmove.style.left = _left  + "px";
        var w = _left/(bbox.offsetWidth-bmove.offsetWidth);//计算移动的比例
        var h = _top/(bbox.offsetHeight-bmove.offsetHeight);
        var b_bimg_top = (b_bimg.offsetHeight-bbimg.offsetHeight)*h;//计算大图的位置
        var b_bimg_left = (b_bimg.offsetWidth-bbimg.offsetWidth)*w;
        b_bimg.style.top = -b_bimg_top + "px";//设置大图的位置信息
        b_bimg.style.left = -b_bimg_left + "px";
    }

}

效果图:

1、move块的计算

黑色箭头:

var x = e.clientX;//鼠标相对于视口的位置
var y = e.clientY;

红色箭头:

var t = bbox.offsetTop;//box相对于视口的位置
var l = bbox.offsetLeft;

橙色箭头:

var _left = x - l - bmove.offsetWidth/2;//计算move的位置
var _top = y - t -bmove.offsetHeight/2;

2、bimg块的计算

利用move块在可移动范围内的比例来设置大图的位置

move块的移动范围:

bbox.offsetWidth-bmove.offsetWidth

move块现在的坐标占可移动范围的比例:

var w = _left/(bbox.offsetWidth-bmove.offsetWidth);//计算移动的比例
var h = _top/(bbox.offsetHeight-bmove.offsetHeight);

bimg的移动范围:

b_bimg.offsetHeight-bbimg.offsetHeight

bimg的位置:

var b_bimg_top = (b_bimg.offsetHeight-bbimg.offsetHeight)*h;//计算大图的位置
var b_bimg_left = (b_bimg.offsetWidth-bbimg.offsetWidth)*w;

限制move块移动范围的内容简单,在介绍move块的计算中以涉及到了,就不在多说。这样简单的放大镜效果就实现了。

                                                    2016年5月22日    21:33

时间: 2024-10-12 18:49:44

用js实现放大镜的效果的相关文章

用JS实线放大镜的效果

HTML代码如下: <div id="preview"> <div id="mediumDiv"> <img id="mImg" src="images/products/product-s1-m.jpg"/>//这是中级图片层 <div id="mask"></div>//这是遮罩 <div id="superMask"

js图片放大镜

JS图片放大镜效果. 应用场景:各大电商网站. (附件) <!-- Author: XiaoWen Create a file: 2017-01-13 12:28:36 Last modified: 2017-01-13 17:16:46 Start to work: Finish the work: Other information: --> <!DOCTYPE html> <html lang="en"> <head> <me

jquery.jqzoom.js图片放大镜

jqzoom插件实现图片放大镜效果 1. jquery.jqzoom.js //************************************************************** // jQZoom allows you to realize a small magnifier window,close // to the image or images on your web page easily. // // jqZoom version 2.2 // Autho

js的轮播效果

图片的轮播效果!主要运用了元素的style样式属性,与 setInterval(); <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } div{ width: 960px; height: 400px; o

如何撤销浏览器注入JS代码的执行效果?

如何撤销浏览器注入JS代码的执行效果? 可用的方法: 放弃所有本地修改,整体重新reload当前的URL(这相当于大粒度的savepoint/snapshot,应确保用户数据/视图状态能够按期望恢复) 内核实现immutable的DOM树,对DOM树的每个修改均产生一个新的版本快照,修改可以直接回退,比如提供一个document.revertTo方法 immutable数据结构上实现MVCC事务,事务本身的执行是原子的,但是并没有考虑用户如何手工反转事务 实现细粒度的对应每个业务逻辑层次写操作的

一步步教你js原生瀑布流效果实现

一步步教你js原生瀑布流效果实现 什么是瀑布流效果 首先,让我们先看一段动画: 在动画中,我们不难发现,这个动画有以下特点: 1.所有的图片的宽度都是一样的 2.所有的图片的高度是不一样的 3.图片一张挨着一张竖直排列 4.鼠标向下滚动,一直不停的加载图片 5.浏览器的宽度改变,图片的列数会进行相应的更改 那么这种效果类似现实生活中的瀑布,所以我们叫它瀑布流的效果. Js原生瀑布流效果的实现 从上述分析中,我们可以把整个效果分为以下四个部分: html+css界面搭建 瀑布流效果 浏览器向下滚动

静态书架和js模拟翻书效果

书籍图片随便找了个,有点难看,须要的自己替换个好看点的png格式图片 源代码下载:http://download.csdn.net/detail/sweetsuzyhyf/7604091 静态书架和js模拟翻书效果,布布扣,bubuko.com

js 同for一样效果 (延迟)每秒循环一次 追加

<script type="text/javascript"> var j = 1;        var timeID = null;        function display() {            timeID = window.setInterval("delay()", 1000);        }        function delay() {            if (j < 1000) {           

用html+css+js实现选项卡切换效果

文章转载自:http://tongling.github.io/JSCards/ 用html+css+js实现选项卡切换效果 使用之前学过的综合知识,实现一个新闻门户网站上的常见选项卡效果: 文字素材: 房产: 275万购昌平邻铁三居 总价20万买一居 200万内购五环三居 140万安家东三环 北京首现零首付楼盘 53万购东5环50平 京楼盘直降5000 中信府 公园楼王现房 家居: 40平出租屋大改造 美少女的混搭小窝 经典清新简欧爱家 90平老房焕发新生 新中式的酷色温情 66平撞色活泼家居