用css3的cursor:zoom-in/zoom-out实现微博看图片…

2018-06-24 01:42:30来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

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.学习无止境!大家要共勉!

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:CSS3基础(4)——CSS3 渲染属性

下一篇:【干货】Html与CSS入门学习笔记9-11