返回顶部

最新推荐文章于 2022-10-13 12:45:09 发布
li3196672779
最新推荐文章于 2022-10-13 12:45:09 发布
阅读量223
点赞数
分类专栏： css视差滚动效果
css视差滚动效果专栏收录该内容
4 篇文章 0 订阅
订阅专栏
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>Document</title>
	<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
			font-weight: 300;
		}
		body{
			background: #c8ece3;
		}
		h1{
			text-align: center;
			font-size: 88px;
			color: #ff76c8;
			margin: 66px auto 33px;
			border-bottom: 3px solid rgba(0,0,0,.6);
			text-transform: uppercase;
			font-weight: 600;
		}
		 #content{
            padding: 11px 16px;
        }
        h2{
            font-size: 43px;
            color: rgba(195,9,87,.8);
        }
         p{
            font-size: 22px;
            line-height: 1.3;
            margin-bottom: 33px;
        }
		img{
			float: left;
			margin-right: 22px;
			padding: 22px;
			width: 400px;
			height: 300px;
			border: 2px dotted rgba(0,0,0,.6);
			background: rgba(0,0,0,.3);
		}
		img.right
		{
			margin-left: 22px;
			margin-right: 0;
			float: right !important;
		}
		#top{
			position: fixed;
			z-index: 5555;
			right: 55px;
			bottom: 55px;
			
			padding-top: 33px;
            text-align: center;
            box-sizing: border-box;
            width: 155px;
            height: 77px;


            background: rgba(133,105,172,.6);
            border: 1px solid rgba(0,0,0,.6);

            cursor: help;
            
            opacity: 0;
           transition: all 1.1s;
		}
		
		#top:after{
			content: '';
			width: 0;
			height: 0;
			
			position: absolute;
			border-width: 16px;
			border-style: solid;
			
			border-color: transparent transparent aqua transparent;
            top: 1px;
            left: 60px;/*剧中*/
           
		}
		#top.show{
			opacity: 1;
		}
	</style>
	<script type="text/javascript">
		$(function(){
			$(window).scroll(function(){
				var stop = $(window).scrollTop(); //获取滚动条距离上面的高度
//				alert(stop);
				if(stop > $(window).height()){  // 如果滚动条距离上面高度 > dom 可视高度
					$('#top').addClass('show');
				}
				else{
					$('#top').removeClass('show');
				}
			})
		})
	</script>
</head>
<body>
	<section id="content">
		<article>
			<h1>1</h1>
			<img src="img/1.jpg"/>
			    <p>破窗效应，是1982年，由美国政治学家威尔森和犯罪学家凯琳提出的。<br><br>它是指，如果有人打坏了一幢建筑的窗户玻璃，却没有人维修，经过的路人，就会像受到了暗示一样，被诱发打破更多的窗户。然后，这个街区其他建筑的窗户，也可能被打破。然后是其他街区。
                其实这很好理解。<br><br>在干净的墙角，扔几张碎纸。过几个小时后你再去看，那个地方多半就有了一小堆垃圾。十几个行人在等红灯，只要有一两个人旁若无人地闯红灯过马路，后面很多人就会跟上，这就是所谓的中国式过马路：凑够一撮人就可以走了，和红绿灯无关。
                无序，会邀请无序。混乱，会引发混乱。<br><br>“凭什么他可以，我就不行啊？”，“大家都这样，总不会有事吧？”在占便宜、做坏事上，寻求公平，这种心理，就是“畸形公平”的心理。所以，在第一扇破窗出现时，就必须立即修复。否则，当整个街区都出现混乱时，就积重难返了。</p>
		</article>
		<article>
			<h1>2</h1>
			<img src="img/11.jpg" class="right"/>
			    <p>破窗效应，是1982年，由美国政治学家威尔森和犯罪学家凯琳提出的。<br><br>它是指，如果有人打坏了一幢建筑的窗户玻璃，却没有人维修，经过的路人，就会像受到了暗示一样，被诱发打破更多的窗户。然后，这个街区其他建筑的窗户，也可能被打破。然后是其他街区。
                其实这很好理解。<br><br>在干净的墙角，扔几张碎纸。过几个小时后你再去看，那个地方多半就有了一小堆垃圾。十几个行人在等红灯，只要有一两个人旁若无人地闯红灯过马路，后面很多人就会跟上，这就是所谓的中国式过马路：凑够一撮人就可以走了，和红绿灯无关。
                无序，会邀请无序。混乱，会引发混乱。<br><br>“凭什么他可以，我就不行啊？”，“大家都这样，总不会有事吧？”在占便宜、做坏事上，寻求公平，这种心理，就是“畸形公平”的心理。所以，在第一扇破窗出现时，就必须立即修复。否则，当整个街区都出现混乱时，就积重难返了。</p>
		</article>
		<article>
			<h1>3</h1>
			<img src="img/14.jpg"/>
			    <p>破窗效应，是1982年，由美国政治学家威尔森和犯罪学家凯琳提出的。<br><br>它是指，如果有人打坏了一幢建筑的窗户玻璃，却没有人维修，经过的路人，就会像受到了暗示一样，被诱发打破更多的窗户。然后，这个街区其他建筑的窗户，也可能被打破。然后是其他街区。
                其实这很好理解。<br><br>在干净的墙角，扔几张碎纸。过几个小时后你再去看，那个地方多半就有了一小堆垃圾。十几个行人在等红灯，只要有一两个人旁若无人地闯红灯过马路，后面很多人就会跟上，这就是所谓的中国式过马路：凑够一撮人就可以走了，和红绿灯无关。
                无序，会邀请无序。混乱，会引发混乱。<br><br>“凭什么他可以，我就不行啊？”，“大家都这样，总不会有事吧？”在占便宜、做坏事上，寻求公平，这种心理，就是“畸形公平”的心理。所以，在第一扇破窗出现时，就必须立即修复。否则，当整个街区都出现混乱时，就积重难返了。</p>
		</article>
		<article>
			<h1>4</h1>
			<img src="img/15.jpg" class="right"/>
			    <p>破窗效应，是1982年，由美国政治学家威尔森和犯罪学家凯琳提出的。<br><br>它是指，如果有人打坏了一幢建筑的窗户玻璃，却没有人维修，经过的路人，就会像受到了暗示一样，被诱发打破更多的窗户。然后，这个街区其他建筑的窗户，也可能被打破。然后是其他街区。
                其实这很好理解。<br><br>在干净的墙角，扔几张碎纸。过几个小时后你再去看，那个地方多半就有了一小堆垃圾。十几个行人在等红灯，只要有一两个人旁若无人地闯红灯过马路，后面很多人就会跟上，这就是所谓的中国式过马路：凑够一撮人就可以走了，和红绿灯无关。
                无序，会邀请无序。混乱，会引发混乱。<br><br>“凭什么他可以，我就不行啊？”，“大家都这样，总不会有事吧？”在占便宜、做坏事上，寻求公平，这种心理，就是“畸形公平”的心理。所以，在第一扇破窗出现时，就必须立即修复。否则，当整个街区都出现混乱时，就积重难返了。</p>
		</article>
		<article>
			<h1>5</h1>
			<img src="img/16.jpg"/>
			    <p>破窗效应，是1982年，由美国政治学家威尔森和犯罪学家凯琳提出的。<br><br>它是指，如果有人打坏了一幢建筑的窗户玻璃，却没有人维修，经过的路人，就会像受到了暗示一样，被诱发打破更多的窗户。然后，这个街区其他建筑的窗户，也可能被打破。然后是其他街区。
                其实这很好理解。<br><br>在干净的墙角，扔几张碎纸。过几个小时后你再去看，那个地方多半就有了一小堆垃圾。十几个行人在等红灯，只要有一两个人旁若无人地闯红灯过马路，后面很多人就会跟上，这就是所谓的中国式过马路：凑够一撮人就可以走了，和红绿灯无关。
                无序，会邀请无序。混乱，会引发混乱。<br><br>“凭什么他可以，我就不行啊？”，“大家都这样，总不会有事吧？”在占便宜、做坏事上，寻求公平，这种心理，就是“畸形公平”的心理。所以，在第一扇破窗出现时，就必须立即修复。否则，当整个街区都出现混乱时，就积重难返了。</p>
		</article>
		<article>
			<h1>6</h1>
			<img src="img/18.jpg" class="right"/>
			    <p>破窗效应，是1982年，由美国政治学家威尔森和犯罪学家凯琳提出的。<br><br>它是指，如果有人打坏了一幢建筑的窗户玻璃，却没有人维修，经过的路人，就会像受到了暗示一样，被诱发打破更多的窗户。然后，这个街区其他建筑的窗户，也可能被打破。然后是其他街区。
                其实这很好理解。<br><br>在干净的墙角，扔几张碎纸。过几个小时后你再去看，那个地方多半就有了一小堆垃圾。十几个行人在等红灯，只要有一两个人旁若无人地闯红灯过马路，后面很多人就会跟上，这就是所谓的中国式过马路：凑够一撮人就可以走了，和红绿灯无关。
                无序，会邀请无序。混乱，会引发混乱。<br><br>“凭什么他可以，我就不行啊？”，“大家都这样，总不会有事吧？”在占便宜、做坏事上，寻求公平，这种心理，就是“畸形公平”的心理。所以，在第一扇破窗出现时，就必须立即修复。否则，当整个街区都出现混乱时，就积重难返了。</p>
		</article>
	</section>
	<div id="top">
		Top
	</div>
</body>
</html>