用css3的cursor:zoom-in/zoom-out实现微博看图片放大镜效果

1.前言

css3的出现解决了很多让人头疼的问题，至少我想很多童鞋都这样认为。css3的cursor属性大家用的应该是非常的多的，我想用的比较多的像cursor:pointer;cursor:help;cursor:text;等等。很少人用到cursor:zoom-in/zoom-out;今天就来讲一下这两个属性值的用法。

2.简介

zoom-in/zoom-out 就是让元素的鼠标形状变成“放大镜”/“放小镜”的效果；如下图：



有了这个属性，我们就不用自己制作一个.cur的放大镜文件和.cur的放小镜文件了，直接用该属性就可以代替了。不过此属性IE11（包括IE11）不支持，其他游览器倒是都支持。如果你的项目要求兼容性非常高，那还得搞两个.cur的文件了

具体css样式写法如下：

.zoom-in{
cursor: -moz-zoom-in;
cursor: -webkit-zoom-in;
cursor: zoom-in;
cursor: url(../images/big.cur);
}
.zoom-out{
cursor: -moz-zoom-out;
cursor: -webkit-zoom-out;
cursor: zoom-out;
cursor: url(../images/small.cur);
}

展示效果可以参照图片放大展示

3.延伸

与这个属性值差不多的另一个cursor：grab/grabbing.这个是让元素的鼠标形状变成手状，张大大说过，俗称“咸猪手”和“抓奶手”.(不是我说的);

这个主要用在实现拖拽和移动内容这种效果的时候；有了这个属性，就比较方便了

图片效果如下：



css代码如下（如果要做浏览器兼容，还是那样，得加个.cur文件了。）：

.grab { /* 抓 */
cursor: -webkit-grab;
cursor: -moz-grab;
cursor: grab;
cursor: url(../images/grab.cur);
}
.grabbing { /* 抓住拖动 */
cursor: -webkit-grabbing;
cursor: -moz-grabbing;
cursor: grabbing;
cursor: url(../images/grabbing.cur);
}

4.总结

css3有很多好的属性，用起来方便的不要不要的。而且效果还挺高大上的。所以大家要多看看css3.学习无止境！大家要共勉！