📄 ch8-104.html
字号:
<HTML>
<HEAD>
<TITLE>鼠标特效篇--星星跟随鼠标</TITLE>
</HEAD>
<BODY bgcolor="#fef4d2" background="../images/background3.jpg">
<br><br>
<center>
<font color="red"><h2>鼠标特效篇--星星跟随鼠标</h2></font>
<hr width=300>
<br><br>
<!-- 案例代码1开始 -->
<script language=JavaScript>
if (!document.layers&&!document.all) event="test"
function YY_MouseStar(evnt) {
if (yyns4) {if (evnt.pageX) {yy_ml=evnt.pageX; yy_mt=evnt.pageY;} }
else{ yy_ml=(event.clientX + document.body.scrollLeft); yy_mt=(event.clientY+document.body.scrollTop); }
if (yy_tracescript) eval(yy_tracescript)
}
function YY_LayerStar(yyleft,yytop,yyfnx,yyfny,yydiv,yybilder,yyloop,yyto,yycnt,yystep) {
if ((document.layers)||(document.all)){
with (Math) {yynextx= eval(yyfnx)}
with (Math) {yynexty= eval(yyfny)}
yycnt=(yyloop && yycnt>=yystep*yybilder)?0:yycnt+yystep;
if (document.layers){
eval(yydiv+".top="+(yynexty+yytop))
eval(yydiv+".left="+(yynextx+yyleft)) }
if (document.all){
eval("yydiv=yydiv.replace(/.layers/gi, '.all')");
eval(yydiv+".style.pixelTop="+(yynexty+yytop));
eval(yydiv+".style.pixelLeft="+(yynextx+yyleft)); }
argStr='YY_LayerStar('+yyleft+','+yytop+',"'+yyfnx+'","'+yyfny+'","'+yydiv+'",'+yybilder+','+yyloop+','+yyto+','+yycnt+','+yystep+')';
if (yycnt<=yystep*yybilder){eval(yydiv+".yyto=setTimeout(argStr,yyto)");}
}
}
</script>
<div id="tooltip2" style="position:absolute;visibility:hidden;clip:rect(0 150 50 0); width:150px; background-color:lightyellow"></div>
<!-- [Step1]: 这里可以设置星星的初始位置 -->
<!-- [Step2]: 在此能够更改星星的宽度和高度-->
<!-- [Step3]: 这里可以修改星星的背景色-->
<!-- [Step4]: 在此能够设置星星的边界框-->
<!-- [Step5]: 这里可以更改星星的大小-->
<div id="yyd0" style="position:absolute; left:10px; top:50px; width:3px; height:3px; z-index:1; background-color: #19636c; border: 1px none #000000; clip: rect(0 3 3 0)"></div>
<div id="yyd1" style="position:absolute; left:20px; top:50px; width:3px; height:3px; z-index:1; background-color: #708574; border: 1px none #000000; clip: rect(0 3 3 0)"></div>
<div id="yyd2" style="position:absolute; left:30px; top:50px; width:3px; height:3px; z-index:1; background-color: #379bbf; border: 1px none #000000; clip: rect(0 3 3 0)"></div>
<div id="yyd3" style="position:absolute; left:40px; top:50px; width:3px; height:3px; z-index:1; background-color: #25184c; border: 1px none #000000; clip: rect(0 3 3 0)"></div>
<div id="yyd4" style="position:absolute; left:50px; top:50px; width:3px; height:3px; z-index:1; background-color: #31bd3c; border: 1px none #000000; clip: rect(0 3 3 0)"></div>
<div id="yyd5" style="position:absolute; left:60px; top:50px; width:3px; height:3px; z-index:1; background-color: #c11efd; border: 1px none #000000; clip: rect(0 3 3 0)"></div>
<!-- 案例代码1结束 -->
<!-- 案例代码2开始 -->
<script language=JavaScript>
var yyns4=window.Event?true:false; var yy_mt = 0; var yy_ml = 0;
document.onmousemove = YY_MouseStar;
yy_tracescript = '';
if (yyns4){ document.captureEvents(Event.mousemove); YY_MouseStar('',',document.YY_MouseStar1')}
YY_LayerStar(0,0,'yy_ml+cos((15*sin(yycnt/40))+0)*150*(sin(10+yycnt/20)+0.3)','yy_mt+sin((15*sin(yycnt/34))+0)*150*(sin(10+yycnt/20)+0.3)','document.layers[\'yyd0\']',2002,true,88,7,1);
YY_LayerStar(0,0,'yy_ml+cos((15*sin(yycnt/28))+30)*150*(sin(10+yycnt/20)+0.3)','yy_mt+sin((15*sin(yycnt/9))+30)*150*(sin(10+yycnt/20)+0.3)','document.layers[\'yyd1\']',2002,true,88,7,1);
YY_LayerStar(0,0,'yy_ml+cos((15*sin(yycnt/16))+60)*150*(sin(10+yycnt/20)+0.3)','yy_mt+sin((15*sin(yycnt/16))+60)*150*(sin(10+yycnt/20)+0.3)','document.layers[\'yyd2\']',2002,true,88,7,1);
YY_LayerStar(0,0,'yy_ml+cos((15*sin(yycnt/7))+90)*150*(sin(10+yycnt/20)+0.3)','yy_mt+sin((15*sin(yycnt/44))+90)*150*(sin(10+yycnt/20)+0.3)','document.layers[\'yyd3\']',2002,true,88,7,1);
YY_LayerStar(0,0,'yy_ml+cos((15*sin(yycnt/34))+120)*150*(sin(10+yycnt/20)+0.3)','yy_mt+sin((15*sin(yycnt/2))+120)*150*(sin(10+yycnt/20)+0.3)','document.layers[\'yyd4\']',2002,true,88,7,1);
YY_LayerStar(0,0,'yy_ml+cos((15*sin(yycnt/38))+150)*150*(sin(10+yycnt/20)+0.3)','yy_mt+sin((15*sin(yycnt/18))+150)*150*(sin(10+yycnt/20)+0.3)','document.layers[\'yyd5\']',2002,true,88,7,1);
</script>
<!-- 案例代码2结束 -->
</BODY>
</HTML>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -