文件管理 · 2022年8月17日

网站鼠标带文字|急求鼠标后跟随文字的几个网页特效代码

『壹』 网页中鼠标停留在图片上时会显示文字

<IMG id=logo alt=logo src="images/logo.png"> 这样当鼠标悬停在图片上面就会浮现alt=的内容,也就是logo

『贰』 网页怎么做鼠标移到图片就显示文字

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>鼠标移到图片上显示文字效果</title><style>.bot .sendList { margin-right:6px}.explore { width:936px; margin:20px auto 0; overflow:hidden; position:relative; font-size:0px;}.explore li { width:160px; height:150px; overflow:hidden; display:inline-block; position:relative;}.explore li {*display:inline;}.explore li .wqPic { width:160px; height:150px; overflow:hidden;}.explore .wqLink { display:block; width:160px; height:150px; color:#FFF; text-align:center; font-family:"微软雅黑"}.explore .wqItem .wqName { position:absolute; bottom:0; left:0; width:130px; height:40px; line-height:40px; font-size:16px; overflow:hidden; padding:0 10px;}.explore .wqItem .bg { background:#333; opacity:0.8; filter:alpha(opacity = 80); position:absolute; bottom:0; left:0; width:150px; height:40px;}.explore .wqLink:hover { cursor:pointer; text-decoration:none;}.explore .wqLink:hover .wqItem .bg { height:150px;}.explore .wqLink:hover .wqItem .wqName, .explore .detail { visibility:hidden;}.explore .wqLink:hover .detail { visibility:visible;}.explore .detail { background:#000; position:absolute; top:128px; left:0; width:160px; line-height:22px; height:22px; font-size:12px; filter:alpha(opacity = 65);}.explore .detail .wqName { font-size:16px; padding:0 10px; line-height:22px;}.explore .detail .info { margin-top:10px;}</style></head><body><div id="topWrap"> <div class="wqSquare"> <div class="explore"> <ul> <li> <a onmousedown="MI.Bos('wQBtnBigImgQun')" href="#" class="wqLink"> <div class="wqItem"> <img src="/img/2.jpg" class="wqPic" /> </div> <div class="detail"> <div class="wqName">Boaer.com</div> </div> </a> </li> </ul> </div> </div></div></body></html>

『叁』 急求鼠标后跟随文字的几个网页特效代码

你随便弄个网页以下代码插入<head>标签之内,保存预览,就可以看到很漂亮的文字环绕鼠标:<SCRIPTLANGUAGE="JavaScript">if(document.all){yourLogo="我想有个家一个温暖的家";//自己根据要求设置//logoFont="宋体";logoColor="#00ccff";yourLogo=yourLogo.split('');L=yourLogo.length;TrigSplit=360/L;Sz=newArray()logoWidth=100;logoHeight=-30;ypos=0;xpos=0;step=0.03;currStep=0;document.write('<divid="outer"style="position:absolute;top:0px;left:0px"><divstyle="position:relative">');for(i=0;i<L;i++){document.write('<divid="ie"style="position:absolute;top:0px;left:0px;'+'width:10px;height:10px;font-family:'+logoFont+';font-size:12px;'+'color:'+logoColor+';text-align:left">'+yourLogo[i]+'</div>');}document.write('</div></div>');functionMouse(){ypos=event.y;xpos=event.x-5;}document.onmousemove=Mouse;functionanimateLogo(){outer.style.pixelTop=document.body.scrollTop;for(i=0;i<L;i++){ie[i].style.top=ypos+logoHeight*Math.sin(currStep+i*TrigSplit*Math.PI/180);ie[i].style.left=xpos+logoWidth*Math.cos(currStep+i*TrigSplit*Math.PI/180);Sz[i]=ie[i].style.pixelTop-ypos;if(Sz[i]<5)Sz[i]=5;ie[i].style.fontSize=Sz[i]/1.7;}currStep-=step;setTimeout('animateLogo()',20);}window.onload=animateLogo;}</script>

『肆』 制作网页时,鼠标移动到某张图片后,会有文字显示,要怎样做,我使用的软件是DREAMWEAVER8

加入代码:<img src="//图片路径" title="//显示文字" />上述位置加入路径和文字即可。去掉//。

『伍』 网页制作中,怎么让字跟随鼠标还有……

第一个的答案(修改var message="★★★高二(6)班欢迎您★★★"里的内容为你想说的话就可以了,其他的不用动):<SCRIPT>var x,yvar step=18var flag=0var message="★★★高二(6)班欢迎您★★★"message=message.split("")var xpos=new Array()for (i=0;i<=message.length-1;i++) {xpos[i]=-50}var ypos=new Array()for (i=0;i<=message.length-1;i++) {ypos[i]=-200}function handlerMM(e){x = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientXy = (document.layers) ? e.pageY : document.body.scrollTop+event.clientYflag=1}function www_helpor_net() {if (flag==1 && document.all) {for (i=message.length-1; i>=1; i–) {xpos[i]=xpos[i-1]+stepypos[i]=ypos[i-1]}xpos[0]=x+stepypos[0]=yfor (i=0; i<message.length-1; i++) {var thisspan = eval("span"+(i)+".style")thisspan.posLeft=xpos[i]thisspan.posTop=ypos[i]}}else if (flag==1 && document.layers) {for (i=message.length-1; i>=1; i–) {xpos[i]=xpos[i-1]+stepypos[i]=ypos[i-1]}xpos[0]=x+stepypos[0]=yfor (i=0; i<message.length-1; i++) {var thisspan = eval("document.span"+i)thisspan.left=xpos[i]thisspan.top=ypos[i]}}var timer=setTimeout("www_helpor_net()",30)}for (i=0;i<=message.length-1;i++) {document.write("<span id='span"+i+"' class='spanstyle'>")document.write(message[i])document.write("</span>")}if (document.layers){document.captureEvents(Event.MOUSEMOVE);}document.onmousemove = handlerMM;www_helpor_net();// –></SCRIPT>第二个问题你说的不清楚

『陆』 这个网站鼠标移动到文字上会出现的效果怎么做的

原来的话只能用js、jquery实现,自从有了css3之后这些效果就变得简单多了,html5、css3让网页有了无限可能

非常简单的 用的是 :hover 伪类属性 和 css3的transition属性

下面是我写的简单示例,只有在ie9以上,firefox、chrome、safari的高版本浏览器才能正常显示

<!doctypehtml><htmllang="en"><head> <metacharset="UTF-8"> <title>css3hover渐变</title> <style> a.css3Test{ color:blue; -moz-transition:background1s,color1s; -webkit-transition:background1s,color1s; -o-transition:background1s,color1s; transition:background1s,color1s; } .css3Test:hover{ color:red; background:#ccc; } </style></head><body> <ahref="#"class="css3Test">鼠标放上去会渐变出背景</a> </body></html>

『柒』 怎样制作网页中的字跟着鼠标走呀

*让字跟着鼠标走源代码:(把下面的代码插入到body区域中)<scriptlanguage="JavaScript"><!–/******Thingsyoucanchange*****/msg="梦幻岛";msgSize=4;//1-7FoNt='Arial';CoLoR='#CC99FF';speed=2;/******Thingsyoushouldn'tchange*****/ns=(document.layers)?1:0;msg=msg.split(''),amount=msg.length,Y=0,X=0,ypos=0,xpos=0,ybase=newArray(),xbase=newArray();angle=newArray(),divTop=newArray(),divLeft=newArray();DocHeight=(document.layers)?window.innerHeight:window.document.body.offsetHeight;DocWidth=(document.layers)?window.innerWidth:window.document.body.offsetWidth;//initiallayerplacement!for(i=0;i<amount;i++){divTop[i]=Math.round(Math.random()*DocHeight);divLeft[i]=Math.round(Math.random()*DocWidth);}if(ns){for(i=0;i<amount;i++){document.write('<layername=nsd'+i+'top=0left=0width='+msgSize+'height='+msgSize+'><fontface='+FoNt+'size='+msgSize+'color='+CoLoR+'>'+msg[i]+'</font></layer>');}window.captureEvents(Event.MOUSEMOVE);functionnsMouse(evnt){ypos=evnt.pageY-20;xpos=evnt.pageX-10;}window.onMouseMove=nsMouse;}else{document.write('<divid="hldr"style="position:absolute;top:0px;left:0px">')document.write('<divstyle="position:relative">')for(i=0;i<amount;i++){document.write('<divid=iedstyle="position:absolute;top:0px;left:0px;width:'+msgSize+';height:'+msgSize+'"><fontface='+FoNt+'size='+msgSize+'color='+CoLoR+'>'+msg[i]+'</font></div>')}document.write('</div></div>')functionieMouse(){ypos=event.y-20;xpos=event.x-10;}document.onmousemove=ieMouse;}functionGoToMouse(){varDocHeight=(document.layers)?window.innerHeight:window.document.body.offsetHeight;varDocWidth=(document.layers)?window.innerWidth:window.document.body.offsetWidth;variscrll=(document.all)?document.body.scrollTop:0;varnscrll=(document.layers)?window.pageYOffset:0;if(!ns)hldr.style.top=iscrll;for(i=0;i<amount;i++){Y=ypos-divTop[i];X=xpos-divLeft[i];angle[i]=Math.round(Math.atan2(Y,X)*180/Math.PI);if(angle[i]<0)angle[i]+=360;ybase[i]=Math.round(Math.random()*DocHeight);xbase[i]=Math.round(Math.random()*DocWidth);rep=Math.round(Math.random()*3);extra=Math.round(Math.random()*200)if(rep==3)xbase[i]=-extra;if(rep==2)xbase[i]=DocWidth+extra;if(rep==1)ybase[i]=-extra;if(rep==0)ybase[i]=DocHeight;y=Math.round(speed*Math.sin(angle[i]*Math.PI/180));x=Math.round(speed*Math.cos(angle[i]*Math.PI/180));divTop[i]+=y;divLeft[i]+=x;if((divLeft[i]>xpos-speed)&&(divLeft[i]<xpos+speed/1.5)&&(divTop[i]>=ypos-speed/1.5)&&(divTop[i]<=ypos+speed/1.5)){divTop[i]=ybase[i]+nscrll;divLeft[i]=xbase[i]}varlayer=(document.layers)?document.layers['nsd'+i]:ied[i].style;layer.top=divTop[i];layer.left=divLeft[i];}S=setTimeout('GoToMouse()',10);}window.onload=GoToMouse;//–></script>

『捌』 网页制做:如何在页面中加入鼠标文字

<style type="text/css">.spanstyle {COLOR: #00cccc; FONT-FAMILY: 宋体; FONT-SIZE: 10pt; POSITION: absolute; TOP: -50px; VISIBILITY: visible}</style><script>var x,yvar step=18var flag=0var message="★网页特效世界欢迎你的光临!"message=message.split("")var xpos=new Array()for (i=0;i<=message.length-1;i++) {xpos[i]=-50}var ypos=new Array()for (i=0;i<=message.length-1;i++) {ypos[i]=-200}function handlerMM(e){x = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientXy = (document.layers) ? e.pageY : document.body.scrollTop+event.clientYflag=1}function www_helpor_net() {if (flag==1 && document.all) {for (i=message.length-1; i>=1; i–) {xpos[i]=xpos[i-1]+stepypos[i]=ypos[i-1]}xpos[0]=x+stepypos[0]=yfor (i=0; i<message.length-1; i++) {var thisspan = eval("span"+(i)+".style")thisspan.posLeft=xpos[i]thisspan.posTop=ypos[i]}}else if (flag==1 && document.layers) {for (i=message.length-1; i>=1; i–) {xpos[i]=xpos[i-1]+stepypos[i]=ypos[i-1]}xpos[0]=x+stepypos[0]=yfor (i=0; i<message.length-1; i++) {var thisspan = eval("document.span"+i)thisspan.left=xpos[i]thisspan.top=ypos[i]}}var timer=setTimeout("www_helpor_net()",30)}for (i=0;i<=message.length-1;i++) {document.write("<span id='span"+i+"' class='spanstyle'>")document.write(message[i])document.write("</span>")}if (document.layers){document.captureEvents(Event.MOUSEMOVE);}document.onmousemove = handlerMM;www_helpor_net();// –></script>

『玖』 如何在网页中实现鼠标经过带有超链接的文字时显示二维码

文字不出现下划线的CSS代码是text-decoration:none;将其加在超链接的四种状态下即可。但要注意四中状态的书写顺序必须如下a:link{text-decoration:none}/*超链接状态*/a:visited{text-decoration:none}/*超链接被点击过的状态*/a:hover{text-decoration:none}/*鼠标移至超链接上方的状态*/a:active{text-decoration:none}/*鼠标点击超链接时的状态*/希望对你有用

『拾』 在网页上,鼠标放到文字或图片上,这种特殊的提示,是怎么实现的

呵呵 网页制作中的特式,将其目标设置为鼠标经过时出现什么或是变成什么就可以了 PS 都可以做到的