网页新技术之跳动的心

您现在的位置:主页>>学习园地>>网页制作特技>>跳动的心

跳动的心

　　您看见围绕鼠标旋转跳动的心了吗？非常漂亮吧！
　　让我来告诉你，如何实现这样的效果：
第一步：请你把下面五颗心的图片(按鼠标右键，“图片另存为...”)保存到你准备运用此效果的HTM文件同一目录下；

第二步：请把下面框框里的原代码插入html文件的<head>和</head>之间：

<script LANGUAGE="JavaScript" FPTYPE="dynamicanimation">  </script>

第三步：请将你的html文件里的<body>语句行改为<body onLoad="dynAnimation()">

第四步：请将下面框框里的原代码插入html文件的<body>和</body>之间

<p dynamicanimation="dropWord" style="position: relative !important; left: 10000 !important">　</p> <div id="trailSprite1" style="position: absolute; height:36px; width:36px;z-index: 100; left: 600px; top: 5px; visibility: hidden"> <dd dynamicanimation="flyTopRightWord" style="position: relative !important; left: 10000 !important"><img src="images/trailgif1.gif" name="trailSprite1img" WIDTH="36" HEIGHT="36"> </dd> </div><div id="trailSprite2" style="position: absolute; height:36px; width:36px;z-index: 10; left: 600px; top: 5px; visibility: hidden"> <dd><img src="images/trailgif4.gif" name="trailSprite2img" WIDTH="36" HEIGHT="36"> </dd> </div><div id="trailSprite3" style="position: absolute; height:36px; width:36px;z-index: 10; left: 600px; top: 5px; visibility: hidden"> <dd><img src="images/trailgif5.gif" name="trailSprite3img" WIDTH="36" HEIGHT="36"> </dd> </div><div id="trailSprite4" style="position: absolute; height:36px; width:36px;z-index: 10; left: 600px; top: 5px; visibility: hidden"> <dd><img src="images/trailgif3.gif" name="trailSprite4img" WIDTH="36" HEIGHT="36"> </dd> </div><div id="trailSprite5" style="position: absolute; height:36px; width:36px;z-index: 10; left: 600px; top: 5px; visibility: hidden"> <dd><img src="images/trailgif2.gif" name="trailSprite5img" WIDTH="36" HEIGHT="36"> </dd> </div>

第五步：请将下面框框里的原代码插入html文件的</html>后

<script> var isNS = (navigator.appName == "Netscape"); layerRef = (isNS) ? "document" : "document.all"; styleRef = (isNS) ? "" : ".style"; var queue = new Array(); var NUM_OF_TRAIL_PARTS = 5 for (x=1; x < 6; x++) { ///////////////Image Preload eval("trailSpriteFrame" + x + " = new Image(36,36);"); eval("trailSpriteFrame" + x + ".src = 'images/trailgif" + x + ".gif';"); } ////////////////////////////////////////////////The trail Object function trailSpriteObj(anID) { this.trailSpriteID = "trailSprite" + anID; //as before this.imgRef = "trailSprite" + anID + "img"; //reference to the sprites image name this.currentFrame = 1; //the varible for looking after the frame this.animateTrailSprite = animateTrailSprite; //declare the objects method cycle } function animateTrailSprite() { if (this.currentFrame <6 ) { //if there are animation frames left, the change sprites the current frame if (isNS) { //Detect the browser and perform coresponding image switch eval("document." + this.trailSpriteID +".document['"+ this.imgRef + "'].src = trailSpriteFrame" + this.currentFrame + ".src"); } else { eval("document['" + this.imgRef + "'].src = trailSpriteFrame" + this.currentFrame + ".src"); } this.currentFrame ++; //and increase the objects current frame } else { //the current frame has reached its limit so hide the sprite eval(layerRef + '.' + this.trailSpriteID + styleRef + '.visibility = "hidden"'); } } ///////////////////////////////////////////////////////////////// function processAnim() { for(x=0; x < NUM_OF_TRAIL_PARTS; x++) queue[x].animateTrailSprite(); } function processMouse(e) { currentObj = shuffleQueue(); if (isNS) { eval("document." + currentObj + ".left = e.pageX - 10 ;"); eval("document." + currentObj + ".top = e.pageY + 10;"); } else { eval("document.all." + currentObj + ".style.pixelLeft = event.clientX + document.body.scrollLeft - 10 ;"); eval("document.all." + currentObj + ".style.pixelTop = event.clientY + document.body.scrollTop + 10;"); } } function shuffleQueue() { lastItemPos = queue.length - 1; lastItem = queue[lastItemPos]; for (i = lastItemPos; i>0; i--) queue[i] = queue[i-1]; queue[0] = lastItem; queue[0].currentFrame = 1; //reset the objects frame number & make the sprite visible again eval(layerRef + '.' + queue[0].trailSpriteID + styleRef + '.visibility = "visible"'); return queue[0].trailSpriteID; } function init() { for(x=0; x<NUM_OF_TRAIL_PARTS; x++) //fill array with trail objects queue[x] = new trailSpriteObj(x+1) ; if (isNS) { document.captureEvents(Event.MOUSEMOVE); } document.onmousemove = processMouse; setInterval("processAnim();",25); } window.onload = init; </script>

OK!全部完成了，快快用到你自己的主页上试试！

哇....好酷噢！！