码迷,mamicode.com
首页 > 编程语言 > 详细

用javascript实现简单的动画效果的一个小实例

时间:2015-09-18 20:19:49      阅读:157      评论:0      收藏:0      [点我收藏+]

标签:

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

二、实时视图如下;

技术分享

三、原代码如下 

<!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;
   width:92%;
   height:580px;
  
     }
   #top{
    position:absolute;
    margin-left:10%;
    margin-right:10%;
    width:80%;
  
    padding-top:-100px;
   
     display:none;
   } 
   #top img{
    width:70%;
   }
    #bottom{
     position:absolute;
     bottom:20px;
     margin-left:10%;
    margin-right:10%;
    width:80%;
   text-align:center;
    padding-top:260px;
   }
    #bottom img{
     width: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; width: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>

用javascript实现简单的动画效果的一个小实例

标签:

原文地址:http://www.cnblogs.com/xiaogou/p/4820199.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!