zoukankan      html  css  js  c++  java
  • 用javascript实现简单的动画效果的一个小实例

    一、主要功能介绍:打开页面时文字会动态的从上面滑下来。下面的箭头链接会自动闪烁。

    二、实时视图如下;

    三、原代码如下 

    <!DOCTyPE html>
     <head>
     <script src="js/jquery-2.1.4.min.js"></script>
     <script>
     setInterval("changeImage()",2000);//定时函数
     /*下面的为一个自定意函数*/
       function changeImage(){
      
       
          $("#top").fadeIn(300);
      $("#top").animate({
          top:'80px',
          opacity:'1.1'
         
        });
     
      element=document.getElementById('myimage')
    if (element.src.match("lianjietubiaof.png"))
      {
      element.src="images/lianjietubiao.png";
      }
    else
      {
      element.src="images/lianjietubiaof.png";
      }
      }
     
    </script>
      <title>
      kaoheneirong
      </title>
       <style type="text/css">
        body{ background-image:url(images/3.png);     
           background-size:cover;
          
            }
      #box{
           margin-left:4%;
        margin-right:4%;
       background-image:url(images/border.png);
       background-size: 100% 580px;
       92%;
       height:580px;
      
         }
       #top{
        position:absolute;
        margin-left:10%;
        margin-right:10%;
        80%;
      
        padding-top:-100px;
       
         display:none;
       } 
       #top img{
        70%;
       }
        #bottom{
         position:absolute;
         bottom:20px;
         margin-left:10%;
        margin-right:10%;
        80%;
       text-align:center;
        padding-top:260px;
       }
        #bottom img{
         60px;
          
        }
        #bottom a{color:transparent;
        text-decoration:none;
        }
       </style>
     </head>
     <body>
      <div id="box">
       <div id="top">
        <img src="images/4_4.png" style="float:left; height:100px; 10%; "  >
       <img src="images/3_3.png">
       <br/>
        <img src="images/3_2.png">
       </div>
         <div id="bottom">
       <a href="page3.html"> <img src="images/lianjietubiao.png" id="myimage"> </a>
        </div>
      </div>
     </body>
     
    </html>

  • 相关阅读:
    gradle添加阿里云maven库
    来谈谈MySQL的临时表,到底是个什么东西,以及怎么样产生的
    MySQL优化相关参数--先做个记录,以后可能用得到
    对于join操作,MySQL它是咋做的?
    Linux-常用命令记录
    有时候我们自认为有用的索引却并没有被MySQL选择使用?
    C#趟坑: Wait()线程结束时,会忽略子线程
    初次使用Windbg检查C#程序内存
    性能优化之三:将Dottrace过程加入持续集成
    性能优化之二:结构体类型的性能优化
  • 原文地址:https://www.cnblogs.com/xiaogou/p/4820199.html
Copyright © 2011-2022 走看看