js实现左右切换页面

最新推荐文章于 2024-01-25 14:35:44 发布

loyal98

最新推荐文章于 2024-01-25 14:35:44 发布

阅读量2.1k

点赞数

分类专栏： js

js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		html, body{ height:100%;}body { margin:0; padding:0; font-family:sans-serif; text-align:center; color:#FFF; overflow:hidden; position:relative;}
		article{ position: absolute; width:100%; height:100%; padding:100px; box-sizing:border-box; -webkit-transition:all 1s ease-in-out; transition:all 1s ease-in-out; top:0;}
		#tablet{ background:#4ac4aa; left:0;}
		#wifi{ background:#ea5634; left:100%;}
		h1{ font-size:4em; border-bottom:1px solid rgba(255,255,255,.2); padding-bottom:30px;}
		p{ color:rgba(255,255,255,.8); margin-bottom:30px;}
		a{ font-size:1.5em; padding:5px 50px; border:1px solid #FFF; border-radius:4px; text-decoration:none;color:#fff;}
		#tablet.move{ left:-100%;}
		#wifi.move{ left:0;}
	</style>
	<script src="js/jquery.min.js"></script>
	<script>
		$(function(){
			$('a').click(function(a){ 
				a.preventDefault();//阻止超链接的默认锚点跳转动作。
				$('#tablet').toggleClass('move'); 
				$('#wifi').toggleClass('move'); 
			}); 
		})
	</script>
</head>
<body>
	<article id="tablet"> <img src="tablet.png" alt="tablet"> <h1>Comprehensam</h1> <p>Mel homero labores ce maluisset ... aliquam te.</p> <a href="#wifi">Next</a></article>
	<article id="wifi"> <img src="wifi.png" alt="wifi"> <h1>Adversarium</h1> <p>Ea qui graece facilisi persequeris ... similique ex qui.</p> <a href="#tablet">Next</a></article>
</body>
</html>

loyal98

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
js实现左右切换页面

Document html, body{ height:100%;}body { margin:0; padding:0; font-family:sans-serif; text-align:center; color:#FFF; overflow:hidden; position:relative;} article{ position: absolute; width:100%;
复制链接

扫一扫