웹페이지에 마우스 효과를 구현하는 방법(자세한 튜토리얼)
독자를 위한 10가지 클래식 웹 마우스 효과 코드를 정리하고 코드를 정리하고 설명했습니다. 필요한 친구들은 저장할 수 있습니다.
1. 마우스를 가리키면 나타나는 실용적인 특별 팁
<!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" />
<meta http-equiv="Content-Language" content="zh-CN" />
<title>css打造鼠标触发效果</title>
<style type="text/css">
<!--
body {
margin: 0;
padding: 0;
color: #000;
font-size: 12px;
line-height: 160%;
text-align: left;
height: 100%;
font-family: '宋体',Tahoma ,arial,verdana,sans-serif,'Lucida Grande','Lucida Sans Unicode';
}
*{ margin:0; padding:0;}
h2,h2 a:link,h2 a:hover,h2 a:visited{
font-size: 14px;
text-decoration: none;
color: #000000;
}
.kw_from {
padding:20px 0 0 0px;
margin: auto;
height: 300px;
overflow: hidden;
width: 650px;
}
.kw_from .sbtn{
float:left;
width:80px;
padding: 16px 0 0 0;
}
.kw_from .searchMore{
float:left;
width:80px;
padding: 4px;
}
#searchNav {
width:430px;
float: left;
}
#searchNav #conter1, #searchNav #conter3{
float:left;
width:250px;
}
#searchNav #conter2, #searchNav #conter4{
float:left;
width:180px;
}
#searchNav ul {
padding: 0;
margin: 0;
list-style: none;
}
#searchNav li {
float: left;
}
#searchNav li ul {
display: none;
top: 20px;
}
#searchNav li:hover ul, #searchNav li.over ul {
display: block;
float:left;
}
#searchNav ul li a{
float:left;
display:block;
font-size:12px;
padding:3px;
text-decoration: none;
color: #777;
}
#searchNav ul li a:hover{
background-color:#f4f4f4;
}
#searchNav #jobKw{
width:220px;
height:18px;
}
#searchNav #cityKw{
width:130px;
height:18px;
}
-->
</style>
<script type="text/javascript">
<!--//--><![CDATA[//>
<!--
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("searchNav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
//--><!]]>
</script>
</head>
<body>
<p class="kw_from">
<form action="/search.html" method="get" name="searchForm" id="searchForm" onsubmit="return check()">
<ul id="searchNav">
<li id="conter1"><h2>找什么</h2>
<input id="jobKw" name="jobKw" type="text" />
<ul id="conter3">
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >会计</a> </li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >网页设计</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >翻译</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >家教</a></li>
<li><span class="moreCity"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >更多>> </a></span></li>
</ul>
</li>
<li id="conter2"><h2>在那里</h2>
<input id="cityKw" name="cityKw" type="text" />
<ul id="conter4">
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >北京</a> </li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >上海</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >广州</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >深圳</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >南京</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >天津</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >杭州</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >成都</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >重庆</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >武汉</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >西安</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >沈阳</a></li>
<li><span class="moreCity"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >更多城市>></a></span></li>
</ul>
</li>
</ul>
<p class="sbtn">
<input name="submit" type="submit" class="btn4" style="margin:0px 15px 2px 0;" value="搜索工作" />
</p>
<p class="searchMore">
<a href="search_expert.html" rel="external nofollow" >高级搜索</a><br /><a href="search_sort.html" rel="external nofollow" >分类搜索</a> </p>
</form>
</p>
</body>
</html>2. 마우스를 따라다니는 유성
<html>
<head>
<title>网页特效---跟随鼠标的流星</title>
<meta content="text/html; charset=gb2312" http-equiv="Content-Type">
</head>
<body bgColor="#000000">
<script language="JavaScript">
<!--
Clrs=new Array('ff0000','00ff00','ffffff','ff00ff','ffa500','ffff00','00ff00','ffffff','ff00ff')
var speed=1;
var RunTime = 0;
var cntr=0;
var xcntr=100;
var Nslayers;
var pulse=25;
var onClrs;
var Xpos = 421;
var Ypos = 231;
var _y;
if (document.layers){
window.captureEvents(Event.MOUSEMOVE);
function xFollowMouse(evnt){
Xpos = evnt.pageX;
Ypos = evnt.pageY;
}
window.onMouseMove = xFollowMouse;
document.write('<layer name="a0" left=10 top=10 bgcolor="#ff0000" clip="0,0,2,2"></layer>'
+'<layer name="a1" left=10 top=10 bgcolor="#00ff00" clip="0,0,2,2"></layer>'
+'<layer name="a2" left=10 top=10 bgcolor="#ffffff" clip="0,0,2,2"></layer>'
+'<layer name="a3" left=10 top=10 bgcolor="#ffa500" clip="0,0,2,2"></layer>'
+'<layer name="a4" left=10 top=10 bgcolor="#ff00ff" clip="0,0,2,2"></layer>'
+'<layer name="a5" left=10 top=10 bgcolor="#8888ff" clip="0,0,2,2"></layer>'
+'<layer name="a6" left=10 top=10 bgcolor="#fff000" clip="0,0,2,2"></layer>');
}
else if (document.all){
function FollowMouse(){
Xpos = document.body.scrollLeft+event.x;
Ypos = document.body.scrollTop+event.y;
}
document.onmousemove = FollowMouse;
document.write('<p id="iep" style="position:absolute;top:0px;left:0px">'
+'<p id="c" style="position:relative">'
+'<p style="position:absolute;top:0px;left:0px;width:2px;height:2px;background:#ff0000;font-size:2px"></p>'
+'<p style="position:absolute;top:0px;left:0px;width:2px;height:2px;background:#00ff00;font-size:2px"></p>'
+'<p style="position:absolute;top:0px;left:0px;width:2px;height:2px;background:#ffffff;font-size:2px"></p>'
+'<p style="position:absolute;top:0px;left:0px;width:2px;height:2px;background:#ffa500;font-size:2px"></p>'
+'<p style="position:absolute;top:0px;left:0px;width:2px;height:2px;background:#ff00ff;font-size:2px"></p>'
+'<p style="position:absolute;top:0px;left:0px;width:2px;height:2px;background:#8888ff;font-size:2px"></p>'
+'<p style="position:absolute;top:0px;left:0px;width:2px;height:2px;background:#fff000;font-size:2px"></p>'
+'</p>'
+'</p>');
}
function sv2(){
if (document.layers){
for (i=0;i<7;i++)
{
Nslayers="a"+i;
document.layers[0].top=Ypos+cntr*Math.cos((RunTime+i*4.5)/5);
document.layers[0].left=Xpos+cntr*Math.sin((RunTime+i*4.5)/5);
var randCol=Math.round(Math.random()*8);
document.layers[0].bgColor=Clrs[randCol];
}
cntr+=1;
RunTime+=speed;
stp=setTimeout('sv2()',10);
if (cntr>=100)
{
cntr=100;
speed=2.5;
for (i=0;i<7;i++)
{
Nslayers="a"+i;
document.layers[Nslayers].top=Ypos+cntr*Math.cos((RunTime-100)*i/90);
document.layers[Nslayers].left=Xpos+cntr*Math.sin((RunTime-100)*i/90);
}
}
if (RunTime>182)
{
speed=0.5;
for (i=0;i<7;i++)
{
Nslayers="a"+i;
document.layers[Nslayers].top=Ypos+xcntr*Math.cos(((RunTime-182)+i*4.5)/5)*Math.cos((RunTime-182)/5);
document.layers[Nslayers].left=Xpos+xcntr*Math.sin(((RunTime-182)+i*4.5)/5);
}
}
}
else if (document.all){
for (i=0;i<iep.all.c.all.length;i++)
{
var randCol=Math.round(Math.random()*8);
iep.all.c.all[0].style.background=Clrs[randCol];
iep.all.c.all[0].style.top=Ypos+cntr*Math.cos((RunTime+i*4.5)/5);
iep.all.c.all[0].style.left=Xpos+cntr*Math.sin((RunTime+i*4.5)/5);
}
cntr+=1;
RunTime+=speed;
window.status=RunTime;
stp=setTimeout('sv2()',10);
if (cntr>=100)
{
cntr=100;
speed=2.5;
for (i=0;i<iep.all.c.all.length;i++)
{
iep.all.c.all[i].style.top=Ypos+cntr*Math.cos((RunTime-100)*i/90);
iep.all.c.all[i].style.left=Xpos+cntr*Math.sin((RunTime-100)*i/90);
}
}
if (RunTime>182)
{
speed=0.5;
for (i=0;i<iep.all.c.all.length;i++)
{
iep.all.c.all[i].style.top=Ypos+xcntr*Math.cos(((RunTime-182)+i*4.5)/5)*Math.cos((RunTime-182)/5);
iep.all.c.all[i].style.left=Xpos+xcntr*Math.sin(((RunTime-182)+i*4.5)/5);
}
}
}
if (RunTime>210)
{
xcntr-=10;
}
if (document.layers)
_y=-window.innerWidth-90;
else if (document.all)
_y=-document.body.clientWidth-90;
if (xcntr <= _y)
{
RunTime=0;
speed=1;
cntr=0;
xcntr=100;
}
}
sv2()
//-->
</script>
</body>
</html>3.
4 , 마우스 프롬프트 텍스트를 스크롤한 후<html>
<head>
<title>网页特效--很酷的跟随鼠标的三色彩带</title>
</head><body bgColor=#000000>
<!--将以下代码加入HTML的<Body></Body>之间-->
<script language="JavaScript">
<!--
var a_Colour='fff000';
var b_Colour='00ff00';
var c_Colour='ff00ff';
var Size=120;
var YDummy=new Array(),XDummy=new Array(),xpos=0,ypos=0,ThisStep=0;step=0.6;
if (document.layers){
window.captureEvents(Event.MOUSEMOVE);
function nsMouse(evnt){
xpos = window.pageYOffset+evnt.pageX+6;
ypos = window.pageYOffset+evnt.pageY+16;
}
window.onMouseMove = nsMouse;
}
else if (document.all)
{
function ieMouse(){
xpos = document.body.scrollLeft+event.x+6;
ypos = document.body.scrollTop+event.y+16;
}
document.onmousemove = ieMouse;
}
function swirl(){
for (i = 0; i < 3; i++)
{
YDummy[i]=ypos+Size*Math.sin((1*Math.sin((ThisStep)/10))+i*2)*Math.sin((ThisStep)/4);
XDummy[i]=xpos+Size*Math.cos((1*Math.sin((ThisStep)/10))+i*2)*Math.sin((ThisStep)/4);
}
ThisStep+=step;
setTimeout('swirl()',10);
}
var amount=10;
if (document.layers){
for (i = 0; i < amount; i++)
{
document.write('<layer name=nsa'+i+' top=0 left=0 width='+i/2+' height='+i/2+' bgcolor='+a_Colour+'></layer>');
document.write('<layer name=nsb'+i+' top=0 left=0 width='+i/2+' height='+i/2+' bgcolor='+b_Colour+'></layer>');
document.write('<layer name=nsc'+i+' top=0 left=0 width='+i/2+' height='+i/2+' bgcolor='+c_Colour+'></layer>');
}
}
else if (document.all){
document.write('<p id="Op" style="position:absolute;top:0px;left:0px">'
+'<p id="Ip" style="position:relative">');
for (i = 0; i < amount; i++)
{
document.write('<p id=x style="position:absolute;top:0px;left:0px;width:'+i/2+';height:'+i/2+';background:'+a_Colour+';font-size:'+i/2+'"></p>');
document.write('<p id=y style="position:absolute;top:0px;left:0px;width:'+i/2+';height:'+i/2+';background:'+b_Colour+';font-size:'+i/2+'"></p>');
document.write('<p id=z style="position:absolute;top:0px;left:0px;width:'+i/2+';height:'+i/2+';background:'+c_Colour+';font-size:'+i/2+'"></p>');
}
document.write('</p></p>');
}
function prepos(){
var ntscp=document.layers;
var msie=document.all;
if (document.layers){
for (i = 0; i < amount; i++)
{
if (i < amount-1)
{
ntscp['nsa'+i].top=ntscp['nsa'+(i+1)].top;ntscp['nsa'+i].left=ntscp['nsa'+(i+1)].left;
ntscp['nsb'+i].top=ntscp['nsb'+(i+1)].top;ntscp['nsb'+i].left=ntscp['nsb'+(i+1)].left;
ntscp['nsc'+i].top=ntscp['nsc'+(i+1)].top;ntscp['nsc'+i].left=ntscp['nsc'+(i+1)].left;
}
else
{
ntscp['nsa'+i].top=YDummy[0];ntscp['nsa'+i].left=XDummy[0];
ntscp['nsb'+i].top=YDummy[1];ntscp['nsb'+i].left=XDummy[1];
ntscp['nsc'+i].top=YDummy[2];ntscp['nsc'+i].left=XDummy[2];
}
}
}
else if (document.all){
for (i = 0; i < amount; i++)
{
if (i < amount-1)
{
msie.x[i].style.top=msie.x[i+1].style.top;msie.x[i].style.left=msie.x[i+1].style.left;
msie.y[i].style.top=msie.y[i+1].style.top;msie.y[i].style.left=msie.y[i+1].style.left;
msie.z[i].style.top=msie.z[i+1].style.top;msie.z[i].style.left=msie.z[i+1].style.left;
}
else
{
msie.x[i].style.top=YDummy[0];msie.x[i].style.left=XDummy[0];
msie.y[i].style.top=YDummy[1];msie.y[i].style.left=XDummy[1];
msie.z[i].style.top=YDummy[2];msie.z[i].style.left=XDummy[2];
}
}
}
setTimeout("prepos()",10);
}
function Start(){
swirl(),prepos()
}
window.onload=Start;
// -->
</script>
</body></html>
<a href="http://www.网址.com" rel="external nofollow" _fcksavedurl="http://www.网址.com" target="_blank" onMouseOver="helpor_net_show(this,event,'网页鼠标特效')" onMouseOut="helpor_net_hide()">把鼠标放上来试试</a>
<p id="tooltip2" style="position:absolute;visibility:hidden;clip:rect(0 150 50 0);width:150px;background-color:seashell">
<layer name="nstip" width="1000px" bgColor="seashell"></layer>
</p>
<SCRIPT language="JavaScript">
<!--
if (!document.layers&&!document.all)
event="test"
function helpor_net_show(current,e,text){
if (document.all&&document.readyState=="complete"){
document.all.tooltip2.innerHTML='<marquee style="border:1px solid #3399ff">'+text+'</marquee>'
document.all.tooltip2.style.pixelLeft=event.clientX+document.body.scrollLeft+10
document.all.tooltip2.style.pixelTop=event.clientY+document.body.scrollTop+10
document.all.tooltip2.style.visibility="visible"
}
else if (document.layers){
document.tooltip2.document.nstip.document.write('<b>'+text+'</b>')
document.tooltip2.document.nstip.document.close()
document.tooltip2.document.nstip.left=0
currentscroll=setInterval("scrolltip()",100)
document.tooltip2.left=e.pageX+10
document.tooltip2.top=e.pageY+10
document.tooltip2.visibility="show"
}
}
function helpor_net_hide(){
if (document.all)
document.all.tooltip2.style.visibility="hidden"
else if (document.layers){
clearInterval(currentscroll)
document.tooltip2.visibility="hidden"
}
}
function scrolltip(){
if (document.tooltip2.document.nstip.left>=-document.tooltip2.document.nstip.document.width)
document.tooltip2.document.nstip.left-=5
else
document.tooltip2.document.nstip.left=150
}
//-->
</SCRIPT>
<html>
<head>
<title>围绕鼠标旋转的三叶空间旋浆</title>
<meta content="text/html; charset=gb2312" http-equiv="Content-Type">
</head>
<body bgColor="#000000">
<script
language="JavaScript">
<!--
//To add more stars simply add more colours in below array!!
colours=new Array('ff0000','00ff00','3366ff','ff00ff','ffa500','ffffff','fff000')
//Alter nothing below!!
amount=colours.length;
YgetDelay=0,XgetDelay=0,Ydelay=0,Xdelay=0,ns=(document.layers)?1:0,step=0.2,currStep=0,my=0,mx=0;
if (ns){
for (i=0; i < amount; i++)
document.write('<LAYER NAME="nsstars'+i+'" BGCOLOR='+colours[i]+' CLIP="0,0,2,2"></LAYER>');
}
else{
document.write('<p id="ie" style="position:absolute;top:0;left:0;"><p style="position:relative">');
for (i=0; i < amount; i++)
document.write('<span id="iestars" style="position:absolute;top:0;left:0;width:2px;height:2px;background:'+colours[i]+';font-size:2px"></span>');
document.write('</p></p>');
}
if (ns){
window.captureEvents(Event.MOUSEMOVE);
function nMouse(evnt){
my=evnt.pageY;mx=evnt.pageX
}
window.onMouseMove=nMouse;
}
else{
function iMouse(){
my=event.y;mx=event.x;
}
document.onmousemove=iMouse
}
function stars(){
if (!ns)ie.style.top=document.body.scrollTop;
for (i=0; i < amount; i++)
{
var layer=(document.layers)?document.layers["nsstars"+i]:iestars[i].style;
layer.top= Ydelay+100*Math.sin((5*Math.sin((currStep-15.99)/10))+i*70)*Math.sin((currStep)/10)*Math.cos((currStep+i*25)/10);
layer.left=Xdelay+180*Math.cos((5*Math.sin((currStep-15.99)/10))+i*70)*Math.sin((currStep)/10)*Math.cos((currStep+i*25)/10);
}
currStep+=step;
}
function delay(){
Ydelay = YgetDelay+=(my-YgetDelay)*1/20;
Xdelay = XgetDelay+=(mx-XgetDelay)*1/20;
stars();
setTimeout('delay()',10);
}
delay();
//-->
</script>
<script language="JavaScript">
<!-- hide
function goHist(a)
{
history.go(a);
}
//-->
</script>
</body>
</html>
<html>
<head>
<title>围绕鼠标的立体星环</title>
<meta content="text/html; charset=gb2312" http-equiv="Content-Type">
<script language="JavaScript">
<!--
ns=(document.layers)?1:0;
Clrs=new Array('ff0000','00ff00','ffffff','ff00ff','ffa500','ffff00','00ff00','ffffff','ff00ff')
var amount=8
var step=0.3;
var currStep=0;
var Ypos=0;
var Xpos=0;
if (ns){
for (i=0; i < amount; i++)
document.write('<LAYER NAME="n'+i+'" LEFT=0 TOP=0 BGCOLOR=#FFFFFF CLIP="0,0,2,2"></LAYER>');
window.captureEvents(Event.MOUSEMOVE);
function nMouse(evnt){
Ypos = evnt.pageY;
Xpos = evnt.pageX;
}
window.onMouseMove=nMouse;
}
else{
document.write('<p style="position:absolute;top:0px;left:0px">');
document.write('<p style="position:relative">');
for (i=0; i < amount; i++)
document.write('<p id="me" style="position:absolute;top:0px;left:0px;width:2px;height:2px;font-size:2px;background:#00aaff"></p>');
document.write('</p></p>');
function iMouse(){
Ypos=event.y+document.body.scrollTop;
Xpos=event.x+document.body.scrollLeft;
}
document.onmousemove = iMouse;
}
function Comet(){
for (i=0; i < amount; i++){
var randCol=Math.floor(Math.random()*Clrs.length);
var layer=(document.layers)?document.layers['n'+i]:me[i].style;
layer.top =Ypos+60*Math.sin((currStep + i*3.1)/4)*Math.cos(currStep/10);
layer.left=Xpos+60*Math.cos((currStep + i*3.1)/4);
if (ns) layer.bgColor=Clrs[randCol];else layer.background=Clrs[randCol];
}
currStep+=step;
setTimeout("Comet()",10);
}
window.onload=Comet;
// -->
</script>
</head>
<body bgcolor="#000000">
</body>
</html>
<html>
<head>
<title>围绕鼠标的立体旋转文字</title>
<meta content="text/html; charset=gb2312" http-equiv="Content-Type">
<meta content="Microsoft FrontPage 5.0" name="GENERATOR">
</head>
<body>
<script LANGUAGE="JavaScript">
<!-- Begin
if (document.all) {
yourLogo = "网页制作大宝库"; //Not less than 2 letters!
logoFont = "Arial";
logoColor = "ff0000";
//Nothing needs altering below!
yourLogo = yourLogo.split('');
L = yourLogo.length;
TrigSplit = 360 / L;
Sz = new Array()
logoWidth = 100;
logoHeight = -30;
ypos = 0;
xpos = 0;
step = 0.09;
currStep = 0;
document.write('<p id="outer" style="position:absolute;top:0px;left:0px"><p style="position:relative">');
for (i = 0; i < L; i++) {
document.write('<p id="ie" style="position:absolute;top:0px;left:0px;'
+'width:10px;height:10px;font-family:'+logoFont+';font-size:12px;'
+'color:'+logoColor+';text-align:center">'+yourLogo[i]+'</p>');
}
document.write('</p></p>');
function Mouse() {
ypos = event.y;
xpos = event.x - 5;
}
document.onmousemove=Mouse;
function animateLogo() {
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;
}
// End -->
</script>
</body>
</html>
<html>
<head>
<title>跟随鼠标的日期时间表盘</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[date.getMonth()]+" "+day+"日 "+d[date.getDay()]+" "+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[i]=0;x[i]=0;Y[i]=0;X[i]=0}
Dy=new Array();Dx=new Array();DY=new Array();DX=new Array();
for (i=0; i < D.length; i++){Dy[i]=0;Dx[i]=0;DY[i]=0;DX[i]=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[i]+'</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[i]+'</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[i]+'</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[i]+'</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[i]+'</b></center></font></layer>');
}
if (ie){
document.write('<p id="Od" style="position:absolute;top:0px;left:0px"><p style="position:relative">');
for (i=0; i < D.length; i++)
document.write('<p id="ieDate" style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-align:center">'+props2+D[i]+'</font></p>');
document.write('</p></p>');
document.write('<p id="Of" style="position:absolute;top:0px;left:0px"><p style="position:relative">');
for (i=0; i < n; i++)
document.write('<p id="ieFace" style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-align:center">'+props+Face[i]+'</font></p>');
document.write('</p></p>');
document.write('<p id="Oh" style="position:absolute;top:0px;left:0px"><p style="position:relative">');
for (i=0; i < H.length; i++)
document.write('<p id="ieHours" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:'+hCol+';text-align:center;font-weight:bold">'+H[i]+'</p>');
document.write('</p></p>');
document.write('<p id="Om" style="position:absolute;top:0px;left:0px"><p style="position:relative">');
for (i=0; i < M.length; i++)
document.write('<p id="ieMinutes" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:'+mCol+';text-align:center;font-weight:bold">'+M[i]+'</p>');
document.write('</p></p>')
document.write('<p id="Os" style="position:absolute;top:0px;left:0px"><p style="position:relative">');
for (i=0; i < S.length; i++)
document.write('<p id="ieSeconds" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:'+sCol+';text-align:center;font-weight:bold">'+S[i]+'</p>');
document.write('</p></p>')
}
(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['nsFace'+i]:ieFace[i].style;
F.top=y[i] + ClockHeight*Math.sin(-1.0471 + i*Split*Math.PI/180)+scrll;
F.left=x[i] + ClockWidth*Math.cos(-1.0471 + i*Split*Math.PI/180);
}
for (i=0; i < H.length; i++){
var HL=(ns)?document.layers['nsHours'+i]:ieHours[i].style;
HL.top=y[i]+HandY+(i*HandHeight)*Math.sin(hrs)+scrll;
HL.left=x[i]+HandX+(i*HandWidth)*Math.cos(hrs);
}
for (i=0; i < M.length; i++){
var ML=(ns)?document.layers['nsMinutes'+i]:ieMinutes[i].style;
ML.top=y[i]+HandY+(i*HandHeight)*Math.sin(min)+scrll;
ML.left=x[i]+HandX+(i*HandWidth)*Math.cos(min);
}
for (i=0; i < S.length; i++){
var SL=(ns)?document.layers['nsSeconds'+i]:ieSeconds[i].style;
SL.top=y[i]+HandY+(i*HandHeight)*Math.sin(sec)+scrll;
SL.left=x[i]+HandX+(i*HandWidth)*Math.cos(sec);
}
for (i=0; i < D.length; i++){
var DL=(ns)?document.layers['nsDate'+i]:ieDate[i].style;
DL.top=Dy[i] + ClockHeight*1.5*Math.sin(currStep+i*Dsplit*Math.PI/180)+scrll;
DL.left=Dx[i] + ClockWidth*1.5*Math.cos(currStep+i*Dsplit*Math.PI/180);
}
currStep-=step;
}
function Delay(){
scrll=(ns)?window.pageYOffset:0;
Dy[0]=Math.round(DY[0]+=((ymouse)-DY[0])*speed);
Dx[0]=Math.round(DX[0]+=((xmouse)-DX[0])*speed);
for (i=1; i < D.length; i++){
Dy[i]=Math.round(DY[i]+=(Dy[i-1]-DY[i])*speed);
Dx[i]=Math.round(DX[i]+=(Dx[i-1]-DX[i])*speed);
}
y[0]=Math.round(Y[0]+=((ymouse)-Y[0])*speed);
x[0]=Math.round(X[0]+=((xmouse)-X[0])*speed);
for (i=1; i < n; i++){
y[i]=Math.round(Y[i]+=(y[i-1]-Y[i])*speed);
x[i]=Math.round(X[i]+=(x[i-1]-X[i])*speed);
}
ClockAndAssign();
setTimeout('Delay()',40);
}
if (ns||ie)window.onload=Delay;
//-->
</SCRIPT>
</body></html>
Element-ui와 결합된 vue-cli를 사용하여 Cropper.js 기반의 vue를 캡슐화하여 이미지 자르기 구성 요소 기능 구현 vue.js에서 로컬 미리보기, 자르기, 이미지 압축 및 업로드와 같은 일련의 기능을 구현합니다 위 내용은 웹페이지에 마우스 효과를 구현하는 방법(자세한 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>很有特色的荧光鼠标</title>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
</head>
<body id="mybody" style="filter:light(enabled=1);" bgcolor="#ffffff" text="#000000">
<p
id="Layer1" style="height: 32; left: 66; position: absolute; top: 41; width: 52">
<dd>
<p align="right">
<img src="images/light.gif" width="29" height="30"> </p>
</dd>
</p>
<p align="center"><b><font size="5">日落大道上的亚洲男孩 </font></b>
</p>
<table border="0" width="100%">
<tr>
<td width="82%"><font face="宋体" color="#FF00FF" style="font-size: 9pt">
</font><span style="font-size: 9pt">
人人爱谈张爱玲，尤其在论及服饰的时候。我不能免俗，也来附庸风雅一番。张爱玲纪念文集提到她逝世时的寓所，地址非常眼熟，后来才知道那公寓就在UC
LA正门附近。我和朋友好奇心起，课后前去朝圣一番，发现果真就是文集照片中的公寓，只不过屋前绿树茁壮更胜以往，和目前公寓的灰暗色调形成讽刺对比。耳闻张爱玲生前喜欢在UCLA附近不时搬迁，居无定所，像一头中枪后逃逸的狐狸，不停回头将沿路滴落的血迹舐去，以免猎人循迹跟上。 <br>
<br>
我以刚出道的猎人口吻说∶传言中张的住所很狼狈，她的衣物都随便搁在纸箱或超级市场收集来的塑胶袋里唷。 <br>
<br>
比我早来洛杉矶数年的同行朋友却说∶有何奇怪？我的衣物书籍也都塞在纸箱和塑胶袋里。搬家的时候反而方便啊。 <br>
<br>
朋友的粗廉生活让我很不以为然；当时我才初抵美国未久。 <br>
<br>
试想，任何华丽的衣裳只要一落进超级市场塑胶袋，看起来就像垃圾。把生活尽数装在塑胶袋里，岂不是将自己完全垃圾化？ <br>
<br>
但，在开始租屋、收集家具之后，我也开始世故驯化。留学生余钱无多，时常面临搬家压力。因此，我很少购衣；如要花钱，选择并不多。 <br>
<br>
从UCLA门口驱车南行，经过张爱玲故居，就来到了”ROSS“成衣批发店。ROSS陈列满坑满谷的名牌服饰，但因都是瑕疵品，比如说胸口的商标掉到肚脐位置的马球衫之类，张冠李戴，品质荒唐，所以售价低廉。许多经济能力较差的黑人和墨西哥人就来这里翻索便宜的CK、耐吉、DKNY；我加入他们肤色鲜艳的行列，结帐时将微疵的战利品装在塑胶袋里－而非百货公司的雅痞纸袋。说不定当年张爱玲也曾经蹋著脸徒步到这里找便宜货，混迹各色人种之间，没有人认出她何许人也。 <br>
<br>
虽然每次光顾ROSS都省了钱，而且享受与有色人种站在同一阵线的政治正确虚荣感，但每一次的经验都极其卑微沮丧。好莱坞电影中，彩色画报里，那种昂首阔步走进香蕉共和国的潇洒意象，在现实美国里却好遥远。还是认份光顾量贩店，站在平庸空间里排队，细细咀嚼外国人的贫穷滋味。 <br>
<br>
时装海报里，那些空灵的躯干之间，并没有留下什么空位给我者。 <br>
<br>
在日落大道两岸，巨幅时装广告海报一张张浮悬空中，像敦煌壁画，海报里俊男美女睥睨众生，佛似的自在庄严，日落大道一如当代加 <br>
<br>
州的丝路。AF，Abercrombie ＆ Fitch的白人男孩在阳光下微笑展示金身，好生慈悲。我猜美国当前年轻男性最风靡的服饰品牌之一大概就是AF，青春的傲慢包装成若无其事的天真潇洒。难怪校园里穿AF的大男孩比比皆是（怪的是，任何人穿了AF就会变得性感）；许多男同志也表示，看了AF男孩就会流口水（许多人在徵友广告中表明，想要找AF风格的男孩）。记得春天清晨我行过波士顿哈佛大学，赫然发现哈佛广场前最招摇的海报就来自AF，金发男孩的美丽笑脸占据了整个橱窗，诡异的意象。光是一张笑脸就比一家书店还要庞大。我望之却步了。 <br>
<br>
</span></td>
</tr>
</table>
<script language="vbscript">
dim red,gre,blu
dim x,y,z
red=255
gre=255
blu=0
z=100
sub window_onload()
call mybody.filters.light.addPoint(0,0,z,Red,Gre,Blu,100)
mybody.style.cursor="hand"
end sub
sub document_onmousemove()
x=window.event.x
y=window.event.y
call mybody.filters.Light.MoveLight(0, x, y, 100, 1)
end sub
</script>
<script language="javascript">
//这是使图层移动的函数
function move_layer()
{
Layer1.style.left=event.clientX+document.body.scrollLeft-50;
Layer1.style.top=event.clientY+document.body.scrollTop-20;
}
//这里的意思是，如果鼠标移动时就调用"move_layer"函数
document.onmousemove =move_layer;
</script>
</body>
</html>
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7756
15
1643
14
1399
52
1293
25
1234
29
프론트 엔드 열 용지 영수증에 대한 차량 코드 인쇄를 만나면 어떻게해야합니까?
Apr 04, 2025 pm 02:42 PM
프론트 엔드 개발시 프론트 엔드 열지대 티켓 인쇄를위한 자주 묻는 질문과 솔루션, 티켓 인쇄는 일반적인 요구 사항입니다. 그러나 많은 개발자들이 구현하고 있습니다 ...
Demystifying JavaScript : 그것이하는 일과 중요한 이유
Apr 09, 2025 am 12:07 AM
JavaScript는 현대 웹 개발의 초석이며 주요 기능에는 이벤트 중심 프로그래밍, 동적 컨텐츠 생성 및 비동기 프로그래밍이 포함됩니다. 1) 이벤트 중심 프로그래밍을 사용하면 사용자 작업에 따라 웹 페이지가 동적으로 변경 될 수 있습니다. 2) 동적 컨텐츠 생성을 사용하면 조건에 따라 페이지 컨텐츠를 조정할 수 있습니다. 3) 비동기 프로그래밍은 사용자 인터페이스가 차단되지 않도록합니다. JavaScript는 웹 상호 작용, 단일 페이지 응용 프로그램 및 서버 측 개발에 널리 사용되며 사용자 경험 및 크로스 플랫폼 개발의 유연성을 크게 향상시킵니다.
누가 더 많은 파이썬이나 자바 스크립트를 지불합니까?
Apr 04, 2025 am 12:09 AM
기술 및 산업 요구에 따라 Python 및 JavaScript 개발자에 대한 절대 급여는 없습니다. 1. 파이썬은 데이터 과학 및 기계 학습에서 더 많은 비용을 지불 할 수 있습니다. 2. JavaScript는 프론트 엔드 및 풀 스택 개발에 큰 수요가 있으며 급여도 상당합니다. 3. 영향 요인에는 경험, 지리적 위치, 회사 규모 및 특정 기술이 포함됩니다.
JavaScript를 사용하여 동일한 ID와 동일한 ID로 배열 요소를 하나의 객체로 병합하는 방법은 무엇입니까?
Apr 04, 2025 pm 05:09 PM
동일한 ID로 배열 요소를 JavaScript의 하나의 객체로 병합하는 방법은 무엇입니까? 데이터를 처리 할 때 종종 동일한 ID를 가질 필요가 있습니다 ...
JavaScript는 배우기가 어렵습니까?
Apr 03, 2025 am 12:20 AM
JavaScript를 배우는 것은 어렵지 않지만 어려운 일입니다. 1) 변수, 데이터 유형, 기능 등과 같은 기본 개념을 이해합니다. 2) 마스터 비동기 프로그래밍 및 이벤트 루프를 통해이를 구현하십시오. 3) DOM 운영을 사용하고 비동기 요청을 처리합니다. 4) 일반적인 실수를 피하고 디버깅 기술을 사용하십시오. 5) 성능을 최적화하고 모범 사례를 따르십시오.
Shiseido의 공식 웹 사이트와 같은 시차 스크롤 및 요소 애니메이션 효과를 달성하는 방법은 무엇입니까?
또는:
Shiseido의 공식 웹 사이트와 같은 페이지 스크롤과 함께 애니메이션 효과를 어떻게 달성 할 수 있습니까?
Apr 04, 2025 pm 05:36 PM
이 기사에서 시차 스크롤 및 요소 애니메이션 효과 실현에 대한 토론은 Shiseido 공식 웹 사이트 (https://www.shiseido.co.jp/sb/wonderland/)와 유사하게 달성하는 방법을 살펴볼 것입니다.
JavaScript의 진화 : 현재 동향과 미래 전망
Apr 10, 2025 am 09:33 AM
JavaScript의 최신 트렌드에는 Typescript의 Rise, 현대 프레임 워크 및 라이브러리의 인기 및 WebAssembly의 적용이 포함됩니다. 향후 전망은보다 강력한 유형 시스템, 서버 측 JavaScript 개발, 인공 지능 및 기계 학습의 확장, IoT 및 Edge 컴퓨팅의 잠재력을 포함합니다.
Console.log 출력 결과의 차이 : 두 통화가 다른 이유는 무엇입니까?
Apr 04, 2025 pm 05:12 PM
Console.log 출력의 차이의 근본 원인에 대한 심층적 인 논의. 이 기사에서는 Console.log 함수의 출력 결과의 차이점을 코드에서 분석하고 그에 따른 이유를 설명합니다. � ...
