用javaScript代码实现图片简单放大镜的功能

哈哈哈 作为一个菜鸟第一次写微博还有些小激动 写的不好 希望各位大神多多指教。。。自己在网上看了下页面图片放大镜的做法 然后自己写了一个。。

<!DOCTYPE html>

<html lang="en">

<head>

         <meta charset="UTF-8">

         <title>Document</title>

         <style>

                   #outer{width:300px;height: 300px;position:absolute;top:100px;left:200px;}

                   #outer img{width:300px;}

                   #icon{width:100px;height:100px;position: absolute;top:0px;left:0px;background: blue;opacity:0.3;display:none;cursor:move;}

                   #inner{width:300px;overflow:hidden;height: 300px;position: absolute;left:510px;top:100px;border:1px solid;display:none;}

                   #inner img{width:900px;height:900px;position: absolute;left:0;top:0;}

         </style>

</head>

<body>

         <div id="outer">

                   <img src="imgs/js.jpg" alt="">

                   <div id="icon"></div>

         </div>

         <div id="inner">

                   <img src="imgs/js.jpg" alt="">

         </div>

         <!-- <script src="js/tools.js"></script> -->

         <script>

                   var x = 0, y = 0;//初始化鼠标所在区域的坐标

                   //给icon绑定鼠标移动事件

                   $("#outer").onmousemove = function(e) {

                            e = e || event;//因为window为浏览器最高对象所以可以省略

                            // console.log($("#inner").clientWidth)

                            $("#icon").style.display = "block";

                            $("#inner").style.display = "block";

                            //获取icon在outer里面的坐标

                            x = e.pageX - $("#outer").offsetLeft - $("#icon").clientWidth/2;

                            y = e.pageY - $("#outer").offsetTop - $("#icon").clientHeight/2;

                            //给icon设置坐标

                            var a = $("#outer").clientWidth - $("#icon").clientWidth;

                            var b = $("#outer").clientHeight - $("#icon").clientHeight;

                            console.log($("#outer").clientHeight)

                            if (x < 0){

                                     x = 0;

                            } else if(x > a) {

                                     x = a;

                            }

                            if (y < 0) {

                                     y = 0;

                            } else if (y > b) {

                                     y = b;

                            }

                            $("#icon").style.left = x + "px";

                            $("#icon").style.top = y + "px";

                            var scaleX = x / a, scaleY = y / b;

                            var c = $("img",$("#inner"))[0].clientWidth - $("#inner").clientWidth;

                            var d = $("img",$("#inner"))[0].clientHeight - $("#inner").clientHeight;

                            $("img",$("#inner"))[0].style.left = -scaleX*c + "px";

                            $("img",$("#inner"))[0].style.top = -scaleY*d + "px";//600算法：x/a = 图片移动的距离/图片宽度（高度）-inner的宽度（高度）

                   }

                   $("#outer").onmouseout = function(e) {

                            e = e || event

                            $("#icon").style.display = "none";

                            $("#inner").style.display = "none";

                   }       

                   //在这里应用了函$,现将函数$函数写下

                   function $(selector, context) {//selector代表需要选中的元素，context需在那个对象范围内查找selector元素

                            context = context || document;//若调用函数时候只给一个lecector参数默认对象范围为document

                            if (selector.indexOf("#") === 0) {

                                     return document.getElementById(selector.slice(1));//因为整个页面id是唯一性的所以这里可以是context或者document

                            }

                            if (selector.indexOf(".") === 0) {

                                     return getElementsByClassName(selector.slice(1), context);//直接调用写好的getElementsByClaasName函数

                            }

                            return context.getElementsByTagName(selector);

                   }

 

                   //因为document.getElementByClaasName有兼容性的问题ie低版本是不兼容该问题的所以需要写一个兼容函数

 

                   function getElementsByClaasName(className, context) {

                            context  = context || document;

                            //如果当前浏览器支持

                            if (document.getElementsByClassName) {

                                     return context.getElementsByClassName(className);

                            }

                            //定义一个数组用于存放找到className的标签

                            var arry = [];

                            //获取整个页面的标签

                            var allTags = document.getElementsByTagName("*");

                            //开始遍历所有的标签

                            for (var i = 0, len = allTags.length; i < len; i++) {

                                     //获取每个标签内所有的class类名

                                     var classNames = allTags[i].spilt(" ");

                                     //遍历每个标签内的class类名

                                     for (var j = 0, leng = classNames.length; j < leng; j++) {

                                               //判断标签内的class类名与className一样

                                               if(classNames[j] === className) {

                                                        //若相等把当前的标签存放与arry数组中

                                                        arry.push(allTags[i]);

                                               }

                                     }

                            }

                            return arry;//返回函数调用处

                   }

 

         </script>

</body>

</html>

 

最后实现的效果图：

 

posted @ 2017-04-17 00:09  ~王小凡  阅读(358)  评论(0)    收藏  举报