寫在前面：
在項目首頁會用到圖片由小變大的動畫效果，一開始直接使用的是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="width: 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({ width:"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="width: 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方法