腾讯微博图片上放大缩小光标挺好看的，嘿嘿，决定扒下来。与Fancy Zoom插件配合使用，增加用户体验。

1.把两个光标图片给弄下来，这个用chrome浏览器的查看元素或者火狐的fire_bug很好扒。看图

2.然后把两个光标图片上传到服务器上，我是上传到我主题下的images文件夹下。再是写css，在主题的style.css添加下面的代码

.cursor_zoom {cursor:url(images/cursor_zoom.cur), pointer;}

3.使用的时候只要在图片外层a标签里面加上

class="cursor_zoom"

这样放大光标就算是添加好了，接下来是图片放大后的缩写光标。

4.我这里是用的是Fancy Zoom插件，放大后的style是JS写进去的，这里就改改js。找到这个插件里面的FancyZoomHTML.js文件找到这个代码

inImage1.style.cursor = 'pointer';

改成这个

inImage1.style.cursor = 'url(wp-content/themes/foghorn/images/cursor_minify.cur), pointer';

这里注意，url括号里面的是光标图片的地址不要写错了

到这里算是完成了，鼠标移到上面那张图片上可以看效果

其实整个原理就是用了CSS的cursor属性，有兴趣的朋友可以自己研究下

本文为原创：转载请注明出处 madeby83.com