提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其它

当前栏目

全屏切换效果demo效果示例（整理）

示例 效果 整理 切换 Demo 全屏
2023-09-14 09:04:05 时间 
<!DOCTYPE html>
<html>
	    <head>
		        
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		        
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>全屏切换效果</title>
		        
		<meta name="viewport"           
			 content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		        
		<meta name="apple-mobile-web-app-capable" content="yes">
		        
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		        
		<meta name="format-detection" content="telephone=no">
		        <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
		        <style>
			* {
				margin: 0;
				padding: 0;
			}

			html {
				overflow-x: hidden;
			}

			ul li {
				list-style: none;
			}

			ul {
				position: fixed;
				right: 5px;
				top: 50%;
			}

			ul li {
				margin: 5px 0;
				width: 15px;
				height: 15px;
				border-radius: 50%;
				background: white;
				cursor: pointer;
			}

			.active {
				background: red;
			}
		</style>
		    
	</head>
	    <body>
	        <div>1111</div>
	        <div>2222</div>
	        <div>3333</div>
	        <div>4444</div>
	        <div>5555</div>
	        <ul>
	            <li class="active"></li>
	            <li></li>
	            <li></li>
	            <li></li>
	            <li></li>
	        </ul>
        <script type="text/javascript">
			var viewWidth = $(window).width(); //获取屏幕可视宽
			var viewHeight = $(window).height(); //获取屏幕可视高
			var arr = ['yellow', 'red', 'blue', 'black', 'pink'];
			$('div').css({
				width: viewWidth,
				height: viewHeight
			});
			$('div').each(function(i, v) {
				$(v).css('background', arr[i]);
			})
			$(window).scroll(function() {
				var index = Math.floor(($(document).scrollTop() + viewHeight / 2) / viewHeight);
				$('li').eq(index).attr('class', 'active').siblings().attr('class', '');
			})
			$('li').click(function() {
				//$(document).scrollTop($(this).index()*viewHeight);
				var H = $(this).index() * viewHeight;
				$('html,body').animate({
					scrollTop: H
				}, 800);
			});
		</script>
    </body>
</html>

相关文章