图片实现逐渐放大渐隐，动画结束实现跳转

最新推荐文章于 2022-10-21 21:39:10 发布

原创最新推荐文章于 2022-10-21 21:39:10 发布 · 2.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#input #div #file #button #function #extjs

Extjs 同时被 2 个专栏收录

7 篇文章

订阅专栏

2 篇文章

订阅专栏

本文介绍如何利用ExtJS库实现动态网页动画效果，包括加载资源、触发动画和自动跳转到目标页面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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>