web鼠标样式（web前端鼠标放在div标签制成的盒子上如何实现图片一秒内由正方形变为圆形在变）

本文目录

• web前端鼠标放在div标签制成的盒子上如何实现图片一秒内由正方形变为圆形在变
• html怎样用css样式添加鼠标指针样式
• 如何把自己的网页里面的鼠标指针换成自己喜欢的图案
• 百度空间是如何自定义鼠标指针形象的
• 在JAVASCRIPT中怎样设置鼠标样式
• FireFox浏览器 鼠标样式的问题

web前端鼠标放在div标签制成的盒子上如何实现图片一秒内由正方形变为圆形在变

1、使用css来控制变化，即给图片添加css样式
2、在图片样式绑定:hover事件，控制图片在鼠标悬停时变化
//定义动画
@-webkit-keyframes imgChange
{
0%{border-radius:0%;}
50%{border-radius:50%;}
100%{border-radius:0%;}
}
img:hover{
-webkit-animation-name:imgChange;
-webkit-animation-duration:1s;
-webkit-animation-timing-function:linear;
}

html怎样用css样式添加鼠标指针样式

我们先来看第一种:用来改变鼠标指针形状。 有些时候我们并不需要文字,图片加链接,而且还想要加链接时的鼠标样式。这就用到了我们的css样式表来鼠标

如何把自己的网页里面的鼠标指针换成自己喜欢的图案

1、CSS定义，在Extensionsr/Cursor下拉框里有很多鼠标样式
《HTML》
《HEAD》
《TITLE》Table of all supported cursors《/TITLE》《STYLE》
BODY
{
background-color:white;
color:black;
font-family:verdana;
font-size:.8em
} H1
{
font-size:1.5em;
color:#3366CC;
font-family:tahoma;
}

H2
{
font-size:1.3em;
color:#3366CC;
font-family:tahoma;
}

TD
{
background-color:#e4e4e4;
color:black;
font-family:verdana;
font-size:.8em;
width:125px;
padding:5px;
}
A
{
border-top:1px solid #e4e4e4;
padding-top:10px;
width:600px;
color:#3366CC;
text-decoration:none;
}
A:visited
{
color:#3366CC;
text-decoration:none;
}
A:hover
{
color:#3366CC;
text-decoration:underline;
}

《/STYLE》
《/HEAD》《!--TOOLBAR_START--》
《!--TOOLBAR_EXEMPT--》
《!--TOOLBAR_END--》《BODY》《H1》Currently supported cursors《/H1》
《P》When you use the inline style designation 《STRONG》style="《EM》cursor:cursor《/EM》"《/STRONG》, the cursor displays the appropriate cursor for the cell that you move the pointer over.《/P》《B》Existing cursor styles《/B》
《BR》
《BR》
《TABLE CELLPADDING="2" CELLSPACING="2"》
《TR》
《TD STYLE="cursor:auto" 》auto《/TD》
《TD STYLE="cursor:crosshair" 》crosshair《/TD》
《TD STYLE="cursor:default" 》default《/TD》
《TD STYLE="cursor:move" 》move《/TD》
《/TR》
《TR》
《TD STYLE="cursor:hand" 》hand《/TD》
《TD STYLE="cursor:text" 》text《/TD》
《TD STYLE="cursor:wait" 》wait《/TD》
《TD STYLE="cursor:help" 》help《/TD》
《/TR》
《TD TITLE="This cursor style has been available in previous versions but has been updated for IE 6" 》*-resize《/TD》
《/TABLE》《H2》New cursors for IE 6《/H2》
《TABLE》
《TR》
《TD STYLE="cursor:pointer; "》pointer《/TD》
《TD STYLE="cursor:progress; "》progress《/TD》
《TD STYLE="cursor:not-allowed; "》not-allowed《/TD》
《TD STYLE="cursor:no-drop; "》no-drop《/TD》
《/TR》
《TR》
《TD STYLE="cursor:vertical-text; "》vertical-text《/TD》
《TD STYLE="cursor:all-scroll; "》all-scroll《/TD》
《TD STYLE="cursor:col-resize; "》col-resize《/TD》
《TD STYLE="cursor:row-resize; "》row-resize《/TD》
《/TR》
《/TABLE》《BR》
《B》Directional cursors《/B》
《BR》
《BR》
*-resize has been available in previous versions but has been updated for IE 6.
《BR》
《BR》《TABLE》
《TR》
《TD STYLE="cursor:n-resize; "》n-resize《/TD》
《TD STYLE="cursor:s-resize; "》s-resize《/TD》
《TD STYLE="cursor:ne-resize; "》ne-resize《/TD》
《TD STYLE="cursor:sw-resize; "》sw-resize《/TD》
《/TR》
《TR》
《TD STYLE="cursor:nw-resize; "》nw-resize《/TD》
《TD STYLE="cursor:se-resize; "》se-resize《/TD》
《TD STYLE="cursor:e-resize; "》e-resize《/TD》
《TD STYLE="cursor:w-resize; "》w-resize《/TD》
《/TR》
《/TABLE》
《BR》《B》Custom cursors《/B》
《BR》
《BR》《TABLE CELLPADDING="2" CELLSPACING="2"》
《TR》
《TD STYLE="cursor:url(elogo.cur); "》url(custom.cur)《/TD》
《TD STYLE="cursor:url(banana.ani); "》url(custom.ani)《/TD》
《/TR》
《/TABLE》《P》《/P》《/BODY》
《/HTML》
您可以先修改部分代码再运行
2、随鼠标指针移动的时间
html》
《head》
《title》网页特效|Linkweb.cn/Js|---跟随鼠标的日期时间表盘《/title》
《/head》《BODY》
《!--将以下代码加入HTML的《Body》《/Body》之间--》
《SCRIPT language=JavaScript》
《!--
dCol="0000FF"
fCol="FF0000"
sCol="00FF00"
mCol="000000"
hCol="000000"
ClockHeight=40;
ClockWidth=40;
ClockFromMouseY=0;
ClockFromMouseX=100;

d=new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六");
m=new Array("1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月");
date=new Date();
day=date.getDate();
year=date.getYear();
if (year 《 2000) year=year+1900;
TodaysDate="年 "+m+" "+year;
D=TodaysDate.split(’’);
H=’...’;
H=H.split(’’);
M=’....’;
M=M.split(’’);
S=’.....’;
S=S.split(’’);
Face=’1 2 3 4 5 6 7 8 9 10 11 12’;
font=’Arial’;
size=1;
speed=0.6;
ns=(document.layers);
ie=(document.all);
Face=Face.split(’ ’);
n=Face.length;
a=size*10;
ymouse=0;
xmouse=0;
scrll=0;
props="《font face="+font+" size="+size+" color="+fCol+"》";
props2="《font face="+font+" size="+size+" color="+dCol+"》";
Split=360/n;
Dsplit=360/D.length;
HandHeight=ClockHeight/4.5
HandWidth=ClockWidth/4.5
HandY=-7;
HandX=-2.5;
scrll=0;
step=0.06;
currStep=0;
y=new Array();x=new Array();Y=new Array();X=new Array();
for (i=0; i 《 n; i++){y=0}
Dy=new Array();Dx=new Array();DY=new Array();DX=new Array();
for (i=0; i 《 D.length; i++){Dy=0}
if (ns){
for (i=0; i 《 D.length; i++)
document.write(’《layer name="nsDate’+i+’" top=0 left=0 height=’+a+’ width=’+a+’》《center》’+props2+D+’《/font》《/center》《/layer》’);
for (i=0; i 《 n; i++)
document.write(’《layer name="nsFace’+i+’" top=0 left=0 height=’+a+’ width=’+a+’》《center》’+props+Face+’《/font》《/center》《/layer》’);
for (i=0; i 《 S.length; i++)
document.write(’《layer name=nsSeconds’+i+’ top=0 left=0 width=15 height=15》《font face=Arial size=3 color=’+sCol+’》《center》《b》’+S+’《/b》《/center》《/font》《/layer》’);
for (i=0; i 《 M.length; i++)
document.write(’《layer name=nsMinutes’+i+’ top=0 left=0 width=15 height=15》《font face=Arial size=3 color=’+mCol+’》《center》《b》’+M+’《/b》《/center》《/font》《/layer》’);
for (i=0; i 《 H.length; i++)
document.write(’《layer name=nsHours’+i+’ top=0 left=0 width=15 height=15》《font face=Arial size=3 color=’+hCol+’》《center》《b》’+H+’《/b》《/center》《/font》《/layer》’);
}
if (ie){
document.write(’《div id="Od" style="position:absolute;top:0px;left:0px"》《div style="position:relative"》’);
for (i=0; i 《 D.length; i++)
document.write(’《div id="ieDate" style="position:absolute;top:0px;left:0;height:’+a+’;width:’+a+’;text-align:center"》’+props2+D+’《/font》《/div》’);
document.write(’《/div》《/div》’);
document.write(’《div id="Of" style="position:absolute;top:0px;left:0px"》《div style="position:relative"》’);
for (i=0; i 《 n; i++)
document.write(’《div id="ieFace" style="position:absolute;top:0px;left:0;height:’+a+’;width:’+a+’;text-align:center"》’+props+Face+’《/font》《/div》’);
document.write(’《/div》《/div》’);
document.write(’《div id="Oh" style="position:absolute;top:0px;left:0px"》《div style="position:relative"》’);
for (i=0; i 《 H.length; i++)
document.write(’《div id="ieHours" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:’+hCol+’;text-align:center;font-weight:bold"》’+H+’《/div》’);
document.write(’《/div》《/div》’);
document.write(’《div id="Om" style="position:absolute;top:0px;left:0px"》《div style="position:relative"》’);
for (i=0; i 《 M.length; i++)
document.write(’《div id="ieMinutes" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:’+mCol+’;text-align:center;font-weight:bold"》’+M+’《/div》’);
document.write(’《/div》《/div》’)
document.write(’《div id="Os" style="position:absolute;top:0px;left:0px"》《div style="position:relative"》’);
for (i=0; i 《 S.length; i++)
document.write(’《div id="ieSeconds" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:’+sCol+’;text-align:center;font-weight:bold"》’+S+’《/div》’);
document.write(’《/div》《/div》’)
}
(ns)?window.captureEvents(Event.MOUSEMOVE):0;
function Mouse(evnt){
ymouse = (ns)?evnt.pageY+ClockFromMouseY-(window.pageYOffset):event.y+ClockFromMouseY;
xmouse = (ns)?evnt.pageX+ClockFromMouseX:event.x+ClockFromMouseX;
}
(ns)?window.onMouseMove=Mouse:document.onmousemove=Mouse;
function ClockAndAssign(){
time = new Date ();
secs = time.getSeconds();
sec = -1.57 + Math.PI * secs/30;
mins = time.getMinutes();
min = -1.57 + Math.PI * mins/30;
hr = time.getHours();
hrs = -1.575 + Math.PI * hr/6+Math.PI*parseInt(time.getMinutes())/360;
if (ie){
Od.style.top=window.document.body.scrollTop;
Of.style.top=window.document.body.scrollTop;
Oh.style.top=window.document.body.scrollTop;
Om.style.top=window.document.body.scrollTop;
Os.style.top=window.document.body.scrollTop;
}
for (i=0; i 《 n; i++){
var F=(ns)?document.layers.style;
F.top=y + ClockHeight*Math.sin(-1.0471 + i*Split*Math.PI/180)+scrll;
F.left=x + ClockWidth*Math.cos(-1.0471 + i*Split*Math.PI/180);
}
for (i=0; i 《 H.length; i++){
var HL=(ns)?document.layers.style;
HL.top=y+HandY+(i*HandHeight)*Math.sin(hrs)+scrll;
HL.left=x+HandX+(i*HandWidth)*Math.cos(hrs);
}
for (i=0; i 《 M.length; i++){
var ML=(ns)?document.layers.style;
ML.top=y+HandY+(i*HandHeight)*Math.sin(min)+scrll;
ML.left=x+HandX+(i*HandWidth)*Math.cos(min);
}
for (i=0; i 《 S.length; i++){
var SL=(ns)?document.layers.style;
SL.top=y+HandY+(i*HandHeight)*Math.sin(sec)+scrll;
SL.left=x+HandX+(i*HandWidth)*Math.cos(sec);
}
for (i=0; i 《 D.length; i++){
var DL=(ns)?document.layers.style;
DL.top=Dy + ClockHeight*1.5*Math.sin(currStep+i*Dsplit*Math.PI/180)+scrll;
DL.left=Dx + ClockWidth*1.5*Math.cos(currStep+i*Dsplit*Math.PI/180);
}
currStep-=step;
}
function Delay(){
scrll=(ns)?window.pageYOffset:0;
Dy)*speed);
Dx)*speed);
for (i=1; i 《 D.length; i++){
Dy)*speed);
Dx)*speed);
}
y)*speed);
x)*speed);
for (i=1; i 《 n; i++){
y)*speed);
x)*speed);
}
ClockAndAssign();
setTimeout(’Delay()’,40);
}
if (ns||ie)window.onload=Delay;
//--》
《/SCRIPT》
《/body》《/html》
希望对你有帮助

百度空间是如何自定义鼠标指针形象的

/*定义默认鼠标样式*/
***隐藏网址***
/*定义停留在超级链接时鼠标样式*/
***隐藏网址***
/*定义输入框鼠标样式*/
***隐藏网址***
/*定义提交按钮鼠标样式*/
***隐藏网址***
注意把（’ ’）里的动画光标地址更换成你自己喜欢的式样。

在JAVASCRIPT中怎样设置鼠标样式

《script》
//获取一个对象
function getByid(id) {
if (document.getElementById) {
return document.getElementById(id);
} else if (document.all) {
return document.all;
} else if (document.layers) {
return document.layers;
} else {
return null;
}
}
//运行框操作
function creatID(DivID){
var objs=getByid(DivID).getElementsByTagName(’textarea’);
var inps=getByid(DivID).getElementsByTagName(’input’);
var buts=getByid(DivID).getElementsByTagName(’button’);
var labs=getByid(DivID).getElementsByTagName(’label’);
for (i=0; i《objs.length; i++) {
objs.id="runcode"+i;
inps.id=i
buts.id=i
labs.id=i
}
}
function runCode(obj){ //定义一个运行代码的函数，
var code=getByid("runcode"+obj).value;//即要运行的代码。
var newwin=window.open(’’,’’,’’); //打开一个窗口并赋给变量newwin。
newwin.opener = null // 防止代码对论谈页面修改
newwin.document.write(code); //向这个打开的窗口中写入代码code，这样就实现了运行代码功能。
newwin.document.close();
}
//复制代码
function doCopy(obj) {
if (document.all){
textRange = getByid("runcode"+obj).createTextRange();
textRange.execCommand("Copy");
alert("代码已经复制到剪切板");
}else{
alert("此功能只能在IE上有效\n\n请在文本域中用Ctrl+A选择再复制")
}
}
//另存代码
function saveCode(obj) {
var winname = window.open(’’,’’,’width=0,height=0,top=200,left=200px’);
winname.document.open(’text/html’, ’replace’);
winname.document.write(obj.value);
winname.document.execCommand(’saveas’,’’,’CSS动态滑动菜单.html’);
winname.close();
}
《/script》
《textarea id="runcode0" cols="72" rows="9"》　《html》
《head》
***隐藏网址***
《title》中国设计秀cnwebshow.com---跟随鼠标的图片《/title》
《script LANGUAGE="JavaScript"》
var newtop=0
var newleft=0
if (navigator.appName == "Netscape") {
layerStyleRef="layer.";
layerRef="document.layers";
styleSwitch="";
}
else
{
layerStyleRef="layer.style.";
layerRef="document.all";
styleSwitch=".style";
}
function doMouseMove() {
layerName = ’iit’
eval(’var curElement=’+layerRef+’’)
eval(layerRef+’’+styleSwitch+’.visibility="hidden"’)
eval(’curElement’+styleSwitch+’.visibility="visible"’)
eval(’newleft=document.body.clientWidth-curElement’+styleSwitch+’.pixelWidth’)
eval(’newtop=document.body.clientHeight-curElement’+styleSwitch+’.pixelHeight’)
eval(’height=curElement’+styleSwitch+’.height’)
eval(’width=curElement’+styleSwitch+’.width’)
width=parseInt(width)
height=parseInt(height)
if (event.clientX 》 (document.body.clientWidth - 5 - width))
{
newleft=document.body.clientWidth + document.body.scrollLeft - 5 - width
}
else
{
newleft=document.body.scrollLeft + event.clientX
}
eval(’curElement’+styleSwitch+’.pixelLeft=newleft’)
if (event.clientY 》 (document.body.clientHeight - 5 - height))
{
newtop=document.body.clientHeight + document.body.scrollTop - 5 - height
}
else
{
newtop=document.body.scrollTop + event.clientY
}
eval(’curElement’+styleSwitch+’.pixelTop=newtop’)
}
document.onmousemove = doMouseMove;
《/script》
《/head》
《body》
《!-- 以下代码是设定此页的鼠标样式代码 --》
《script language="javascript"》
if (navigator.appName == "Netscape") {
}
else
{
document.write(’《div ID=OuterDiv》’)
document.write(’《img ID=iit src="images/flag.gif" STYLE="position:absolute;TOP:5pt;LEFT:5pt;Z-INDEX:10;visibility:hidden;"》’)
document.write(’《/div》’)
}
《/script》

FireFox浏览器 鼠标样式的问题

　　您好，感谢您对火狐的支持
　　您写的这个属性不兼容火狐，需要单独设置一个兼容属性；
《html》
《body》
《div style="cursor: hand;"》
显示手形鼠标指针，IE6 only
《/div》
《div style="cursor: pointer;"》
显示手形鼠标指针，Firefox IE6兼容
《/div》
《/body》
《/html》
　　您可以在火狐官方网站下载火狐浏览器，在火狐社区了解更多内容。希望我的回答对您有所帮助，如有疑问，欢迎继续在本平台咨询。