实现图片由小变大动画效果
写在前面：
在项目首页会用到图片由小变大的动画效果，一开始直接使用的是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方法
