CSS各种鼠标样式介绍

让你自定义你的鼠标样子
服务器君一共花费了1116.644 ms进行了4次数据库查询,努力地为您提供了这个页面。
试试阅读模式?希望听取您的建议

大家否曾注意到有些网站的鼠标不是规则的斜向上箭头的形状,而是十字形,或者是向左的箭头,或者是个问号等等。当你想在网页的不同位置让鼠标显示不 同形状,以体现不同的功能区;当你想让你的网站体现与众不同的风格时,考虑一下在鼠标样式上下功夫吧。其实鼠标样式的用途还是极为广泛的,那么怎样才能实 现鼠标的不同样式呢? 这就要用到css层叠样式表中的cursor属性了。

cursor的属性:

  • pointer:手型
  • crosshair:十字型
  • text:平时鼠标移动到文本上的样式
  • wait:等待的效果
  • default:默认的那种效果
  • help:带问号的鼠标样式
  • e-resize:向右的箭头
  • ne-resize:向右上方的箭头
  • n-resize:向上的箭头
  • nw-resize:向左上方的箭头
  • w-resize:向左的箭关
  • sw-resize:向左下的箭头
  • s-resize:向下的箭头
  • se-resize:向右下方的箭头
  • auto:系统自动的效果

看到这,可能有的朋友要问了,一般来说手型不是用'hand'来表示吗,不仅通俗易懂而且一些网站是这样介绍的,可以访问以下地址“http://blog.csdn.net/overmind/archive/2005/02/04/280616.aspx”, 其实不然,“hand”在css中表示手型已经是很久以前的事了,而且是发生在ie6.0以下浏览器上,其他各大浏览器均不认同。鉴于ie5系列基本无人 问津,我们选择“手型”可以选择“pointer”属性,这样就兼容了市场上99%的浏览器。当然非要兼容ie6以下浏览器,我们可以选择这样的css

hack:{cursor:pointer;cursor:hand;}

讲到这,我想大家应该已经掌握了系统自带的cursor样式,接下来我将为大家重点讲解如何自定义cursor样式并兼容各大浏览器。打开google,输入关键字“鼠标样式”,大家会发现有很多网站都有制作绚丽的鼠标样式,并写好了代码。如网址:“http://5211.91.tc/sb.htm”,“http://www.blog286.com/sina/20070906/0Z610102007.html”,但可悲的是这些鼠标样式只能在ie下生存,在其他主流浏览器如:firefox,opera,sarifi都无法使用。

再比如以下 JavaScript 代码:

function evalPage(j) 
{ 
	var div = document.createElement('div'); 
	var html = ?'<input name="pg" type="submit" class="sbutton" value="' + j + '" onClick="viewpage(' + j + ')" />';
	div.innerHTML = html; 
	div.style.cursor = 'pointer'; 
	div.style.marginBottom = '7px';  
	div.style.display = 'inline';
	return div; 
} 

就是将鼠标移动到某个 div 上变成手形。

顺便给出 viewpage() 函数的代码

function viewpage(p)  
{   
    if(window.XMLHttpRequest)  
    {   
        var xmlReq = new XMLHttpRequest();   
    }   
    else if(window.ActiveXObject)   
    {   
        var xmlReq = new ActiveXObject('Microsoft.XMLHTTP');   
    }   
    var formData = "pg="+p;   
	
    xmlReq.onreadystatechange = function()  
    {   
        if(xmlReq.readyState == 4)  
        {   
            //alert(xmlReq.responseText);
			//document.getElementById('content2').innerHTML = xmlReq.responseText;   
			runXML(xmlReq.responseText);
        }   
    }   
    xmlReq.open("post", "genxml.php", true);   
    xmlReq.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");   
    xmlReq.send(formData);   
    return false;   
}  

本文地址:http://www.nowamagic.net/librarys/veda/detail/698,欢迎访问原出处。

不打个分吗?

转载随意,但请带上本文地址:

http://www.nowamagic.net/librarys/veda/detail/698

如果你认为这篇文章值得更多人阅读,欢迎使用下面的分享功能。
小提示:您可以按快捷键 Ctrl + D,或点此 加入收藏

阅读一百本计算机著作吧,少年

很多人觉得自己技术进步很慢,学习效率低,我觉得一个重要原因是看的书少了。多少是多呢?起码得看3、4、5、6米吧。给个具体的数量,那就100本书吧。很多人知识结构不好而且不系统,因为在特定领域有一个足够量的知识量+足够良好的知识结构,系统化以后就足以应对大量未曾遇到过的问题。

奉劝自学者:构建特定领域的知识结构体系的路径中再也没有比学习该专业的专业课程更好的了。如果我的知识结构体系足以囊括面试官的大部分甚至吞并他的知识结构体系的话,读到他言语中的一个词我们就已经知道他要表达什么,我们可以让他坐“上位”毕竟他是面试官,但是在知识结构体系以及心理上我们就居高临下。

所以,阅读一百本计算机著作吧,少年!

《Head First设计模式(中文版)》 弗里曼 (作者), 等 (作者)

《Head First设计模式》(中文版)共有14章,每章都介绍了几个设计模式,完整地涵盖了四人组版本全部23个设计模式。前言先介绍这本书的用法;第1章到第11章陆续介绍的设计模式为Strategy、Observer、Decorator、Abstract Factory、Factory Method、Singleton,Command、Adapter、Facade、TemplateMethod、Iterator、Composite、State、Proxy。最后三章比较特别。第12章介绍如何将两个以上的设计模式结合起来成为新的设计模式(例如著名的MVC模式),作者称其为复合设计模式(这是作者自创的名称,并非四人组的标准名词)。

更多计算机宝库...