用css3的cursor:zoom-in/zoom-out實現微博看圖片放大鏡效果

本文轉載於:猿2048網站用css3的cursor:zoom-in/zoom-out實現微博看圖片放大鏡效果

1.前言 
CSS3的出現解決了不少讓人頭疼的問題，至少我想不少童鞋都這樣認爲。css3的cursor屬性你們用的應該是很是的多的，我想用的比較多的像cursor:pointer;cursor:help;cursor:text;等等。不多人用到cursor:zoom-in/zoom-out;今天就來說一下這兩個屬性值的用法。 
2.簡介 

       cursor的定義和用法

　　cursor屬性規定要顯示的光標和類型（形狀）。定義了鼠標指針放在一個元素邊界範圍內時所用的光標形狀。默認值是auto;大部分經常使用的值有如下：

crosshair	十字準心
pointer;hand（IE5只認識hand）	手形狀
wait	等待（沙漏）
help	幫助
no-drop	沒法釋放
text	文本/編輯
move	可移動對象
n-resize	向上改變大小
s-resize	向下改變大小
e-resize	向右改變大小
w-resize	向左改變大小
ne-resize	向上右改變大小
nw-resize	向上基改變大小
sw-resize	向下左改變大小
se-resize	向下右改變大小
auto	自動
not-allowed	禁止
progress	處理中
default	默認（一般爲一個箭頭）
url('#') 文件格式必須爲.cur或.ani	用戶自定義

 

部分光標參考圖片以下：

　　

zoom-in/zoom-out 就是讓元素的鼠標形狀變成「放大鏡」/「放小鏡」的效果；以下圖： 

 

有了這個屬性，咱們就不用本身製做一個.cur的放大鏡文件和.cur的放小鏡文件了，直接用該屬性就能夠代替了。不過此屬性IE11（包括IE11）不支持，其餘遊覽器卻是都支持。若是你的項目要求兼容性很是高，那還得搞兩個.cur的文件了 
具體css樣式寫法以下：

 1 .zoom-in{
 2     cursor: -moz-zoom-in;
 3     cursor: -webkit-zoom-in;
 4     cursor: zoom-in;
 5     cursor: url(../images/big.cur);
 6 }
 7 .zoom-out{
 8     cursor: -moz-zoom-out;
 9     cursor: -webkit-zoom-out;
10     cursor: zoom-out;
11     cursor: url(../images/small.cur);
12 }

效果能夠點擊這裏查看 點擊圖片在頁面居中顯示

3.延伸 
與這個屬性值差很少的另外一個cursor：grab/grabbing.這個是讓元素的鼠標形狀變成手狀，張大大說過，俗稱「鹹豬手」和「抓奶手」.(不是我說的); 
這個主要用在實現拖拽和移動內容這種效果的時候；有了這個屬性，就比較方便了 
圖片效果以下： 

css代碼以下（若是要作瀏覽器兼容，仍是那樣，得加個.cur文件了）

 1 .grab { /* 抓 */
 2     cursor: -webkit-grab;
 3     cursor: -moz-grab;
 4     cursor: grab;
 5     cursor: url(../images/grab.cur);
 6 }
 7 .grabbing { /* 抓住拖動 */
 8     cursor: -webkit-grabbing;
 9     cursor: -moz-grabbing;
10     cursor: grabbing;
11     cursor: url(../images/grabbing.cur);
12 }

4.總結 
css3有不少好的屬性，用起來方便的不要不要的。並且效果還挺高大上的。因此你們要多看看css3.學習無止境！你們要共勉！