Maison >interface Web >js tutoriel >Comment implémenter des effets de souris sur des pages Web (tutoriel détaillé)
Comment implémenter des effets de souris sur des pages Web (tutoriel détaillé)
- 亚连original
- 2018-06-12 17:35:464776parcourir
J'ai compilé 10 codes d'effets de souris Web classiques pour les lecteurs, et j'ai compilé et expliqué les codes. Les amis qui en ont besoin peuvent les enregistrer.
1. Des astuces spéciales pratiques apparaissent lorsque vous pointez la souris
<!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. Trois bandes de couleurs suivant la souris
<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>4. .Souris Après avoir fait défiler le texte d'invite
<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>5. L'hélice spatiale à trois pales tournant autour de la souris
<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>6. Anneau étoile tridimensionnel (grande roue) autour de la souris
<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>Trois- texte rotatif dimensionnel autour de la souris
<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>8. Suivez le cadran de date et d'heure de la souris
.<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>9. Une souris fluorescente très typée
<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>10. Texte fantôme suivant la souris
<html>
<head>
<title>中国站长站--跟随鼠标的幻影文字</title>
</head>
<body>
<script LANGUAGE="JavaScript">
<!-- Begin
message = '欢迎访问网页制作大宝库!';
FonT = 'Verdana';
ColoR = 'ff0000';
SizE = 3; //1 to 7 only!
var amount = 5, ypos =- 50, xpos = 0, Ay = 0, Ax = 0, By = 0, Bx = 0, Cy = 0, Cx = 0, Dy = 0, Dx = 0, Ey = 0, Ex = 0;
if (document.layers) {
for (i = 0; i < amount; i++) {
document.write('<layer name=nsl'+i+' top=0 left=0><font face='+FonT+' size='+SizE+' color='+ColoR+'>'+message+'</font></layer>');
}
window.captureEvents(Event.MOUSEMOVE);
function nsmouse(evnt) {
xpos = evnt.pageX + 20;
ypos = evnt.pageY + 20;
}
window.onMouseMove = nsmouse;
}
else if (document.all) {
document.write("<p id='outer' style='position:absolute;top:0px;left:0px'>");
document.write("<p style='position:relative'>");
for (i = 0; i < amount; i++) {
document.write('<p id="text"'+i+' style="position:absolute;top:0px;left:0px;width:400px;height:20px"><font face='+FonT+' size='+SizE+' color='+ColoR+'>'+message+'</font></p>')
}
document.write("</p>");
document.write("</p>");
function iemouse() {
ypos = event.y + 20;
xpos = event.x + 20;
}
window.document.onmousemove = iemouse;
}
function makefollow() {
if (document.layers) {
document.layers['nsl'+0].top = ay;
document.layers['nsl'+0].left = ax;
document.layers['nsl'+1].top = by;
document.layers['nsl'+1].left = bx;
document.layers['nsl'+2].top = cy;
document.layers['nsl'+2].left = cx;
document.layers['nsl'+3].top = Dy;
document.layers['nsl'+3].left = Dx;
document.layers['nsl'+4].top = Ey;
document.layers['nsl'+4].left = Ex;
}
else if (document.all) {
outer.style.pixelTop = document.body.scrollTop;
text[0].style.pixelTop = ay;
text[0].style.pixelLeft = ax;
text[1].style.pixelTop = by;
text[1].style.pixelLeft = bx;
text[2].style.pixelTop = cy;
text[2].style.pixelLeft = cx;
text[3].style.pixelTop = Dy;
text[3].style.pixelLeft = Dx;
text[4].style.pixelTop = Ey;
text[4].style.pixelLeft = Ex;
}
}
function move() {
ey = Ey += (ypos - Ey) * 0.2;
ex = Ex += (xpos - Ex) * 0.2;
dy = Dy += (ey - Dy) * 0.3;
dx = Dx += (ex - Dx) * 0.3;
cy = Cy += (dy - Cy) * 0.4;
cx = Cx += (dx - Cx) * 0.4;
by = By += (cy - By) * 0.5;
bx = Bx += (cx - Bx) * 0.5;
ay = Ay += (by - Ay) * 0.6;
ax = Ax += (bx - Ax) * 0.6;
makefollow();
setTimeout('move()', 100);
}
window.onload=move;
// End -->
</script>
</body>
</html> ci-dessus, je l'ai compilé pour tout le monde. J'espère qu'il sera utile à tout le monde à l'avenir. Articles connexes :
Utilisation de Native dans React pour implémenter le composant de visualisation d'images
Utilisation de vue-cli combinée avec Element-ui dans cropper . Basé sur js, vue est encapsulé pour implémenter la fonction du composant de recadrage d'image
Une série de fonctions telles que l'aperçu local, le recadrage, la compression et le téléchargement d'images sont implémentées dans vue.js <.>
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment implémenter un centre commercial en utilisant vueArticle suivant：Comment implémenter un centre commercial en utilisant vue
Articles Liés
Voir plus- Une analyse approfondie du composant de groupe de liste Bootstrap
- Explication détaillée du currying de la fonction JavaScript
- Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)
- Angularjs intègre l'interface utilisateur WeChat (weui)
- Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript