原生js實現放大鏡

阿新 • • 發佈：2019-03-18

dde script 原生js etl 是個 abs 不讓 llb 過濾器

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>放大鏡</title>
    <style>
        * {
            margin: 0;
            padding: 0
        }
        #demo {
            display: block;
            width: 323px;
            height 
: 430px;
            margin: 5px;
            position: relative;
            border: 1px solid #ccc;
        }
        #small-box {
            position: relative;
            z-index: 1;
        }
        #float-box {
            display: none;
            width: 160px;
            height 
: 120px;
            position: absolute;
            background: #ffffcc;
            border: 1px solid #ccc;
            filter: alpha(opacity=50);
            opacity: 0.5;
        }
        #mark {/*應該是把圖片放在這個上面，它的透明度為0，是個block*/
            position: absolute;
            display: block;
            width 
: 323px;
            height: 430px;
            background-color: #fff;
            filter: alpha(opacity=0);/*過濾器，目前只有少數瀏覽器支持*/
            opacity: 0;
            z-index: 10;
        }
        #big-box {
            display: none;
            position: absolute;
            top: 0;
            left: 330px;
            width: 323px;
            height: 430px;
            overflow: hidden;
            border: 1px solid #ccc;
            z-index: 1;;
        }

        #big-box img {
            position: absolute;
            z-index: 5
        }
    </style>
    <script>

        //頁面加載完畢後執行
        window.onload = function () {
            //找六個個元素：demo，smallBox,foatBox,mark,bigfloatBox,imgs,
            var objDemo=document.getElementById("demo");
            var objSmallBox=document.getElementById("small-box");
            var objMarkBox=document.getElementById("mark");
            var objFloatBox=document.getElementById("float-box");
            var objBigBox=document.getElementById("big-box");
            var objBigBoxImg=objBigBox.getElementsByTagName("img")[0];

            //給小盒子添加事件，移入和移出
            //移入：浮動的box和和bigBox顯示
            objSmallBox.onmouseover=function(){
                objFloatBox.style.display="block";
                objBigBox.style.display="block";
            }
            //移除：浮動的box和bigBox隱藏
            objSmallBox.onmouseout=function(){
                objFloatBox.style.display="none";
                objBigBox.style.display="none";
            }

            //給小盒子添加鼠標移動事件
            objMarkBox.onmousemove=function(ev){
                var _event=ev||window.event;//做兼容性，兼容IE
                //1計算值：
                var left=_event.clientX-objDemo.offsetLeft-objSmallBox.offsetLeft-objFloatBox.offsetWidth/2;
                var top=_event.clientY-objDemo.offsetTop-objSmallBox.offsetTop-objFloatBox.offsetHeight/2;

                //5.優化，在前面加判斷,不讓其溢出，加判斷
                if(left<0) left=0;
                if(top<0) top=0;
                if(left>objSmallBox.offsetWidth-objFloatBox.offsetWidth)
                        left=objSmallBox.offsetWidth-objFloatBox.offsetWidth;
                if(top>objSmallBox.offsetHeight-objFloatBox.offsetHeight)
                        top=objSmallBox.offsetHeight-objFloatBox.offsetHeight;

                //2把值賦值給放大鏡
                objFloatBox.style.left=left+"px";
                objFloatBox.style.top=top+"px";

                //3計算比例
                var percentX=left/(objMarkBox.offsetWidth-objFloatBox.offsetWidth);
                var percentY=top/(objMarkBox.offsetHeight-objFloatBox.offsetHeight);

                //4利用這個比例計算距離後賦值給右側的圖片
                objBigBoxImg.style.left=-percentX*(objBigBoxImg.offsetWidth-objBigBox.offsetWidth)+"px";
                objBigBoxImg.style.top=-percentY*(objBigBoxImg.offsetHeight-objBigBox.offsetHeight)+"px";
            }

        }
    </script>
</head>
<body>
<div id="demo">
    <div id="small-box">
        <div id="mark"></div>
        <div id="float-box"></div>
        <img src="https://img.alicdn.com/imgextra/https://img.alicdn.com/bao/uploaded/i2/1026430696/O1CN011H0o7UD6ZwLT3vl_!!1026430696.jpg_430x430q90.jpg"/>
    </div>
    <div id="big-box">
        <img src="https://img.alicdn.com/imgextra/https://img.alicdn.com/bao/uploaded/i2/1026430696/O1CN011H0o7UD6ZwLT3vl_!!1026430696.jpg"/>
    </div>
</div>
</body>
</html>

原生js實現放大鏡

原生JS實現放大鏡效果

use 瀏覽器賦值 uri 字符串 () solid adding clas 效果： 1、鼠標放上去會有半透明遮罩、右邊會有大圖片局部圖 2、鼠標移動時右邊的大圖片也會局部移動放大鏡的關鍵原理：鼠標在小圖片上移動時，通過捕捉鼠標在小圖片上的位置，定位大圖片的相

原生JS實現放大鏡功能

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=d

使用原生JS實現放大鏡功能

效果如下圖所示： 1.HTML佈局佈局採用一個大的div和三個子div，大div大小和左上角有邊框的div相等，定義最大div的id為box，有邊框的div為smallbox,右邊大圖的div為bigbox，下面三張圖片的整體div為list.

原生js實現放大鏡

dde script 原生js etl 是個 abs 不讓 llb 過濾器 <!doctype html> <html> <head> <meta charset="UTF-8"> <titl

原生JS實現圖片放大鏡插件

spa ont 範圍 display 離開寬度部分 gin es2017 前言　　我們大家經常逛各種電商類的網站，商品的細節就需要用到放大鏡，這個大家一定不陌生，今天我們就做一個圖片放大鏡的插件，來看看圖片是如何被放大的……

使用原生js實現仿淘寶放大鏡效果

放大鏡實現步驟 1.獲取元素 2.實現滑鼠移上時顯示小方塊和大圖 3.再新增中圖的移動事件獲取滑鼠的座標付給小方塊注意必須座標還要減去小方塊的寬高的一半讓游標在中間顯示 4.實現大圖同比例的顯示原理:游標移動的座標/大圖移動的座標=中圖的寬度/大圖的寬度求的是大圖

原生js實現圖片詳情頁面放大鏡

最近的網站專案需要實現這個放大鏡，在網上也下載了一些實現了的程式碼，不過感覺比較笨重，就自己寫了一次，實現了，需要的朋友可以拿去用; 以下是html部分： <!DOCTYPE html> <html> <head> <met

用原生js實現淘寶詳情頁圖片放大鏡效果

這個功能是我在模仿淘寶詳情頁的時候做出來的，最初版本對於非1:1比例的圖片沒有做處理，後續對程式進行了完善和邏輯上修改，形成了當前的程式。廢話不多說，直接進入正題了，先上個效果圖先放上這段功能的html程式碼<div id="full-pic"> <

原生js的放大鏡怎麼做，怎麼實現放大鏡效果_n倍放大鏡

示意圖和思路：效果圖：程式碼： <!DOCTYPE html> <html><head><meta charset="utf-8" /><title></title><style typ

原生js實現拖動滑塊驗證

cnblogs tcc mvt wms 網站 hnu 按鈕 itl rip 拖動滑塊驗證是現在的網站隨處可見的，各式各樣的拖動法都有。下面實現的是某寶的拖動滑塊驗證： <!DOCTYPE html> <html lang="en"> <he

原生js實現outerWidth()方法，用到getComputedStyle

turn left func ltview wid nts dst fault 方法 function getTrueStyle(obj,attr){ if(obj.currentStyle){ //ie return obj.currentStyle[at

原生js實現form表單序列化

defined json cnblogs 一個 break value 元素 default [0 大家都知道在jquery中有相應的表單序列化的方法： 1.serialize()方法　　格式：var data = $("form").serialize(); 　　功能：

h5原生js實現輪播圖

list sla head log startx creat ase hit eve 預覽地址：http://s.xnimg.cn/a90529/wap/wechatLive/test/slide.html <!DOCTYPE html> <html l

原生js實現數據單向綁定

web 名稱 target 接收參數 .org desc ctype html fin Object.defineProperty()方法直接在對象上定義一個新屬性，或修改對象上的現有屬性，並返回該對象。 Object.defineProperty(obj, prop, d

原生js實現清除子元素節點

spa class document cnblogs ech child mov log tor var table = document.body.querySelector(‘.mui-table-view‘);

原生JS實現tab切換--web前端開發

soft 楊冪 microsoft hidden isp 老婆 tex oct rip tab切換非常常見，應用非常廣泛，比較實用，一般來說是一個網站必不可少的一個效果。例如：https://123.sogou.com/中的一個tab部分： 1、案例源代碼 <!DO

原生js實現輪播

tex tom enter utf-8 定義 radi absolut tco query <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">

原生js實現的瀑布流布局

n) top 開始 rrh lang java ansi return 一個 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8">

原生JS實現增加刪除class

doctype [0 cls hasclass sna pla class ctype reg 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style type="text/css

JQuery&原生js ——實現剪刀石頭布小遊戲

原生 type space 封裝 jquer 石頭 jquery java .com jQuery是一個快速、簡潔的JavaScript框架，是繼Prototype之後又一個優秀的JavaScript代碼庫（或JavaScript框架）。jQuery設計的宗旨是&ldqu

原生js實現放大鏡

相關推薦