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

原生js簡單實現(xiàn)放大鏡特效

 更新時間:2017年05月16日 14:55:55   作者:Cheny0815  
這篇文章主要為大家詳細介紹了原生js簡單實現(xiàn)放大鏡特效,具有一定的參考價值,感興趣的小伙伴們可以參考一下

本文實例為大家分享了js實現(xiàn)放大鏡特效展示的具體代碼,供大家參考,具體內容如下

普及知識:放大鏡特效涉及到的幾個值

offsetWidth    獲取元素的寬度
offsetHeight  獲取元素的高度
offsetLeft父元素沒有定位時,獲取元素距離頁面的左邊距,父元素有定位時,獲取元素距離父元素的左邊距
offsetTop父元素沒有定位時,獲取元素距離頁面的上邊距,父元素有定位時,獲取元素距離父元素的上邊距
scrollTop  內容滾動的上邊距
scrollLeft 內容滾動的左邊距
onmousemove  鼠標移動事件
onmouseover  鼠標劃過事件

主要思路:

    1.鼠標移動,陰影區(qū)跟著移動
    2.鼠標移動,大圖也跟著移動
    3.陰影區(qū)域與小圖的比例 以及 大圖顯示區(qū)域與大圖的比例 是一樣的
    4.保證陰影區(qū)域以及大div.big在鼠標移動到div.small時顯示

html實現(xiàn)

<div id="fangdajing">
    <div class="small">
      <img src="small.jpg" alt="">
      <div class="shadow"></div>
    </div>
    <div class="big">
      <img src="big.jpg" alt="">
    </div>
  </div>

css樣式

//定位,大圖顯示區(qū)域和陰影區(qū)域最開始不顯示
#fangdajing{
      width:450px;
      height:450px;
      position:relative;
    }
    .small{
      width:450px;
      height:450px;
      position:absolute;
      left:0px;
      top:0px;
    }
    .shadow{
      width:200px;
      height:200px;
      background:yellow;
      opacity:0.3;
      position:absolute;
      top:0;
      left:0;
      display:none;
    }
    .big{
      position:absolute;
      left:450px;
      width:356px;
      height:356px;
      overflow:hidden;
      display:none;
    }

js實現(xiàn)

1.獲取對象

var fdj = document.getElementById('fangdajing');
var big = document.getElementsByClassName('big')[0];
var small = document.getElementsByClassName('small')[0];
var shadow = document.getElementsByClassName('shadow')[0];

2.鼠標的移入移出事件,當鼠標移入的時候,顯示大圖顯示區(qū)以及陰影區(qū)域

  small.onmouseover = function(){
        big.style.display = 'block';
        shadow.style.display = 'block';
  }

3.

(1)鼠標移動,div.shadow跟著移動,先獲取到shadow在small內的相對位置,已知鼠標點擊位置距離頁面的邊距,fdj距離頁面的邊距,fdj以及shadow的寬高,讓鼠標劃過的位置一直位于shadow區(qū)域的中心點,所以可得shadow在small內的相對位置,之后進行判斷,讓shadow不能出邊界,最后進行賦值操作

(2)shadow區(qū)域移動,大圖顯示相應的位置,即大圖滾動相應的距離,大圖和shadow的比例為big.offsetWidth/shadow.offsetWidth,以shadow的左上角為準,大圖的滾動距離為left*相應比例

   small.onmousemove = function(ent){
    var e = ent || event;  //獲取鼠標事件對象
    var left = e.pageX - fdj.offsetLeft - shadow.offsetWidth/2; //獲取shadow在small內的相對位置
    var top = e.pageY - fdj.offsetTop - shadow.offsetHeight/2;
    var tw = fdj.offsetWidth - shadow.offsetWidth; //獲取shadow最大可移動距離
    var th = fdj.offsetHeight - shadow.offsetHeight; 
    //對shadow進行限制
    if(left < 0){
      left = 0;      
    }else if(left > tw){
      left = tw;
    }
     if(top < 0){
      top = 0;      
    }else if(top > th){
      top = th;
    } 
    //賦值
    small.style.left = left + 'px';
    small.style.top = top + 'px';    
    //大圖跟著移動
    var sl = left * big.offsetWidth / shadow.offsetWidth;
    var st = top * big.offsetHeight / shadow.offsetHeight;
    big.scrollTop = st;
    big.scrollLeft = sl; 
  }

4.鼠標移出,大圖以及shadow隱藏

  small.onmouserout = function(){
    big.style.display = 'none';
    shadow.style.display = 'none';    
  }

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

相關文章

  • js快速與任意QQ號碼建立臨時對話

    js快速與任意QQ號碼建立臨時對話

    那時候在群里討論的,吸納很多人的方法與意見,修改而成的
    2008-10-10
  • js操作label給label賦值及取label的值示例

    js操作label給label賦值及取label的值示例

    給label賦值以及取label的值,取值及賦值代碼如下,感興趣的朋友可以參考下
    2013-11-11
  • 發(fā)一個數(shù)據(jù)過濾的代碼,很簡單,有用的著的拿去

    發(fā)一個數(shù)據(jù)過濾的代碼,很簡單,有用的著的拿去

    發(fā)一個數(shù)據(jù)過濾的代碼,很簡單,有用的著的拿去...
    2007-02-02
  • uniapp中vuex的應用使用步驟

    uniapp中vuex的應用使用步驟

    Vuex是一個專為Vue.js應用程序開發(fā)的狀態(tài)管理模式,它采用集中式存儲管理應用的所有組件的狀態(tài),并以相應的規(guī)則保證狀態(tài)以一種可預測的方式發(fā)生變化,下面這篇文章主要給大家介紹了關于uniapp中vuex的應用使用,需要的朋友可以參考下
    2022-08-08
  • Javascript條件判斷使用小技巧總結

    Javascript條件判斷使用小技巧總結

    我們已經知道,null?沒有任何的屬性值,并且無法獲取其實體(existence)值。所以?null.property?返回的是錯誤(error)而不是?undefined?。
    2008-09-09
  • TypeScript 裝飾器定義

    TypeScript 裝飾器定義

    這篇文章主要介紹了TypeScript 裝飾器定義,裝飾器是一種新的聲明,它可以作用于類聲明 、方法 、訪問器 、屬性以及參數(shù)上,下面我們就來看看TypeScript 裝飾器的具體定義吧,需要的朋友可以參考一下,希望對你有所幫助
    2021-12-12
  • 我的javascript 函數(shù)鏈之演變

    我的javascript 函數(shù)鏈之演變

    我的javascript 函數(shù)鏈之演變,需要的朋友可以參考下。
    2011-04-04
  • JavaScript 中Date對象的格式化代碼方法匯總

    JavaScript 中Date對象的格式化代碼方法匯總

    JavaScript默認的時間格式我們一般情況下不會用,所以需要進行格式化,下面小編給大家?guī)砹巳Njs date對象格式化實例代碼,需要的朋友參考下吧
    2017-09-09
  • 學習使用bootstrap的modal和carousel

    學習使用bootstrap的modal和carousel

    這篇文章主要教大家學會用bootstrap的modal和carousel,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-12-12
  • javascript 拖放效果實現(xiàn)代碼

    javascript 拖放效果實現(xiàn)代碼

    JavaScript擅長于修改頁面中的DOM元素,但是我們使用JavaScript通常只是實現(xiàn)一些簡單功能,例如實現(xiàn)圖片的翻轉,網頁中的標簽頁,等等。這篇文章將向你展示如何在頁面中,對創(chuàng)建的元素實現(xiàn)拖放。
    2010-01-01

最新評論