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>

  • 相关阅读:
    hadoop面试时的一些问题解答
    FTRL(Follow The Regularized Leader)学习总结
    循环神经(LSTM)网络学习总结
    深度学习中常用的激活函数
    TF.learn学习
    TensorFlow实现分布式计算
    TensorFlow TensorBoard使用
    深度学习总结
    Spark SQL相关总结
    推荐系统/广告系统索引目录
  • 原文地址:https://www.cnblogs.com/xiaogou/p/4820199.html
Copyright © 2011-2022 走看看