zoukankan      html  css  js  c++  java
  • 实现图片由小变大动画效果

    写在前面:

      在项目首页会用到图片由小变大的动画效果,一开始直接使用的是css3,给图片添加相关样式即可,可是ie不兼容,故使用jquery的animate方法来实现。

    1.使用jquery的animate实现

    <%--
      Created by IntelliJ IDEA.
      User: Administrator
      Date: 2018/6/12
      Time: 8:17
      To change this template use File | Settings | File Templates.
    --%>
    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <%
      String scheme = request.getScheme();
      String serverName = request.getServerName();
      String contextPath = request.getContextPath();
      int port = request.getServerPort();
    
      //网站的访问跟路径
      String baseURL = scheme + "://" + serverName + ":" + port
              + contextPath;
      request.setAttribute("baseURL", baseURL);
      System.out.println("baseURL:" + baseURL);
    
    %>
    
    <html>
      <head>
        <title>jquery动画由小变大</title>
    
        <script src="${baseURL}/Bootstrap/bootstrap/assets/js/jquery-1.10.2.min.js"></script>
    
      </head>
    
      <style type="text/css">
        body{
          margin:0;
          padding:0;
        }
    
        img{
          width:0;
          height:0;
          padding:0;
          /*这里可以调整图片的位置*/
          margin-left:45px;
          margin-top:150px;
        }
      </style>
    
    
      <body style="text-align: center">
          <div style=" 400px;height: 300px;background-color: lightseagreen">
              <img src="${baseURL}/pic/welcome.PNG" id="img" alt="Here is a pic" />
          </div>
    
      </body>
    
    
      <script type="text/javascript" charset="utf-8">
    
          /*实现图片由小变大*/
          $(document).ready(function(){
    
              $('#img').animate({
                  "400px",   //图片放大后的宽度
                  height:"300px", //图片放大后的高度
    
                  marginLeft:"0px", //图片放大后与父容器左边的距离
                  marginTop:"0px", //图片放大后与父容器顶部的距离
              },4000,function(){
                  //直至图片放大后,所要执行的方法
                  //比如跳转到对应的页面去
                  //根据项目需求来
    
              });
    
          } );
      </script>
    
    </html>

    2. 使用css3实现

    <%--
      Created by IntelliJ IDEA.
      User: Administrator
      Date: 2018/6/12
      Time: 8:17
      To change this template use File | Settings | File Templates.
    --%>
    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <%
      String scheme = request.getScheme();
      String serverName = request.getServerName();
      String contextPath = request.getContextPath();
      int port = request.getServerPort();
    
      //网站的访问跟路径
      String baseURL = scheme + "://" + serverName + ":" + port
              + contextPath;
      request.setAttribute("baseURL", baseURL);
      System.out.println("baseURL:" + baseURL);
    %>
    
    <html>
      <head>
        <title>css3实现图片由小变大效果</title>
        <script src="${baseURL}/Bootstrap/bootstrap/assets/js/jquery-1.10.2.min.js"></script>
    
        <style type="text/css">
          /*渐出变大效果*/
          #obj{
            -webkit-animation:share_icon 4s linear;
          }
          @-webkit-keyframes share_icon {
            0% {-webkit-transform: scale(0.5); opacity:0}
            100% {-webkit-transform: scale(1); opacity:1}
          }
    
         /*!* 匀速旋转效果*!
    
          #obj{
              -webkit-animation:Rotate 2s linear infinite;
          }
          @-webkit-keyframes Rotate
          {
              from {transform:rotate(0deg);-webkit-transform:rotate(0deg);}
              to {transform:rotate(360deg);-webkit-transform:rotate(360deg);}
          }
          !*呼吸灯动画*!
    
          #obj{
              -webkit-animation:share_icon 1s linear infinite;
          }
          @-webkit-keyframes share_icon {
              0% {opacity:0}
              50% { opacity:1}
              100% { opacity:0}
          }
    */
        </style>
      </head>
    
    <body>
    
      <img src="${baseURL}/pic/a.jpg" id="obj" style=" 100%;height: auto" />
    
    </body>
    
    <script type="text/javascript">
        var obj = document.getElementById("obj");
        //动画结束后监听事件
        obj.addEventListener('webkitAnimationEnd', function(){
            alert(123);
            //动画图片静止后 调用的函数,根据项目需求来
        })
    
    </script>
    </html>

    这里就不上效果图了,对比下来css3呈现的效果更炫,但是为了更好的兼容ie,还是选择了jquery的animate方法

  • 相关阅读:
    ASP.NET MVC 异常捕获
    Jquery 扩展方法
    Spring.NET笔记1
    ASP.NET MVC Ninject 实现依赖注入
    ASP.NET MVC Unity实现依赖注入
    windows service
    反射用法
    抽象工厂核心反射
    (C#)中的DataSet、string、DataTable等对象转换成Json
    .NET批量删除代码前的行号
  • 原文地址:https://www.cnblogs.com/eleven258/p/9258528.html
Copyright © 2011-2022 走看看