用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.学习无止境！你们要共勉！