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

原生js實(shí)現(xiàn)放大鏡

 更新時(shí)間:2017年02月20日 14:40:45   作者:前端工程師_錢成  
本文主要分享了原生js實(shí)現(xiàn)放大鏡效果的示例代碼,具有很好的參考價(jià)值,下面跟著小編一起來看下吧

原理:左邊陰影在左邊圖片上從左到右移動(dòng)的時(shí)候,右邊大框也在右邊大圖片上從左到右移動(dòng)(盡管在視覺、原理和代碼上是相反的);所謂放大,其實(shí)就是一張?jiān)揪秃苄〉膱D對(duì)應(yīng)一張?jiān)揪秃艽蟮膱D。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    *{
      margin:0;
      padding:0;
    }
    .small{
      width: 400px;
      height: 400px;
      position: relative;
      background: url(http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=7dca2c442134be6a652e087296c8ac80) no-repeat center;
      border: 1px solid #ccc;
    }
    .small .inner{
      width: 100px;
      height: 100px;
      background: yellow;
      opacity: 0.5;
      filter: alpha(opacity=50);
      position: absolute;
      left:0;
      top:0;
      display: none;
    }
    .big{
      width: 400px;
      height: 400px;
      position: absolute;
      left:410px;
      top:0;
      overflow: hidden;
      border: 1px solid #ccc;
      display: none;
    }
    .big img{
      width: 200%;
      height: 200%;
      position: absolute;
      left:0;
      top:0;
    }
  </style>
</head>
<body>
<div id="small" class="small">
  <div class="inner"></div>
</div>
<div id="big" class="big">
  <img src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=d7dec5aeff022ea80c47eb76dc5838d8" alt=""/>
</div>
<script>
  var small=document.getElementById('small');
  var inner=small.getElementsByTagName('div')[0];
  var big=document.getElementById('big');
  var img=big.getElementsByTagName('img')[0];
  //當(dāng)鼠標(biāo)移入small的時(shí)候,inner和big顯示
  small.onmouseover=function(){
    big.style.display='block';
    inner.style.display='block';
  };
  //當(dāng)鼠標(biāo)在small移動(dòng)的時(shí)候:1)鼠標(biāo)在inner的中間 2)inner跟隨鼠標(biāo)移動(dòng)
  small.onmousemove=function(e){
    e=e||window.event;
    var left=e.clientX-this.offsetLeft-inner.offsetWidth/2;
    var top=e.clientY-this.offsetTop-inner.offsetHeight/2;
    if(left<=0){
      left=0;
    }else if(left>=this.offsetWidth-inner.offsetWidth){
      left=this.offsetWidth-inner.offsetWidth
    }
    if(top<=0){
      top=0;
    }else if(top>=this.offsetHeight-inner.offsetHeight){
      top=this.offsetHeight-inner.offsetHeight
    }
    inner.style.left= left+'px';
    inner.style.top= top+'px';
    //當(dāng)inner移動(dòng)的時(shí)候,大圖跟著一起移動(dòng),并且,大圖和inner移動(dòng)的方向相反;
    //或者理解為:左邊陰影在圖片上從左到右移動(dòng)的時(shí)候,右邊大框也在大圖片上從左到右移動(dòng)(盡管視覺上是相反的)。
    img.style.left=left/(small.offsetWidth-inner.offsetWidth)*(big.offsetWidth-img.offsetWidth)+'px';
    img.style.top=top/(small.offsetHeight-inner.offsetHeight)*(big.offsetHeight-img.offsetHeight)+'px';
  };
  //當(dāng)鼠標(biāo)移出的時(shí)候,inner和big隱藏;
  small.onmouseout=function(){
    big.style.display='none';
    inner.style.display='none';
  }
</script>
</body>
</html>

以上就是本文的全部?jī)?nèi)容,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助,同時(shí)也希望多多支持腳本之家!

相關(guān)文章

  • 避免 showModalDialog 彈出新窗體的原因分析

    避免 showModalDialog 彈出新窗體的原因分析

    避免 showModalDialog 彈出新窗體的原因分析,一般情況下需要返回值用window.open.
    2010-05-05
  • 純js實(shí)現(xiàn)手風(fēng)琴效果

    純js實(shí)現(xiàn)手風(fēng)琴效果

    這篇文章主要介紹了純js+html制作手風(fēng)琴和純css+html制作手風(fēng)琴兩種效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2016-04-04
  • JavaScript截取指定長(zhǎng)度字符串點(diǎn)擊可以展開全部代碼

    JavaScript截取指定長(zhǎng)度字符串點(diǎn)擊可以展開全部代碼

    這篇文章主要介紹了JavaScript截取指定長(zhǎng)度字符串點(diǎn)擊可以展開全部代碼 的相關(guān)資料,需要的朋友可以參考下
    2015-12-12
  • easyui-edatagrid.js實(shí)現(xiàn)回車鍵結(jié)束編輯功能的實(shí)例

    easyui-edatagrid.js實(shí)現(xiàn)回車鍵結(jié)束編輯功能的實(shí)例

    下面小編就為大家?guī)硪黄猠asyui-edatagrid.js實(shí)現(xiàn)回車鍵結(jié)束編輯功能的實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-04-04
  • 圖解js圖片輪播效果

    圖解js圖片輪播效果

    這篇文章主要以圖片展示的方式向大家講解了js圖片輪播效果的實(shí)現(xiàn)方法,對(duì)圖片輪播實(shí)現(xiàn)原理進(jìn)行了詳細(xì)介紹,感興趣的朋友可以參考一下
    2015-12-12
  • javascript+HTML5的canvas實(shí)現(xiàn)七夕情人節(jié)3D玫瑰花效果代碼

    javascript+HTML5的canvas實(shí)現(xiàn)七夕情人節(jié)3D玫瑰花效果代碼

    這篇文章主要介紹了javascript+HTML5的canvas實(shí)現(xiàn)七夕情人節(jié)3D玫瑰花效果代碼,使用了html5的canvas技術(shù),可呈現(xiàn)出帶有3D效果的玫瑰花漸顯效果,非常逼真自然,需要的朋友可以參考下
    2015-08-08
  • 淺談Javascript事件處理程序的幾種方式

    淺談Javascript事件處理程序的幾種方式

    事件就是用戶或?yàn)g覽器自身執(zhí)行的某種動(dòng)作。比如說click,mouseover,都是事件的名字。而相應(yīng)某個(gè)事件的函數(shù)就叫事件處理程序(或事件偵聽器)。為事件指定處理程序的方式有好幾種
    2012-06-06
  • 詳解JVM系列之內(nèi)存模型

    詳解JVM系列之內(nèi)存模型

    JVM是一種用于計(jì)算設(shè)備的規(guī)范,它是一個(gè)虛構(gòu)出來的機(jī)器,是通過在實(shí)際的計(jì)算機(jī)上仿真模擬各種功能實(shí)現(xiàn)的。JVM的內(nèi)存區(qū)域可以被分為:線程、棧、堆、靜態(tài)方法區(qū)。本文將介紹JVM的內(nèi)存模型,感興趣的小伙伴,可以參考下
    2021-06-06
  • layui彈出層按鈕提交iframe表單的方法

    layui彈出層按鈕提交iframe表單的方法

    今天小編就為大家分享一篇layui彈出層按鈕提交iframe表單的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2018-08-08
  • JSON.stringify的多種用法總結(jié)

    JSON.stringify的多種用法總結(jié)

    這篇文章主要給大家介紹了關(guān)于JSON.stringify使用的相關(guān)資料, JSON.stringify()方法是將一個(gè)JavaScript值(對(duì)象或者數(shù)組)轉(zhuǎn)換為一個(gè) JSON字符串,需要的朋友可以參考下
    2021-06-06

最新評(píng)論