js用物件導向的方法編寫放大鏡

2021-10-04 05:23:06 字數 4054 閱讀 8810

隨著網上購物的逐漸火熱，放大鏡在許多的購物平台，廣泛的應用。如下圖，是京東**的放大鏡，它對使用者檢視商品的細節，作用很大

下面讓我們來看下如何用物件導向的的方法，來編寫它。

在物件導向的程式編寫中：最重要的就是物件導向過程的分析，

元素選擇

事件驅動

元素隱藏

小圖移動 大圖跟隨

面對物件設計：首先建乙個建構函式，並且例項化，人後根據ooa 編寫原型物件

ood


function


magnifier()


magnifier.prototype =


,//事件繫結


bindevent:


function()


,//元素隱藏


eletoggle:


function()


,//小圖移動 大圖跟隨


elemove:


function()


,}
物件導向程式設計：在前兩步完成之後，我們就可以進行程式設計了，不過在程式設計中我們也會發現，在前期分析的不足，實時改正就好

下面是我所實現的效果圖

下面是我的簡單布局：便於你解讀後續**
css樣式**

*


.small 


.small img


.small .wrap


.small .graybox	


.big


.big img


.xsmall 


.xsmall2
下面是js的詳細**，便於讀者進行檢視

// oop : 


function


magnifier


(options)


magnifier.prototype =


//只獲得一次，節省效能


this


.small_box_offset =


// console.log(this.small_box_offset)


//因為初始為display：none,offset的測量為0，要用getcomputedstyle;


this


.cutting_box_offset =


// console.log(this.cutting_box_offset);


的寬高this


.big_box_offset =


// console.log(this.big_box_offset)


//是否移入放大鏡


this


.magnifier_start =


false


;this


.bindevent()


;this


.scalebigimg()


;},//元素選擇功能


$:function


(selector)


,//事件繫結


bindevent:


function()


.bind


(this))


;//隱藏


this


.small_box_ele.


addeventlistener


("mouseout"


,function()


.bind


(this))


//元素運動


this


.small_box_ele.


addeventlistener


("mousemove"


,function


(evt)


.bind


(this))


;// 滾輪事件;


this


.small_box_ele.


addeventlistener


("mousewheel"


,function


( evt )


var e = evt || event;


// 判定向上還是向下;


this


.changecutboxscale


( e.wheeldelta >0?


"narrow"


:"large");


}.bind


(this))


;},//元素隱藏


eletoggle:


function


(type)


,//小圖移動 大圖跟隨


elemove:


function


(position_obj)


,//處理 x ，y


factoryposition:


function


(x,y)},


scalebigimg:


function()


;//計算大圖運動的邊界


this


.big_img_boundary =


;this


.big_img_ele.style.width =


this


.big_img_offset.width +


"px"


;this


.big_img_ele.style.height =


this


.big_img_offset.height +


"px";}


,            changecutboxscale :


function


( type )


this


.cutting_box_ele.style.width =


this


.cutting_box_offset.width +


"px"


;this


.cutting_box_ele.style.height =


this


.cutting_box_offset.height +


"px"


;// 位置改變之後，呼叫相應的比例計算工具;


this


.scalebigimg()


;// 重新進行大圖運動的計算;


this


.elemove


(this


.res);}


}new


magnifier()


var btns = document.


queryselectorall


(".btn");


var imgs = document.


queryselectorall


(".big img,.small img");


// console.log(imgs);


for(


var i =


0; i < btns.length ; i ++)}


}var small_img = document.


queryselector


(".small img");


var big_img    = document.


queryselector


(".big img");


//下方小圖


var xsmall_ele = document.


queryselector


(".xsmall"


)var xsmall2_ele = document.


queryselector


(".xsmall2"


)       


xsmall_ele.


addeventlistener


("mouseover"


,function()


)        


xsmall2_ele.


addeventlistener


("mouseover"


,function()


)

JS物件導向例項 放大鏡

1 分析 1.選擇元素 2.繫結事件 3.進入 顯示元素。4.移動 遮罩層跟隨滑鼠移動的同時計算遮罩層的移動比例 右側大圖，等比例移動 5.離開 隱藏元素。2 html布局 3 css樣式可根據實際情況做調整，以下僅供參考！main s box s box img s box span b box ...

用物件導向的方法重寫選項卡

面向過程的tab選項卡 內容1內容2 內容3下面我們要把它改成物件導向的選項卡 oli i onclick function 將onclick後面的匿名函式提到外面去 oli i onclick tab function tab adiv this.index style.display block...

js物件導向（一） 基本的概念 屬性 方法

一 什麼是物件導向程式設計 1 用物件的思想去寫 就是物件導向程式設計 2 我們一直在使用物件，如陣列array 時間date 我們把系統自帶的物件，叫做系統物件 var arr new array arr.length arr.push 二 物件導向程式設計 oop 的特點 抽象 抓住核心問題 封...