纯html jquery 实现加载效果(图片旋转)

最新推荐文章于 2024-04-12 08:04:25 发布

鱼遇上了猫

最新推荐文章于 2024-04-12 08:04:25 发布

阅读量4.9k

点赞数

本文链接：https://blog.csdn.net/dcb_ripple/article/details/77335171

版权

<!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 οnclick="openDialog()">旋转图片</button>
		<button οnclick="closeDialog()">停止旋转</button>
  </body>
</html>

鱼遇上了猫

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
纯html jquery 实现加载效果(图片旋转)

index.html #triple_bg { position: fixed; left: 0px; top: 0px; background-color: #000; width: 100%; height: 100%; filter: alpha(opacity=60); opacit
复制链接

扫一扫