国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

原生js實(shí)現(xiàn)簡(jiǎn)單的放大鏡效果

chanjarster / 2111人閱讀

摘要:接下來(lái)我們開(kāi)始實(shí)現(xiàn)一下它吧首先了解一下放大鏡效果的架構(gòu)如下圖,它由兩部分組成。第一部分的原理是設(shè)置的為需要放大的圖片,同時(shí)背景的寬高為。然后通過(guò)移動(dòng)的,來(lái)達(dá)到放大鏡的效果。不過(guò)這只是簡(jiǎn)單的實(shí)現(xiàn),還有使用實(shí)現(xiàn)的方法。

前言:
相信很多同學(xué)在瀏覽購(gòu)物網(wǎng)站的時(shí)候都會(huì)用到過(guò)放大鏡的功能,這個(gè)功能在日常的網(wǎng)站也會(huì)經(jīng)常用到。接下來(lái)我們開(kāi)始實(shí)現(xiàn)一下它吧;

(1)首先了解一下放大鏡效果的html架構(gòu):如下圖,它由兩部分組成。

html:

第一部分的原理是:設(shè)置box的background為需要放大的圖片,同時(shí)背景的寬高為100%。再將box的寬高設(shè)為300px,這樣背景圖片就可以撐滿box了。然后通過(guò)監(jiān)聽(tīng)box的mousemove事件,控制紅色小框塊的移動(dòng)。這個(gè)紅色小框塊就是要放大的地方。

第二部分的原理是:設(shè)置big里面的img為box的寬度的3倍(這里的3倍就是放大鏡的放大倍數(shù),當(dāng)然這個(gè)值是可以自由選擇的。)。同時(shí)big塊的寬高為350px,用來(lái)限制img的顯示。然后通過(guò)移動(dòng)img的left,top來(lái)達(dá)到放大鏡的效果。

  css代碼:
  html,body {
    margin: 0;
    padding:0;
  }
  #box{
    width: 300px;
    height: 300px;
    position: relative;
    background: url(12.png);
    background-size:100% 100%;
  }
  #box #small{
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0;
    left: 0;
    background: red;
    opacity: 0.6;
  }
  #big{
    width: 350px;
    height: 350px;
    overflow: hidden;
    position: relative;
    display: none;
  }
  #big img{
    width: 900px;  
    height: 900px;  
    position: absolute;
  }
  

(2)js部分:

var box = document.querySelector("#box");
var small = document.querySelector("#small");
var big = document.querySelector("#big");
var img = document.querySelector("#imgs");
//監(jiān)聽(tīng)box的mousemove事件
box.onmousemove = function(e){
  //獲取鼠標(biāo)的x、y坐標(biāo)。為什么要減去50呢?為了讓鼠標(biāo)剛好在small紅色小方塊的中心。
  var top = e.clientY-50;
  var left = e.clientX-50;
  //限制small小方塊移出box的范圍
  if(top > 200){top = 200};
  if(top < 0){top = 0};
  if(left > 200){left = 200};
  if(left < 0){left = 0};
  //動(dòng)態(tài)設(shè)置small小方塊的位置,讓小方塊跟隨鼠標(biāo)移動(dòng)
  small.style.left = left + "px";
  small.style.top = top + "px";
  //讓big里面的圖片跟隨鼠標(biāo)的移動(dòng)而移動(dòng)。這里為什么要乘以(-3)呢?因?yàn)閎ig里面的大圖是box的3倍。鼠標(biāo)在box上面向右移動(dòng)1px,那么big里面的大圖就要向左移動(dòng)(1 x -3)px才能達(dá)到我們想要的效果。
  img.style.top = top*(-3) + "px";
  img.style.left = left*(-3) + "px";
}
//監(jiān)聽(tīng)box的onmouseenter事件
box.onmouseenter = function(e){
  //當(dāng)鼠標(biāo)進(jìn)入box范圍的時(shí)候,顯示放大效果
  big.style.display="block";
}
//監(jiān)聽(tīng)box的onmouseleave 事件
box.onmouseleave = function(e){
  //當(dāng)鼠標(biāo)移出box范圍的時(shí)候,隱藏放大效果
  big.style.display="none";
}

好了,css+js實(shí)現(xiàn)放大鏡的功能到這里就完成了。很簡(jiǎn)單吧。不過(guò)這只是簡(jiǎn)單的實(shí)現(xiàn),還有使用canvas實(shí)現(xiàn)的方法。

不能只看不動(dòng)手的喔,自己動(dòng)手敲一遍,就好理解很多了。

文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/93701.html

相關(guān)文章

  • 原生js實(shí)現(xiàn)簡(jiǎn)單大鏡效果

    摘要:接下來(lái)我們開(kāi)始實(shí)現(xiàn)一下它吧首先了解一下放大鏡效果的架構(gòu)如下圖,它由兩部分組成。第一部分的原理是設(shè)置的為需要放大的圖片,同時(shí)背景的寬高為。然后通過(guò)移動(dòng)的,來(lái)達(dá)到放大鏡的效果。不過(guò)這只是簡(jiǎn)單的實(shí)現(xiàn),還有使用實(shí)現(xiàn)的方法。 前言:相信很多同學(xué)在瀏覽購(gòu)物網(wǎng)站的時(shí)候都會(huì)用到過(guò)放大鏡的功能,這個(gè)功能在日常的網(wǎng)站也會(huì)經(jīng)常用到。接下來(lái)我們開(kāi)始實(shí)現(xiàn)一下它吧; (1)首先了解一下放大鏡效果的html架構(gòu):如...

    lushan 評(píng)論0 收藏0
  • 原生js實(shí)現(xiàn)簡(jiǎn)單大鏡效果

    摘要:接下來(lái)我們開(kāi)始實(shí)現(xiàn)一下它吧首先了解一下放大鏡效果的架構(gòu)如下圖,它由兩部分組成。第一部分的原理是設(shè)置的為需要放大的圖片,同時(shí)背景的寬高為。然后通過(guò)移動(dòng)的,來(lái)達(dá)到放大鏡的效果。不過(guò)這只是簡(jiǎn)單的實(shí)現(xiàn),還有使用實(shí)現(xiàn)的方法。 前言:相信很多同學(xué)在瀏覽購(gòu)物網(wǎng)站的時(shí)候都會(huì)用到過(guò)放大鏡的功能,這個(gè)功能在日常的網(wǎng)站也會(huì)經(jīng)常用到。接下來(lái)我們開(kāi)始實(shí)現(xiàn)一下它吧; (1)首先了解一下放大鏡效果的html架構(gòu):如...

    megatron 評(píng)論0 收藏0
  • 原生js實(shí)現(xiàn)圖片大鏡效果

    摘要:放大鏡原理放大鏡的實(shí)現(xiàn)過(guò)程是將一個(gè)小圖放置在一個(gè)盒子里。右側(cè)大圖片盒子出現(xiàn)一個(gè)等比例放大的在小圖盒子移動(dòng)塊中的圖片內(nèi)容。右側(cè)大圖盒子中放置的是一張大的圖片,然后盒子設(shè)置成溢出隱藏。 放大鏡原理 放大鏡的實(shí)現(xiàn)過(guò)程是將一個(gè)小圖放置在一個(gè)盒子里。寬高都是100%。當(dāng)鼠標(biāo)在小圖盒子里移動(dòng)時(shí),出現(xiàn)一個(gè)移動(dòng)塊(陰影區(qū)域)。右側(cè)大圖片盒子出現(xiàn)一個(gè)等比例放大的在小圖盒子移動(dòng)塊中的圖片內(nèi)容。如圖(請(qǐng)勿...

    CoXie 評(píng)論0 收藏0
  • 仿淘寶大鏡效果

    摘要:本次文章的主要內(nèi)容是介紹一下淘寶的放大鏡效果是如何實(shí)現(xiàn)的,相信很多同學(xué)們對(duì)這個(gè)并不陌生。這個(gè)看似感覺(jué)很復(fù)雜的小功能,實(shí)際上原理卻是非常的簡(jiǎn)單,下面我們學(xué)習(xí)一下淘寶放大鏡效果是如何實(shí)現(xiàn)的。 前言 這一段時(shí)間事情挺多的,一直沒(méi)有時(shí)間寫文章。這兩天稍微閑了一些,就趁這會(huì)閑工夫?qū)懸黄恼隆1敬挝恼碌闹饕獌?nèi)容是介紹一下淘寶的放大鏡效果是如何實(shí)現(xiàn)的,相信很多同學(xué)們對(duì)這個(gè)并不陌生。這個(gè)看似感覺(jué)很復(fù)雜...

    wuyangnju 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

chanjarster

|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<