鼠标的光标可以显示成图片(ico格式或者cur等),光标在线制作网址为:http://app.baidu.com/widget?appid=134026。
html:
<div class="flowerbed">
<div id="bottle" class="cursor" title="点击开始洒水"></div>
</div>
css:
#bottle{
background:url("../images/flower.jpg");
height:330px;
width:750px;
border:1px solid #ccc;
margin:0 auto;
}
.bottle_bg_change{
background:url("../images/flower_change.jpg");
}
.cursor{
cursor:url("../images/bottle.cur"),auto;
}
.cursor_change{
cursor:url("../images/bottle_change.cur"),auto;
}
js:
$(document).ready(function(){
$("#bottle").click(function(){
$(this).removeClass("cursor").addClass("cursor_change");
function showtime(){
$("#bottle").css(‘background‘,‘url(./images/flower_change.jpg)‘);
}
var test = setTimeout(function(){
showtime();
},4000);
});
});
在IE下光标不会呈现成图片的效果,这时候需要使用服务器上光标图片的绝对路径。比如:
.cursor{
cursor:url("http://y2.ifengimg.com/a/2012_22/3cbe4913aa86225.cur"),auto;
}
这样就可以显示了。
如下图:
原文地址:http://blog.csdn.net/u012011360/article/details/45397309