<!DOCTYPE html> <html> <head> <title>index.html</title> <meta name="keywords" content="keyword1,keyword2,keyword3"> <meta name="description" content="this is my page"> <meta name="content-type" content="text/html; charset=UTF-8"> <meta charset="UTF-8"> <script type="text/javascript" src="js/jquery.min.js"></script> <style> #triple_bg { position: fixed; left: 0px; top: 0px; background-color: #000; width: 100%; height: 100%; filter: alpha(opacity=60); opacity: 0.6; display: none; z-Index: 100; } #triple_box { display: none; position: fixed; text-align: center; width: 170px; height: 150px; left: 4%; right: 4%; margin: 0px auto; background-color:transparent; z-Index: 101; border-radius: 10px 10px 10px 10px; top: 170px; } </style> <script type="text/javascript"> /** * 图片旋转 */ var imgrotate = null; /** * 开始图片旋转 */ function startimgrotate() { if (null != imgrotate) { return; } imgrotate = setInterval("rotate()", 10); } /** * 停止图片旋转 */ function stopimgrotate() { clearInterval(imgrotate); imgrotate = null; } /** * 图片旋转 * * @returns */ var value = 0; function rotate() { value = (value+1)%360; var element = document.getElementById("imgswitching"); if (null != element) { var imgnodestyle = element.style; if (navigator.userAgent.indexOf("MSIE") > 0) { imgnodestyle.msTransform = "rotate(" + value + "deg)"; } // 判断是否IE浏览器 else if (isFirefox = navigator.userAgent.indexOf("Firefox") > 0) { imgnodestyle.MozTransform = "rotate(" + value + "deg)"; }// 判断是否火狐浏览器 else if (isChrome = navigator.userAgent.indexOf("Chrome") > 0) { imgnodestyle.webkitTransform = "rotate(" + value + "deg)"; }// 判断是否safari浏览器 else if (isSafari = navigator.userAgent.indexOf("Safari") > 0) { imgnodestyle.webkitTransform = "rotate(" + value + "deg)"; }// 其他浏览器 else { imgnodestyle.webkitTransform = "rotate(" + value + "deg)"; } } } function openDialog(){ //弹出等待窗口 startimgrotate(); window.document.getElementById("triple_bg").style.display = "block"; window.document.getElementById("triple_box").style.display = "block"; window.document.getElementById("changeSwitch_ing").style.display = "block"; } /** * 关闭弹窗 */ function closeDialog(){ window.document.getElementById("triple_bg").style.display = "none"; window.document.getElementById("triple_box").style.display = "none"; window.document.getElementById("changeSwitch_ing").style.display = "none"; stopimgrotate(); } </script> </head> <body> <div id="triple_bg" style="display: none;" ></div> <!-- 黑色背景--> <div id="triple_box" style="display: none;" > <!-- 外框--> <div id="changeSwitch_ing" style="display: none;"> <!--正在执行--> <div style="margin-top: 15%;"><img id="imgswitching" src="image/cycle.png" /></div> </div> </div> <button onclick="openDialog()">旋转图片</button> <button onclick="closeDialog()">停止旋转</button> </body> </html>
纯html jquery 实现加载效果(图片旋转)
猜你喜欢
转载自blog.csdn.net/dcb_ripple/article/details/77335171
今日推荐
周排行