原理是點(diǎn)擊圖片時(shí)，改變圖片的寬度和高度。

下面是效果圖：

1、未點(diǎn)擊時(shí)圖片

未點(diǎn)擊時(shí)圖片

2、點(diǎn)擊后的圖片

點(diǎn)擊后的圖片

HTML代碼：

<img src="img/pic.jpg" id="images" width="100" height="100" />

jQuery核心代碼：

<script>

$(document).ready(function() {

var img=$(this),t=true;//當(dāng)t為true時(shí)，是正常狀態(tài)下的

$("#images").click(function() {

if(t) {

t=false;

imgH=$(this).height(400);

imgW=$(this).width(400);

} else {

t=true;

imgH=$(this).height(100);

imgW=$(this).width(100);

}

});

});

</script>

了點(diǎn)時(shí)間寫的，蠻長(zhǎng)時(shí)間了。個(gè)人很喜歡，一段很簡(jiǎn)單的代碼，卻能夠?qū)崿F(xiàn)很多功能。（因?yàn)榇a文字呈現(xiàn)沒有格式，難以閱讀，以后小編提供的代碼都以截圖方式呈現(xiàn)，底部有源碼鏈接）。

到底多簡(jiǎn)單，先來看代碼

基于jQuery

基于jQuery

拖拽實(shí)例圖：

拖拽實(shí)例圖

將代碼剝離，只要寫5行就可以實(shí)現(xiàn)拖拽了，是不是很簡(jiǎn)單：

調(diào)用方式

放大、縮小

我們給拖拽增加點(diǎn)功能，支持放大、縮小，先看實(shí)例圖:

放大、縮小

將代碼剝離，原先的代碼保留不變，增加一個(gè)綁定事件：

放大、縮小

這樣來實(shí)現(xiàn)放大、縮小、拖拽是不是很簡(jiǎn)單，還能實(shí)現(xiàn)很多其他效果，大家慢慢領(lǐng)悟。

原理分析：

放大、縮小、拖拽都離不開在網(wǎng)頁上拖動(dòng)鼠標(biāo)，對(duì)于前端來說就是 document 的 mousemove，當(dāng)鼠標(biāo)在網(wǎng)頁上移動(dòng)的時(shí)候，無時(shí)無刻不在觸發(fā) mousemove 事件，當(dāng)鼠標(biāo)觸發(fā)事件時(shí)，什么時(shí)候需要執(zhí)行我們特定的操作，這就是我們要做的了。我在 mousemove 中增加了幾個(gè)對(duì)象來判定是否進(jìn)行操作：

• move：是否執(zhí)行觸發(fā)操作

• move_target：操作的元素對(duì)象

• move_target.posix：操作對(duì)象的坐標(biāo)

• call_down：mousemove的時(shí)候的回調(diào)函數(shù)，傳回來的this指向document

• call_up：當(dāng)鼠標(biāo)彈起的時(shí)候執(zhí)行的回調(diào)函數(shù)，傳回來的this指向document

小提示：

• 簡(jiǎn)單的操作，只需要設(shè)定 move_target 對(duì)象，設(shè)置 move_target 的時(shí)候不要忘記了 move_target.posix 哦；

• 復(fù)雜的操作可以通過call_down、call_up進(jìn)行回調(diào)操作，這個(gè)時(shí)候是可以不用設(shè)置 move_target 對(duì)象的

深入研究

拖拽和放大、縮小實(shí)現(xiàn)了，但是有個(gè)問題，當(dāng)我們鼠標(biāo)點(diǎn)擊并滑動(dòng)的時(shí)候，是會(huì)選中文本的，為了避免這個(gè)問題，大家可以自行百度

css 阻止文本選中

css 阻止文本選中

網(wǎng)頁的放大、縮小、拖拽事件就研究到這里了，小編不再對(duì)如何拓展進(jìn)行深入講解，一切靠大家自行研究，權(quán)當(dāng)課后作業(yè)了?！?/p>

源碼鏈接地址：

http://orzcss.com/posts/d554a392/

本文內(nèi)容均屬個(gè)人原創(chuàng)作品，轉(zhuǎn)載此文章須附上出處及原文鏈接。

加關(guān)注，定時(shí)推送，互動(dòng)精彩多，若你有更好的見解，歡迎留言探討！

理:根據(jù)CSS3 transform 屬性，按比例縮放（scale(x,y)；$(window).width()是獲取當(dāng)前設(shè)備窗口的寬度.

js代碼：