久久福利_99r_国产日韩在线视频_直接看av的网站_中文欧美日韩_久久一

您的位置:首頁技術文章
文章詳情頁

詳解JavaScript面向對象實戰之封裝拖拽對象

瀏覽:10日期:2023-06-02 14:23:54
目錄概述1、如何讓一個DOM元素動起來2、如何獲取當前瀏覽器支持的transform兼容寫法3、如何獲取元素的初始位置5、我們需要用到哪些事件?6、拖拽的原理7、 我又來推薦思維導圖輔助寫代碼了8、代碼實現part1、準備工作part2、功能函數part3、聲明三個事件的回調函數9、封裝拖拽對象概述

為了能夠幫助大家了解更多的方式與進行對比,我會使用三種不同的方式來實現拖拽。

不封裝對象直接實現; 利用原生JavaScript封裝拖拽對象; 通過擴展jQuery來實現拖拽對象。

拖拽的實現過程會涉及到非常多的實用小知識,因此為了鞏固我自己的知識積累,也為了大家能夠學到更多的知識,我會盡量詳細的將一些細節分享出來,相信大家認真閱讀之后,一定能學到一些東西。

1、如何讓一個DOM元素動起來

我們常常會通過修改元素的top,left,translate來其的位置發生改變。在下面的例子中,每點擊一次按鈕,對應的元素就會移動5px。大家可點擊查看。

點擊查看一個讓元素動起來的小例子

由于修改一個元素top/left值會引起頁面重繪,而translate不會,因此從性能優化上來判斷,我們會優先使用translate屬性。

2、如何獲取當前瀏覽器支持的transform兼容寫法

transform是css3的屬性,當我們使用它時就不得不面對兼容性的問題。不同版本瀏覽器的兼容寫法大致有如下幾種:

[’transform’, ’webkitTransform’, ’MozTransform’, ’msTransform’, ’OTransform’]

因此我們需要判斷當前瀏覽器環境支持的transform屬性是哪一種,方法如下:

// 獲取當前瀏覽器支持的transform兼容寫法function getTransform() { var transform = ’’, divStyle = document.createElement(’div’).style, // 可能涉及到的幾種兼容性寫法,通過循環找出瀏覽器識別的那一個 transformArr = [’transform’, ’webkitTransform’, ’MozTransform’, ’msTransform’, ’OTransform’], i = 0, len = transformArr.length; for(; i < len; i++) {if(transformArr[i] in divStyle) { // 找到之后立即返回,結束函數 return transform = transformArr[i];} } // 如果沒有找到,就直接返回空字符串 return transform;}

該方法用于獲取瀏覽器支持的transform屬性。如果返回的為空字符串,則表示當前瀏覽器并不支持transform,這個時候我們就需要使用left,top值來改變元素的位置。如果支持,就改變transform的值。

3、如何獲取元素的初始位置

我們首先需要獲取到目標元素的初始位置,因此這里我們需要一個專門用來獲取元素樣式的功能函數。

但是獲取元素樣式在IE瀏覽器與其他瀏覽器有一些不同,因此我們需要一個兼容性的寫法。

function getStyle(elem, property) { // ie通過currentStyle來獲取元素的樣式,其他瀏覽器通過getComputedStyle來獲取 return document.defaultView.getComputedStyle ? document.defaultView.getComputedStyle(elem, false)[property] : elem.currentStyle[property];}

有了這個方法之后,就可以開始動手寫獲取目標元素初始位置的方法了。

function getTargetPos(elem) { var pos = {x: 0, y: 0}; var transform = getTransform(); if(transform) {var transformValue = getStyle(elem, transform);if(transformValue == ’none’) { elem.style[transform] = ’translate(0, 0)’; return pos;} else { var temp = transformValue.match(/-?d+/g); return pos = {x: parseInt(temp[4].trim()),y: parseInt(temp[5].trim()) }} } else {if(getStyle(elem, ’position’) == ’static’) { elem.style.position = ’relative’; return pos;} else { var x = parseInt(getStyle(elem, ’left’) ? getStyle(elem, ’left’) : 0); var y = parseInt(getStyle(elem, ’top’) ? getStyle(elem, ’top’) : 0); return pos = {x: x,y: y }} }}

在拖拽過程中,我們需要不停的設置目標元素的新位置,這樣它才會移動起來,因此我們需要一個設置目標元素位置的方法。

// pos = { x: 200, y: 100 }function setTargetPos(elem, pos) { var transform = getTransform(); if(transform) {elem.style[transform] = ’translate(’+ pos.x +’px, ’+ pos.y +’px)’; } else {elem.style.left = pos.x + ’px’;elem.style.top = pos.y + ’px’; } return elem;}5、我們需要用到哪些事件?

在pc上的瀏覽器中,結合mousedown、mousemove、mouseup這三個事件可以幫助我們實現拖拽。

mousedown鼠標按下時觸發 mousemove鼠標按下后拖動時觸發 mouseup鼠標松開時觸發

而在移動端,分別與之對應的則是touchstart、touchmove、touchend。

當我們將元素綁定這些事件時,有一個事件對象將會作為參數傳遞給回調函數,通過事件對象,我們可以獲取到當前鼠標的精確位置,鼠標位置信息是實現拖拽的關鍵。

事件對象十分重要,其中包含了非常多的有用的信息,這里我就不擴展了,大家可以在函數中將事件對象打印出來查看其中的具體屬性,這個方法對于記不清事件對象重要屬性的童鞋非常有用。

6、拖拽的原理

當事件觸發時,我們可以通過事件對象獲取到鼠標的精切位置。這是實現拖拽的關鍵。當鼠標按下(mousedown觸發)時,我們需要記住鼠標的初始位置與目標元素的初始位置,我們的目標就是實現當鼠標移動時,目標元素也跟著移動,根據常理我們可以得出如下關系:

移動后的鼠標位置 - 鼠標初始位置 = 移動后的目標元素位置 - 目標元素的初始位置

如果鼠標位置的差值我們用dis來表示,那么目標元素的位置就等于:

移動后目標元素的位置 = dis + 目標元素的初始位置

通過事件對象,我們可以精確的知道鼠標的當前位置,因此當鼠標拖動(mousemove)時,我們可以不停的計算出鼠標移動的差值,以此來求出目標元素的當前位置。這個過程,就實現了拖拽。

而在鼠標松開(mouseup)結束拖拽時,我們需要處理一些收尾工作。詳情見代碼。

7、 我又來推薦思維導圖輔助寫代碼了

常常有新人朋友跑來問我,如果邏輯思維能力不強,能不能寫代碼做前端。我的答案是:能。因為借助思維導圖,可以很輕松的彌補邏輯的短板。而且比在自己頭腦中腦補邏輯更加清晰明了,不易出錯。

上面第六點我介紹了原理,因此如何做就顯得不是那么難了,而具體的步驟,則在下面的思維導圖中明確給出,我們只需要按照這個步驟來寫代碼即可,試試看,一定很輕松。

詳解JavaScript面向對象實戰之封裝拖拽對象

使用思維導圖清晰的表達出整個拖拽過程我們需要干的事情

8、代碼實現part1、準備工作

// 獲取目標元素對象var oElem = document.getElementById(’target’);// 聲明2個變量用來保存鼠標初始位置的x,y坐標var startX = 0;var startY = 0;// 聲明2個變量用來保存目標元素初始位置的x,y坐標var sourceX = 0;var sourceY = 0;part2、功能函數

因為之前已經貼過代碼,就不再重復

// 獲取當前瀏覽器支持的transform兼容寫法function getTransform() {}// 獲取元素屬性function getStyle(elem, property) {}// 獲取元素的初始位置function getTargetPos(elem) {}// 設置元素的初始位置function setTargetPos(elem, potions) {}part3、聲明三個事件的回調函數

這三個方法就是實現拖拽的核心所在,我將嚴格按照上面思維導圖中的步驟來完成我們的代碼。

// 綁定在mousedown上的回調,event為傳入的事件對象function start(event) { // 獲取鼠標初始位置 startX = event.pageX; startY = event.pageY; // 獲取元素初始位置 var pos = getTargetPos(oElem); sourceX = pos.x; sourceY = pos.y; // 綁定 document.addEventListener(’mousemove’, move, false); document.addEventListener(’mouseup’, end, false);}function move(event) { // 獲取鼠標當前位置 var currentX = event.pageX; var currentY = event.pageY; // 計算差值 var distanceX = currentX - startX; var distanceY = currentY - startY; // 計算并設置元素當前位置 setTargetPos(oElem, {x: (sourceX + distanceX).toFixed(),y: (sourceY + distanceY).toFixed() })}function end(event) { document.removeEventListener(’mousemove’, move); document.removeEventListener(’mouseup’, end); // do other things}

OK,一個簡單的拖拽,就這樣愉快的實現了。點擊下面的鏈接,可以在線查看該例子的demo。

使用原生js實現拖拽

9、封裝拖拽對象

我們來將上面實現的拖拽封裝為一個拖拽對象。我們的目標是,只要我們聲明一個拖拽實例,那么傳入的目標元素將自動具備可以被拖拽的功能。

在實際開發中,一個對象我們常常會單獨放在一個js文件中,這個js文件將單獨作為一個模塊,利用各種模塊的方式組織起來使用。當然這里沒有復雜的模塊交互,因為這個例子,我們只需要一個模塊即可。

為了避免變量污染,我們需要將模塊放置于一個函數自執行方式模擬的塊級作用域中。

(function() { ...})();

在普通的模塊組織中,我們只是單純的將許多js文件壓縮成為一個js文件,因此此處的第一個分號則是為了防止上一個模塊的結尾不用分號導致報錯。必不可少。當然在通過require或者ES6模塊等方式就不會出現這樣的情況。

我們知道,在封裝一個對象的時候,我們可以將屬性與方法放置于構造函數或者原型中,而在增加了自執行函數之后,我們又可以將屬性和方法防止與模塊的內部作用域。這是閉包的知識。

那么我們面臨的挑戰就在于,如何合理的處理屬性與方法的位置。

當然,每一個對象的情況都不一樣,不能一概而論,我們需要清晰的知道這三種位置的特性才能做出最適合的決定。

構造函數中: 屬性與方法為當前實例單獨擁有,只能被當前實例訪問,并且每聲明一個實例,其中的方法都會被重新創建一次。 原型中: 屬性與方法為所有實例共同擁有,可以被所有實例訪問,新聲明實例不會重復創建方法。 模塊作用域中:屬性和方法不能被任何實例訪問,但是能被內部方法訪問,新聲明的實例,不會重復創建相同的方法。

對于方法的判斷比較簡單。

因為在構造函數中的方法總會在聲明一個新的實例時被重復創建,因此我們聲明的方法都盡量避免出現在構造函數中。

而如果你的方法中需要用到構造函數中的變量,或者想要公開,那就需要放在原型中。

如果方法需要私有不被外界訪問,那么就放置在模塊作用域中。

對于屬性放置于什么位置有的時候很難做出正確的判斷,因此我很難給出一個準確的定義告訴你什么屬性一定要放在什么位置,這需要在實際開發中不斷的總結經驗。但是總的來說,仍然要結合這三個位置的特性來做出最合適的判斷。

如果屬性值只能被實例單獨擁有,比如person對象的name,只能屬于某一個person實例,又比如這里拖拽對象中,某一個元素的初始位置,也僅僅只是這個元素的當前位置,這個屬性,則適合放在構造函數中。

而如果一個屬性僅僅供內部方法訪問,這個屬性就適合放在模塊作用域中。

關于面向對象,上面的幾點思考我認為是這篇文章最值得認真思考的精華。如果在封裝時沒有思考清楚,很可能會遇到很多你意想不到的bug,所以建議大家結合自己的開發經驗,多多思考,總結出自己的觀點。

根據這些思考,大家可以自己嘗試封裝一下。然后與我的做一些對比,看看我們的想法有什么不同,在下面例子的注釋中,我將自己的想法表達出來。

點擊查看已經封裝好的demo

js 源碼

(function() { // 這是一個私有屬性,不需要被實例訪問 var transform = getTransform(); function Drag(selector) {// 放在構造函數中的屬性,都是屬于每一個實例單獨擁有this.elem = typeof selector == ’Object’ ? selector : document.getElementById(selector);this.startX = 0;this.startY = 0;this.sourceX = 0;this.sourceY = 0;this.init(); } // 原型 Drag.prototype = {constructor: Drag,init: function() { // 初始時需要做些什么事情 this.setDrag();},// 稍作改造,僅用于獲取當前元素的屬性,類似于getNamegetStyle: function(property) { return document.defaultView.getComputedStyle ? document.defaultView.getComputedStyle(this.elem, false)[property] : this.elem.currentStyle[property];},// 用來獲取當前元素的位置信息,注意與之前的不同之處getPosition: function() { var pos = {x: 0, y: 0}; if(transform) {var transformValue = this.getStyle(transform);if(transformValue == ’none’) { this.elem.style[transform] = ’translate(0, 0)’;} else { var temp = transformValue.match(/-?d+/g); pos = {x: parseInt(temp[4].trim()),y: parseInt(temp[5].trim()) }} } else {if(this.getStyle(’position’) == ’static’) { this.elem.style.position = ’relative’;} else { pos = {x: parseInt(this.getStyle(’left’) ? this.getStyle(’left’) : 0),y: parseInt(this.getStyle(’top’) ? this.getStyle(’top’) : 0) }} } return pos;},// 用來設置當前元素的位置setPostion: function(pos) { if(transform) {this.elem.style[transform] = ’translate(’+ pos.x +’px, ’+ pos.y +’px)’; } else {this.elem.style.left = pos.x + ’px’;this.elem.style.top = pos.y + ’px’; }},// 該方法用來綁定事件setDrag: function() { var self = this; this.elem.addEventListener(’mousedown’, start, false); function start(event) {self.startX = event.pageX;self.startY = event.pageY;var pos = self.getPosition();self.sourceX = pos.x;self.sourceY = pos.y;document.addEventListener(’mousemove’, move, false);document.addEventListener(’mouseup’, end, false); } function move(event) {var currentX = event.pageX;var currentY = event.pageY;var distanceX = currentX - self.startX;var distanceY = currentY - self.startY;self.setPostion({ x: (self.sourceX + distanceX).toFixed(), y: (self.sourceY + distanceY).toFixed()}) } function end(event) {document.removeEventListener(’mousemove’, move);document.removeEventListener(’mouseup’, end);// do other things }} } // 私有方法,僅僅用來獲取transform的兼容寫法 function getTransform() {var transform = ’’, divStyle = document.createElement(’div’).style, transformArr = [’transform’, ’webkitTransform’, ’MozTransform’, ’msTransform’, ’OTransform’], i = 0, len = transformArr.length;for(; i < len; i++) { if(transformArr[i] in divStyle) {return transform = transformArr[i]; }}return transform; } // 一種對外暴露的方式 window.Drag = Drag;})();// 使用:聲明2個拖拽實例new Drag(’target’);new Drag(’target2’);

這樣一個拖拽對象就封裝完畢了。

建議大家根據我提供的思維方式,多多嘗試封裝一些組件。比如封裝一個彈窗,封裝一個循環輪播等。練得多了,面向對象就不再是問題了。這種思維方式,在未來任何時候都是能夠用到的。

以上就是詳解JavaScript面向對象實戰之封裝拖拽對象的詳細內容,更多關于JS 面向對象 如何實現封裝拖拽對象的資料請關注好吧啦網其它相關文章!

標簽: JavaScript
相關文章:
主站蜘蛛池模板: 一区二区三区视频在线免费观看 | 黄色大片免费网址 | 91原创国产 | 亚洲乱码一区二区 | 亚洲国产精品久久久 | 天天干国产 | 国产精品99久久免费观看 | 成人在线观看免费视频 | 久久久久久免费免费 | 国产一区| 久久亚洲一区二区 | 亚洲综合精品在线 | 久久久国产一区二区三区 | 黄色大片免费网站 | 成人性视频免费网站 | 成人亚洲视频在线观看 | 亚洲高清网 | 国产精品亚洲精品 | 久视频在线观看 | 日本久久久久 | 日本高清h色视频在线观看 日日干日日操 | 日本不卡一区二区 | 日韩免费区 | 超碰伊人网 | 久久精品超碰 | 久久精品日 | 一区二区三区成人 | 精品久久一区二区 | 中文学幕专区 | 亚洲国产精品久久 | 精品日韩欧美一区二区在线播放 | 色av一区| www久久久 | 成人国产精品久久久 | 国产精品国产精品国产专区不片 | 国产精品久久国产精品 | 久久爱电影 | 成人av在线网 | 日韩亚洲视频在线观看 | 毛片网站在线观看 | 国产伦精品一区二区三区四区视频_ | 水卜樱一区二区av | 91一区| 亚洲免费观看视频 | 黄色一级大片视频 | 在线观看欧美一区 | 一级毛片免费看 | 福利视频1000| 精品国产精品三级精品av网址 | 久二影院| 精品久久中文字幕 | 黄在线免费观看 | 国产精品国产精品国产专区不片 | 一区二区不卡视频在线观看 | 在线免费日韩 | 激情久久久久 | 欧美激情首页 | 日本高清中文字幕 | 精品一区二区三区在线观看视频 | 一区二区三区视频 | 久久激情五月丁香伊人 | 久久国产精品一区 | 亚洲免费看片 | 一区二区在线免费观看 | 欧美成人精品一区二区三区 | 色爽女人免费 | 日韩久久精品 | 91久久爽久久爽爽久久片 | 综合色婷婷一区二区亚洲欧美国产 | 欧美韩一区二区 | 日韩6699人妻熟女毛片 | 国产电影一区二区 | 亚洲精品免费看 | 欧美一级片在线 | 91cn在线观看 | 亚洲欧美日韩电影 | 久久亚洲综合 | 国产精品美女久久久久久免费 | 欧美三级电影在线播放 | 国产专区一区 | 久久精品一区 | 欧美在线观看一区二区 | 大黑人交xxx极品hd | h网站在线观看 | 日韩视频在线一区二区 | 国产免费一区 | 中国大陆高清aⅴ毛片 | 亚洲成人三级 | 午夜精品一区 | 久久天天躁狠狠躁夜夜躁2014 | 97av | 麻豆专区一区二区三区四区五区 | 精品国产乱码久久久久久1区2区 | 银杏成人影院在线观看 | 亚洲一区二区三区免费在线观看 | 正在播放亚洲 | 国产成人一区 | 国产精久久一区二区三区 | 色吊丝2288sds中文字幕 | 亚洲精品1区2区 | 成人做爰9片免费视频 | 色噜噜视频在线观看 | 一级电影免费在线观看 | 亚洲狠狠爱 | 国产1页| 成人午夜精品一区二区三区 | 国产精品久久久久久久久久东京 | 在线永久免费观看日韩a | 在线播放黄色片网站 | 曰本人一级毛片免费完整视频 | 精品久久国产老人久久综合 | 国产高清一级毛片在线不卡 | www免费网站在线观看 | 国产日韩精品视频 | 黄色国产精品 | 午夜精品视频在线观看 | 日韩中文字幕在线播放 | 范冰冰一级做a爰片久久毛片 | 天堂av2020| 欧美成人激情视频 | jvid美女成人福利视频 | 精品99久久 | 国产精品久久免费视频 | 狠狠亚洲| 亚洲福利一区 | 亚洲怡红院在线观看 | 中文字幕av亚洲精品一部二部 | 国产第一二区 | 波多野结衣一区二区三区中文字幕 | 欧美极品视频 | av天天干 | 成人永久免费视频 | 久久久久在线 | 福利片在线 | 在线欧美成人 | 激情婷婷综合 | 亚洲三级免费观看 | 在线观看91精品国产入口 | 成人午夜影院 | 成人片免费看 | 视频一区 中文字幕 | 亚洲成人精品 | 国产免费看| 久久精品a一级国产免视看成人 | a亚洲精品 | 在线观看国产视频 | 亚洲精品四区 | 久久国产精品免费一区二区三区 | 精品亚洲成a人片在线观看 国产高清在线 | 我爱操 | 国产色片在线 | 国产特级毛片aaaaaa毛片 | 国内成人精品2018免费看 | 日韩一区二区不卡 | 超碰c| 亚洲最黄网站 | 噜噜噜在线视频 | 日韩一区欧美 | 欧美一区二区三区电影 | 综合一区二区三区 | 欧美国产在线观看 | 91夜夜| 欧美成人一区二区三区 | 精品免费 | av男人天堂网 | 日韩成人在线影院 | 操操操av | 亚洲精品在线视频 | 国产午夜精品一区二区三区视频 | 日韩爽妇网 | 伊人春色网 | 久久中文字幕一区 | 国产视频精品在线观看 | 欧美激情在线播放 | 国产精品成人国产乱一区 | 欧美一区二区三区电影 | 久久久www成人免费精品 | 成人h动漫精品一区二区器材 | 亚洲码欧美码一区二区三区 | 天天摸夜夜操 | 久久久国产一区二区三区 | 仙人掌旅馆在线观看 | 在线欧美一区 | jjzz18国产 | 欧美在线a | 欧美国产日韩在线观看 | 国产中文字幕在线 | 夜夜骑天天操 | 国产精品福利在线观看 | 99re6在线视频精品免费 | 欧美一级片在线观看 | 久久精品久久综合 | 97超碰在线免费 | 亚洲视频在线观看 | 日韩一区二 | 青青草久 | 亚洲国产精品久久久久久女王 | 奇米二区 | 久久精品成人免费视频 | 欧洲免费av | 一级毛片免费看 | 欧美日韩亚洲一区二区 | 君岛美绪一区二区三区在线视频 | 国产精品久久久久久久久久新婚 | 91日日夜夜 | 久久成人久久爱 | 99色播 | 黄色高清视频在线观看 | 久草精品视频 | 国产欧美视频在线 | 日本一区二区精品 | 欧美日韩一区二区三区在线观看 | 少妇久久久 | 午夜精品亚洲日日做天天做 | 精品亚洲一区二区三区四区五区 | 毛片大全 | 亚洲一区二区在线播放 | 日本成人小视频 | 日韩精品专区在线影院重磅 | 国产精品毛片久久久久久久 | 午夜资源 | 午夜久久久 | 精品国产一区二区三区成人影院 | 国产精品亚洲一区二区三区 | 成人精品国产 | 伊人福利视频 | 日韩精品在线观看视频 | 禁果av一区二区三区 | 久久久久国产一区二区三区四区 | 国产成人精品免费视频大全最热 | 2024天天干| 99re99| 精品视频在线免费观看 | 欧美精品久久一区 | 免费黄色片一区二区 | 天天操狠狠操 | 成人免费共享视频 | 精品国产精品三级精品av网址 | 天天看天天操 | 婷婷丁香综合 | 国产伦精品一区二区三区在线 | 超碰国产在线 | 午夜精品久久久久久久久 | 色黄视频在线 | 国产精品大片在线观看 | 国产免费黄色大片 | 伊人精品视频在线观看 | 成人欧美一区二区三区视频xxx | 黄色天堂在线观看 | 91麻豆精品国产91久久久资源速度 | 成年人视频在线免费观看 | 亚洲黄色一区二区三区 | 国产片在线观看 | 99精品久久精品一区二区爱城 | 激情综合色综合久久综合 | 成人看片网 | 在线中文av | 91.成人天堂一区 | 91久久爽久久爽爽久久片 | av免费观看网页 | 精品久久久久久久久久久久久久 | 精品亚洲成a人在线观看 | 精品一区在线 | 亚洲国产精品久久久久久女王 | 亚洲综合精品在线 | 日韩精品免费在线视频 | 三区视频| 国产91富婆养生按摩会所 | 国产精品国产精品国产专区不卡 | 久久综合一区二区三区 | 成人h动漫精品一区二区器材 | 精品99久久久久久 | 麻豆精品久久 | 亚洲欧美日韩在线一区二区三区 | 亚洲精选免费视频 | 日日操视频 | 日本a视频 | 91久久久久久 | 精品中文字幕在线观看 | 欧美成人精品激情在线观看 | 成人免费网站www网站高清 | 国产精品视频一区二区三区不卡 | 成人免费视频观看视频 | 一区免费视频 | 久久久久久精 | 在线观看免费黄色片 | 91激情视频 | 欧美一级高潮片免费的 | 毛片网站大全 | 国产99久久久精品视频 | 正在播放欧美 | 777色狠狠一区二区三区 | 欧美在线一二三 | 国内外成人在线视频 | 欧美在线观看视频 | 国产精品毛片无码 | xx视频在线观看 | 色婷婷综合网 | 波多野结衣先锋影音 | 欧美一区二区三区在线观看视频 | 午夜妇女aaaa区片 | 久久精品欧美一区二区三区不卡 | 五月婷婷综合网 | 久久国产一区视频 | 日韩6699人妻熟女毛片 | 丁香久久 | 久久久久久一区 | 久久不射电影网 | 黄色骚片 | 国产日韩欧美一区二区 | 亚洲一区二区在线播放 | 精品久久久久久久久久久 | 91视频分类 | 色免费视频 | 成人av电影网址 | 黄色av网站免费看 | 91视频在线看 | 精品久久久久久久久久久久久久 | 久久免费视频观看 | www久 | 三级黄色片在线免费观看 | 大桥未久亚洲精品久久久强制中出 | 一区二区在线播放视频 | 波多野结衣一二三四区 | 一区二区三区免费在线 | 亚洲麻豆| 久久精品二区 | 一级激情片 | 亚洲精品久久久 | 国产美女自拍视频 | 538在线精品| 国产欧美一区二区视频 | 亚洲午夜精品片久久www慈禧 | 国产一区二区自拍视频 | 国产精品久久一区二区三区 | 久久亚洲一区 | 99亚洲精品 | 一级做a爰性色毛片免费1 | 自拍偷拍专区 | 亚洲精品影院 | 欧美三级免费观看 | 国产成人精品久久二区二区91 | 国产一区二区观看 | 成人在线免费视频 | 在线色网站| 偷拍自拍第一页 | 息与子猛烈交尾一区二区 | 99re热精品视频国产免费 | av看片 | 欧美亚洲天堂 | 国产91在线观看 | 91精品国产99 | 日韩欧美在线视频 | 国产精品自产拍在线观看 | www婷婷av久久久影片 | 色橹橹欧美在线观看视频高清 | 性色视频在线 | 日日干夜夜操 | 久久精品系列 | 四虎com| 毛片毛片毛片毛片毛片毛片 | 一级片福利 | 成人高清视频在线 | 日韩在线一区二区三区 | 91精品欧美久久久久久久 | 中文字幕精品三级久久久 | 天天射美女 | 天堂精品 | 一区毛片| a中文在线 | 亚洲一区在线视频 | 国产欧美综合一区二区三区 | 欧美一级精品 | 日日摸日日碰夜夜爽不卡dvd | 国产一区二区精品 | 日韩一级片 | 中文字幕日韩一区二区三区 | 天天久 | 91在线中文字幕 | 日本欧美久久久久 | 亚洲精品乱码久久久久久蜜桃图片 | 男女网站在线观看 | 人人草天天草 | 在线观看成人 | 一区二区免费在线观看 | 亚洲国产精品成人 | 黑色丝袜脚足j国产在线看68 | 北条麻妃国产九九九精品小说 | 91精品国产综合久久久蜜臀粉嫩 | 成人国产在线观看 | 久久久精彩视频 | 日韩精品2区 | 日韩2020狼一二三 | 国产真实精品久久二三区 | 成人1区| 国精品一区二区三区 | 日韩快播电影网 | 久久久97 | а天堂中文最新一区二区三区 | 国产乱码精品一区二区三区忘忧草 | 色播99| 黄色天堂在线观看 | 欧美日韩不卡合集视频 | 国产91九色| 天天操天天干视频 | 一级在线观看 | 欧美日韩中文字幕 | 电影91久久久 | 亚洲精品成人悠悠色影视 | 欧美一级黄色网 | 国产欧美日韩综合精品一区二区 | 天天看天天操 | www.精品 | 欧美激情视频一区二区三区在线播放 | h色视频在线观看 | 欧美成人在线免费视频 | 一级片大全| 男女网站在线观看 | 成人午夜网 | 看亚洲a级一级毛片 | 午夜电影福利 | 亚洲午夜精品久久久久久app | 99热这里有精品 | 毛片在线免费 | 亚洲欧美日韩另类一区二区 | 国产精品一区二区三区在线播放 | 久久va | 国产一区二区资源 | 亚洲国产二区 | 中国一级大毛片 | 在线 亚洲 欧美 | 国产成人精品在线观看 | 久久久99久久久国产自输拍 | 久久人人爽人人爽人人片av不 | 亚洲一区二区在线视频 | 国产区免费在线观看 | 日韩中文字幕在线观看 | 国产午夜精品一区二区 | 亚洲一区二区三区在线免费观看 | 91精品欧美久久久久久久 | 中文日韩在线 | 亚洲日本欧美日韩高观看 | 欧美自拍视频 | 国产77777| 日韩欧美精品一区二区三区 | 日韩国产欧美一区 | 久久精品免费 | 国产精品久久久久久久电影 | 91精品国产综合久久福利软件 | 亚洲经典视频在线观看 | 国产精品久久久久久久久免费桃花 | 综合伊人| 国产在线视频一区二区 | 97国产一区二区精品久久呦 | 性培育学校羞耻椅子调教h 欧美精品网站 | 可以免费看黄视频的网站 | 天天躁日日躁aaaaxxxx | 免费观看一级特黄欧美大片 | 欧美日韩国产在线看 | 欧美一区二区在线 | 日韩在线精品 | h片在线免费观看 | 日韩一区二区在线免费观看 | 一区二区中文字幕在线观看 | 男女视频在线观看 | 一区二区三区在线免费看 | 中文字幕第二十六页页 | 青青草超碰在线 | 国产精品免费一区二区 | 国产精品久久久久久久久久久免费看 | 伊人在线 | 中国一级免费毛片 | 久久久国产精品 | 久久不射网 | av黄色在线 | 国产日韩欧美一区二区 | 国产精品久久久久无码av | 一区二区精品视频 | 在线精品一区二区 | aⅴ色国产 欧美 | 91视频免费在线 | 欧美亚洲一级 | 免费一区二区 | 中文字幕精品视频在线观看 | 在线观看你懂的视频 | 欧洲尺码日本国产精品 | 国产二区视频 | 日本做暖暖视频高清观看 | 亚洲国产一区二区三区四区 | 亚州成人 | 国产精品18久久久久久久久 | 91小视频| 夜久久| 手机看片1 | 日韩精品视频网 | 午夜成人在线视频 | 亚洲激情av | 在线观看黄 | 欧美一区免费 | 国产91在线观看 | www.久久99 | 久久av在线 | 久久福利| 伊人久久国产 | 伊人99 | 在线国产一区二区 | 天天看天天干 | 久久久久久亚洲 | 久久精品久久久久久久久久久久久 | 久久久久久久国产精品 | 国产一极毛片 | 精品久久影院 | 亚洲在线电影 | 黄网站涩免费蜜桃网站 | www亚洲成人 | 日韩成人在线电影 | 欧美在线观看一区 | 欧美成年人视频 | 成人免费毛片aaaaaa片 | 在线观看免费黄色小视频 | 午夜精品视频在线观看 | 中文字幕在线一区 | 亚洲一区二区在线视频 | 欧美一级黄 | 成人久久久精品乱码一区二区三区 | 亚洲午夜视频在线观看 | 婷婷激情五月 | 久久成人一区 | 国产99热 | av在线一区二区 | 国产干干干 | 欧美黄色片 | 国产精品成人国产乱一区 | 亚洲成人自拍 | 精品久久久久久久久久久院品网 | 精品免费视频 | 国产日皮视频 | www午夜| 天堂av中文在线 | 成人精品视频 | 成人在线观看网 | 97av| 免费在线h | 久久精品欧美 | 午夜电影| 欧美二三区 | 天天爽天天草 | 国产片在线观看 | 欧美一级视频在线观看 | 中文字幕一区二区不卡 | 中文字幕在线三区 | av在线一区二区三区 | 久久久久久久久99精品 | 91精品一区二区三区久久久久久 | 另类天堂| 在线欧美日韩 | 国产精品久久久久一区二区三区 | 亚洲精品成人悠悠色影视 | 后人极品翘臀美女在线播放 | 成人在线播放 | 成人不卡 | 99这里只有精品视频 | a毛片毛片av永久免费 | 中文字幕国产日韩 | 国产成人精品免高潮在线观看 | 欧美午夜一区二区三区 | 亚洲第一区在线 | 色精品视频 | 国产成人精品久久 | 欧美日韩国产一区二区三区在线观看 | 精品国产综合 | 日韩在线视频网站 | 日韩成人不卡 | 米奇影视7777 | 亚洲 欧美 自拍偷拍 | 色啪网站 | 四虎永久免费在线 | 91看片淫黄大片一级在线观看 | 精品亚洲一区二区三区 | 久久久99久久久国产自输拍 | 日本a在线 | 成人天堂噜噜噜 | 欧美日韩国产在线观看 | 午夜精品一区二区三区在线视频 | 久久夜夜 | 黄色国产一级视频 | 不卡一区 | 黄色一级在线观看 | 国产成人av在线 | 男女免费视频 | 国产精品日韩一区二区 | 午夜精品一区二区三区免费视频 | 国产欧美一区二区三区在线看 | 久久久久久久一区 | 成人情趣视频 | 国产传媒一区 | 日韩精品毛片 | 国产一级毛片国语一级 | 在线观看日韩av | 欧美黄色大片网站 | 在线观看视频一区二区三区 | 国产成人av一区二区三区 | 亚洲免费精品网站 | 欧美在线观看黄 | 色综合久久久 | 国产超碰在线 | www.久久久.com | 亚州精品天堂中文字幕 | 欧州一区二区三区 | 久久精品国产99久久久 | 亚洲国产高清在线 | 在线观看精品91福利 | 成人影院网站ww555久久精品 | 欧美精品成人一区二区在线 | 91精品一区 |