本文目录
- 在JAVASCRIPT中怎样设置鼠标样式
- 百度空间是如何自定义鼠标指针形象的
- FireFox浏览器 鼠标样式的问题
- html怎样用css样式添加鼠标指针样式
- 如何把自己的网页里面的鼠标指针换成自己喜欢的图案
- web前端鼠标放在div标签制成的盒子上如何实现图片一秒内由正方形变为圆形在变
在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=0var newleft=0if (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》 您可以在火狐官方网站下载火狐浏览器，在火狐社区了解更多内容。希望我的回答对您有所帮助，如有疑问，欢迎继续在本平台咨询。
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》 希望对你有帮助
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;}
