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

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

 更新時(shí)間：2016年05月23日 08:53:30   投稿：jingxian  
下面小編就為大家?guī)?lái)一篇用js實(shí)現(xiàn)放大鏡的效果的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

第一次發(fā)博客，還有點(diǎn)小激動(dòng)，本人現(xiàn)在正在天津上大學(xué)，希望以后從事前端這一行業(yè)，學(xué)習(xí)的時(shí)間不長(zhǎng)，寫(xiě)博客為了記錄自己的學(xué)習(xí)過(guò)程和收獲，當(dāng)然也算是鞏固。可能寫(xiě)的東西不會(huì)像大牛那樣高大上，只是一些基本的內(nèi)容，當(dāng)然我也會(huì)收藏一些我認(rèn)為好的，不錯(cuò)的文章（其實(shí)最主要是我能看懂。。。。）。我相信以后自己也能夠?qū)懗龈叽笊系臇|西。加油！

廢話(huà)說(shuō)的有點(diǎn)多，說(shuō)正事。前幾天看了一段潭州教育的教學(xué)視頻，其中的老師是用JQuery實(shí)現(xiàn)放大鏡的效果（老師講的是在是太慢，各種亂扯，跳著看的）。由于我還沒(méi)有好好的學(xué)習(xí)過(guò)JQuery，但是那些基本的代碼還是可以看懂的，所以就想拿現(xiàn)在正在學(xué)習(xí)的js練一下手，最后還是成功的實(shí)現(xiàn)了這個(gè)效果。

思路：先讓move塊和bimg塊隱藏，當(dāng)鼠標(biāo)移動(dòng)到box上時(shí)，使move塊和bimg塊顯示，獲取鼠標(biāo)當(dāng)前的位置，然后經(jīng)過(guò)計(jì)算給與move塊和bimg塊適當(dāng)?shù)闹祵?shí)現(xiàn)放大鏡效果（move塊和bimg塊的位置的計(jì)算后面有詳細(xì)介紹）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>放大鏡</title>
  <link href="css/bigimg.css" rel="stylesheet" />
  <script src="js/bigimg.js"></script>
</head>
<body onload="bigimg()">
  <div id="box">
    <img src="images/simg.jpg" alt="#">
    <div id="move"></div>
    <div id="bimg">
      <img id="b_bimg" src="images/bimg.jpg" alt="#">
    </div>
  </div>
</body>
</html>

css樣式：

*{
  margin:0px;
  padding:0px;
}
#box{
  width:430px;
  height:430px;
  margin:100px;
  margin-left:17%;
  position:relative;//這里使用相對(duì)定位，好讓其他的元素能依靠這個(gè)元素定位
}
#move{
  background-image:url(../images/move.png);
  width:220px;
  height:220px;
  position:absolute;
  left:0px;
  top:0px;
  display:none;//先讓他隱藏，用js使其顯示
}
#bimg{
  width:430px;
  height:430px;
  overflow:hidden;
  position:absolute;
  top:0px;
  left:450px;
  display:none;//先讓他隱藏，用js使其顯示
}
#bimg img{
  width:800px;
  height:800px;
  position:absolute;
  top:0px;
  left:0px;
}

Javascript:

function bigimg(){
  var bbox = document.getElementById("box");
  var bmove = document.getElementById("move");
  var bbimg = document.getElementById("bimg");
  var b_bimg = document.getElementById("b_bimg");
  bbox.onmouseover = function(){//鼠標(biāo)移動(dòng)到box上顯示大圖片和選框
    bbimg.style.display = "block";
    bmove.style.display="block";
  }
  bbox.onmouseout = function(){//鼠標(biāo)移開(kāi)box不顯示大圖片和選框
    bbimg.style.display = "none";
    bmove.style.display="none";
  }
  bbox.onmousemove = function(e){//獲取鼠標(biāo)位置
    var x = e.clientX;//鼠標(biāo)相對(duì)于視口的位置
    var y = e.clientY;
    var t = bbox.offsetTop;//box相對(duì)于視口的位置
    var l = bbox.offsetLeft;
    var _left = x - l - bmove.offsetWidth/2;//計(jì)算move的位置
    var _top = y - t -bmove.offsetHeight/2;
    if(_top<=0)//滑到box的最頂部
      _top = 0;
    else if(_top>=bbox.offsetHeight-bmove.offsetHeight)//滑到box的最底部
      _top = bbox.offsetHeight-bmove.offsetHeight ;
    if(_left<=0)//滑到box的最左邊
      _left=0;
    else if(_left>=bbox.offsetWidth-bmove.offsetWidth)//滑到box的最右邊
      _left=bbox.offsetWidth-bmove.offsetWidth ;
    bmove.style.top = _top +"px";//設(shè)置move的位置
    bmove.style.left = _left + "px";
    var w = _left/(bbox.offsetWidth-bmove.offsetWidth);//計(jì)算移動(dòng)的比例
    var h = _top/(bbox.offsetHeight-bmove.offsetHeight);
    var b_bimg_top = (b_bimg.offsetHeight-bbimg.offsetHeight)*h;//計(jì)算大圖的位置
    var b_bimg_left = (b_bimg.offsetWidth-bbimg.offsetWidth)*w;
    b_bimg.style.top = -b_bimg_top + "px";//設(shè)置大圖的位置信息
    b_bimg.style.left = -b_bimg_left + "px";
  }
    
}

效果圖：

1、move塊的計(jì)算

黑色箭頭：

var x = e.clientX;//鼠標(biāo)相對(duì)于視口的位置
var y = e.clientY;

紅色箭頭：

var t = bbox.offsetTop;//box相對(duì)于視口的位置
var l = bbox.offsetLeft;

橙色箭頭：

var _left = x - l - bmove.offsetWidth/2;//計(jì)算move的位置
var _top = y - t -bmove.offsetHeight/2;

2、bimg塊的計(jì)算

利用move塊在可移動(dòng)范圍內(nèi)的比例來(lái)設(shè)置大圖的位置

move塊的移動(dòng)范圍：

bbox.offsetWidth-bmove.offsetWidth

move塊現(xiàn)在的坐標(biāo)占可移動(dòng)范圍的比例：

var w = _left/(bbox.offsetWidth-bmove.offsetWidth);//計(jì)算移動(dòng)的比例
var h = _top/(bbox.offsetHeight-bmove.offsetHeight);

bimg的移動(dòng)范圍：

b_bimg.offsetHeight-bbimg.offsetHeight

bimg的位置：

var b_bimg_top = (b_bimg.offsetHeight-bbimg.offsetHeight)*h;//計(jì)算大圖的位置
var b_bimg_left = (b_bimg.offsetWidth-bbimg.offsetWidth)*w;

以上這篇用js實(shí)現(xiàn)放大鏡的效果的簡(jiǎn)單實(shí)例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論