图片实现逐渐放大渐隐，动画结束实现跳转
来源：互联网 发布：淘宝宝贝上下架时间怎么设置 编辑：程序博客网 时间：2024/05/25 23:26
<html> <head> <title>CartoonExt</title> <!--加载ExtJs资源--> <script type="text/javascript" src="ext-all.js"></script> <script type="text/javascript"> function Anime(){ Ext.get('target') .puff( {easing: "backIn", duration:800, callback:function(){//callback实现动画结束进行自动跳转 location.href='file:///E:/tomcat/apache-tomcat-7.0.26/webapps/ROOT/0716/tree.html' } }); /**动画效果开始时地图上面的标记按钮消失*/ document.getElementById('shanghai').innerHTML=""; document.getElementById('Singapore').innerHTML=""; document.getElementById('Hongkong').innerHTML=""; document.getElementById('LS').innerHTML=""; document.getElementById('London').innerHTML=""; } </script> </head> <!---.click()打开页面实现自动点击 <body onload="document.forms[0].elements[0].click()"> <body> <div> <img id="target" src="file:///C:/Users/wang/Desktop/2476235_221903221217_2.jpg"> </div> <form> <div style="text-align: center;"> <input type="button" value="start" onclick="Anime();"> </div> </form> </body> --> <body style="text-align:center;margin:0 auto;"> <div style="text-align:center;width: 1021px;margin:0 auto;"> <!-- 被移动的元素 --> <div style="position:absolute"> <img id="target" src="file:///C:/Users/wang/Desktop/2476235_221903221217_2.jpg"> </div> <div id="shanghai" style="position:absolute; MARGIN:286px 0px 0px 795px"> <!--<input type="button" value="shh" onclick="javascript:window.location.href='http://big5.tabimado.net/sight/img/map-sh.gif'">--> <a href="file:///E:/tomcat/apache-tomcat-7.0.26/webapps/ROOT/0716/tree.html" onclick="act();"></a> <input style="align=center; width:65px; height:20px; background-color:#FF0000"; type="button" value="shanghai" onclick="Anime();"> </div> <div id="Singapore" style="position:absolute; MARGIN:378px 0px 0px 750px"> <a href="file:///E:/ExtJs-OpenLayers/GeoExt/examples/cartoon.html" onclick="act();"></a> <input style="align=center; width:70px; height:21px; background-color:#FF0000"; type="submit" value="Singapore" onclick="Anime();"> </div> <div id="Hongkong" style="position:absolute; MARGIN:310px 0px 0px 775px"> <a href="file:///E:/ExtJs-OpenLayers/GeoExt/examples/cartoon.html" onclick="act();"></a> <input style="align=center; width:70px; height:21px; background-color:#FF0000"; type="submit" value="Hongkong" onclick="Anime();"> </div> <div id="LS" style="position:absolute; MARGIN:256px 0px 0px 165px"> <a href="file:///E:/ExtJs-OpenLayers/GeoExt/examples/cartoon.html" onclick="act();"></a> <input style="align=center; width:85px; height:21px; background-color:#FF0000"; type="submit" value="Los Angeles" onclick="Anime();"> </div> <div id="London" style="position:absolute; MARGIN:203px 0px 0px 484px"> <a href="file:///E:/ExtJs-OpenLayers/GeoExt/examples/cartoon.html" onclick="act();"></a> <input style="align=center; width:55px; height:20px; background-color:#FF0000"; type="submit" value="London" onclick="Anime();"> </div> </div> </body></html>
