javascript如何實(shí)現(xiàn)圖片移動(dòng)端

這篇文章主要介紹“javascript如何實(shí)現(xiàn)圖片移動(dòng)端”的相關(guān)知識(shí)，小編通過實(shí)際案例向大家展示操作過程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“javascript如何實(shí)現(xiàn)圖片移動(dòng)端”文章能幫助大家解決問題。

目前成都創(chuàng)新互聯(lián)已為上千家的企業(yè)提供了網(wǎng)站建設(shè)、域名、虛擬主機(jī)、網(wǎng)站托管運(yùn)營(yíng)、企業(yè)網(wǎng)站設(shè)計(jì)、呼和浩特網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。

首先，要實(shí)現(xiàn)圖片的移動(dòng)，我們需要先定義一個(gè)容器，圖片元素將嵌套在其中。我們可以使用HTML的標(biāo)簽元素來完成這個(gè)容器的創(chuàng)建。對(duì)于較為簡(jiǎn)單的應(yīng)用場(chǎng)景，可以使用<div>元素來充當(dāng)容器。例如：

<div id="container">
   <img src="img/mypic.jpg" alt="My Picture">
</div>

在文檔對(duì)象模型（DOM）中，JavaScript使用document.getElementById()來獲取HTML元素。我們可以把<div>的id屬性設(shè)置為“container”，并使用document.getElementById()獲取它的引用。之后，我們還需要獲取圖片元素的引用。

var container = document.getElementById('container');
var img = container.getElementsByTagName('img')[0];

隨著越來越多的觸控設(shè)備的普及，對(duì)于移動(dòng)應(yīng)用而言，開發(fā)者需要更加注重界面的交互性。在這種情況下，監(jiān)聽手指滑動(dòng)事件便顯得十分重要。我們可以使用JavaScript編寫以下代碼來實(shí)現(xiàn)：

var xStart, yStart, xMove, yMove, xEnd, yEnd;

img.addEventListener('touchstart', function(e){
   xStart = e.touches[0].pageX;
   yStart = e.touches[0].pageY;
});

img.addEventListener('touchmove', function(e){
   xMove = e.touches[0].pageX;
   yMove = e.touches[0].pageY;

   var xOffset = xMove - xStart;
   var yOffset = yMove - yStart;

   img.style.transform = 'translateX(' + xOffset + 'px) 
                                     translateY(' + yOffset + 'px)';
});

img.addEventListener('touchend', function(e){
   xEnd = e.changedTouches[0].pageX;
   yEnd = e.changedTouches[0].pageY;

   var xOffset = xEnd - xStart;
   var yOffset = yEnd - yStart;

   img.style.transform = 'translateX(' + xOffset + 'px) 
                                     translateY(' + yOffset + 'px)';
});

在上面的代碼中，我們使用的是觸摸事件。當(dāng)用戶滑動(dòng)圖片時(shí)，我們會(huì)監(jiān)聽一個(gè)touchmove事件。此時(shí)，我們便可以獲取用戶手指移動(dòng)的距離，并根據(jù)這個(gè)距離來更新圖片的位置。

其中，觸摸事件包括touchstart，touchmove和touchend三種類型。touchstart表示手指開始觸摸屏幕，touchmove則表示手指在屏幕上移動(dòng)，而touchend則表示手指離開屏幕。對(duì)于每種類型的事件，我們都會(huì)定義相應(yīng)的邏輯來實(shí)現(xiàn)圖片的移動(dòng)。

關(guān)于“javascript如何實(shí)現(xiàn)圖片移動(dòng)端”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。

當(dāng)前名稱：javascript如何實(shí)現(xiàn)圖片移動(dòng)端
文章出自：http://www.muchs.cn/article6/jpcoig.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站制作、動(dòng)態(tài)網(wǎng)站、面包屑導(dǎo)航、網(wǎng)站設(shè)計(jì)公司、網(wǎng)站營(yíng)銷、小程序開發(fā)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容