欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

簡單實(shí)現(xiàn)js放大鏡效果

 更新時(shí)間:2017年07月24日 14:41:08   作者:diasa  
這篇文章主要教大家如何簡單實(shí)現(xiàn)js放大鏡效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了js放大鏡效果展示的具體代碼,供大家參考,具體內(nèi)容如下

具體代碼如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    body,div,img{
      margin:0;
      padding:0;
    }
    img{
      display:block;
      border:none;
    }
    #box{
      position:absolute;
      top:20px;
      left:20px;
      width:350px;
      height:350px;
      box-shadow:3px 3px 10px 0 #111111;

    }
    #box img{
      width:100%;
      height:100%;

    }
    #mark{
      display:none;
      position:absolute;
      top:0;
      left:0;
      width:175px;
      height:175px;
      background:#000;
      opacity: 0.5;
      filter:alpha(opacity=50);
      cursor:move;

    }
    #boxRight{
      display:none;
      position:absolute;
      top:20px;
      left:380px;
      width:350px;
      height:350px;
      overflow:hidden;
    }
    /*我們右側(cè)的圖片的大小是需要嚴(yán)格計(jì)算的:
      mark的width是box的width的一半,那么我們的大圖寬度也應(yīng)該是小圖的二倍
    */
    #boxRight img{
      position:absolute;
      top:0;
      left:0;
      width:200%;
      height:200%;
    }
  </style>
</head>
<body>
  <div id='box'>
    <img src="img/iphone.jpg" alt="">
    <div id='mark'></div>
  </div>
  <div id='boxRight'>
    <img src="img/iphone_big.jpg" alt="">
  </div>
  <script>
    //放大鏡的原理: 我們的mark橫向是box的一半,縱向也是box的一半,那么右側(cè)的大圖橫向(縱向)應(yīng)該是左側(cè)小圖的2倍
    var box = document.getElementById('box');
    var mark = document.getElementById('mark');
    var boxRight = document.getElementById('boxRight');
    //設(shè)置mark這個(gè)盒子
    function setPosition(e){
      var top = e.clientY - box.offsetTop - (mark.offsetHeight/2);
      var left = e.clientX - box.offsetLeft - (mark.offsetWidth/2);
      //邊界判斷
      var tempL = 0,tempT = 0;
      var minL = 0,minT = 0,maxL = box.offsetWidth - mark.offsetWidth,maxT = box.offsetHeight - mark.offsetHeight ;

      if(left<minL){
        mark.style.left = minL + "px";
        tempL = minL;
      }else if(left>maxL){
        mark.style.left = maxL + "px";
        tempL = maxL;
      }else{
        mark.style.left = left + "px";
        tempL = left;
      }
      if(top<minT){
        mark.style.top = minT + "px";
        tempT = minT;
      }else if(top>maxT){
        mark.style.top = maxT + "px";
        tempT = maxT;
      }else{
        mark.style.top = top + "px";
        tempT = top;
      }
      //右側(cè)圖片跟著運(yùn)動:左側(cè)移動多少,右側(cè)跟著移動他的2倍即可
      var oImg = boxRight.getElementsByTagName("img")[0];
      oImg.style.left = -tempL*2 + "px";
      oImg.style.top = -tempT*2 + "px";

    }
    box.onmouseenter = function(e){
      e = e || window.event;
      
      mark.style.display = "block";
      setPosition(e);
      boxRight.style.display = "block";

    }
    box.onmousemove = function(e){
      e = e || window.event;
      setPosition(e);

    }
    box.onmouseleave = function(e){
      e = e || window.event;
      mark.style.display = "none";
      boxRight.style.display = "none";
      
    }
  </script>
</body>
</html>

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • 淺析javascript閉包 實(shí)例分析

    淺析javascript閉包 實(shí)例分析

    閉包是一個(gè)擁有許多變量和綁定了這些變量的環(huán)境表達(dá)式(通常是一個(gè)函數(shù)),因而這些變量也是環(huán)境表達(dá)式的一部分。
    2010-12-12
  • JS滾輪事件onmousewheel使用介紹

    JS滾輪事件onmousewheel使用介紹

    鼠標(biāo)滾輪滾動控制圖片或者文字的大小,例如此類的轉(zhuǎn)動鼠標(biāo)滾輪實(shí)現(xiàn)縮放等等交互效果中,會用到 Mousewheel 事件,感興趣的朋友可以了解下
    2013-11-11
  • JS暴虐查找法簡潔版

    JS暴虐查找法簡潔版

    有過相關(guān)經(jīng)驗(yàn)的朋友都知道,Jscript的效率畢竟有限,在數(shù)組中查找數(shù)據(jù)時(shí)如果用常規(guī)的算法來做執(zhí)行起來會很慢。
    2008-07-07
  • 一個(gè)簡單但常用的javascript表格樣式_鼠標(biāo)劃過行變色 簡潔實(shí)現(xiàn)

    一個(gè)簡單但常用的javascript表格樣式_鼠標(biāo)劃過行變色 簡潔實(shí)現(xiàn)

    經(jīng)常性的會需要使用表格顯示一些東西,當(dāng)表格比較大的時(shí)候一眼望去腦袋可能會有些暈,經(jīng)常性的因?yàn)闆]看準(zhǔn)行而出現(xiàn)誤操作,一般解決辦法是交替行變行或者鼠標(biāo)劃過行變色
    2008-09-09
  • Webpack優(yōu)化配置縮小文件搜索范圍

    Webpack優(yōu)化配置縮小文件搜索范圍

    這篇文章主要介紹了Webpack優(yōu)化-縮小文件搜索范圍的相關(guān)知識,文中較詳細(xì)的給大家介紹了可以優(yōu)化的途徑,需要的朋友可以參考下
    2017-12-12
  • 在element-ui的el-tree組件中用render函數(shù)生成el-button的實(shí)例代碼

    在element-ui的el-tree組件中用render函數(shù)生成el-button的實(shí)例代碼

    這篇文章主要介紹了在element-ui的el-tree組件中用render函數(shù)生成el-button 的方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2018-11-11
  • js變量聲明var使用與不使用的區(qū)別詳解

    js變量聲明var使用與不使用的區(qū)別詳解

    今天小編就為大家分享一篇關(guān)于js變量聲明var使用與不使用的區(qū)別詳解,小編覺得內(nèi)容挺不錯(cuò)的,現(xiàn)在分享給大家,具有很好的參考價(jià)值,需要的朋友一起跟隨小編來看看吧
    2019-01-01
  • JavaScript?對象新增方法defineProperty與keys的使用說明

    JavaScript?對象新增方法defineProperty與keys的使用說明

    這篇文章主要介紹了JavaScript對象新增方法defineProperty與keys的使用說明,文章圍繞主題展開詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,需要的朋友可以參考一下
    2022-09-09
  • setTimeout與setInterval的區(qū)別淺析

    setTimeout與setInterval的區(qū)別淺析

    這篇文章主要給大家介紹了關(guān)于setTimeout與setInterval區(qū)別的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用js具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-03-03
  • JavaScript實(shí)現(xiàn)一個(gè)電子小蜘蛛

    JavaScript實(shí)現(xiàn)一個(gè)電子小蜘蛛

    這篇文章主要介紹了JavaScript實(shí)現(xiàn)一個(gè)電子小蜘蛛,具體的樣子就是讓它會跟隨著我們的鼠標(biāo)進(jìn)行移動,那么我們?nèi)绾螌?shí)現(xiàn)這樣的效果呢,下面來詳細(xì)講解實(shí)現(xiàn)方法,需要的朋友可以參考下
    2024-10-10

最新評論