响应式网站建设 div元素出现时加载css3动画特效 滚动条下拉加载class sytle样式
2020-09-16 23:12:38 来源： 评论：0 点击：
响应式网站建设是当前比较流行的，可以给客户呈现高大上的视觉效果。当div元素从底部开始出现在浏览器可视区域时，给div加上classname，通过给classname添加css样式来实现响应式。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
另外可结合
@media screen and (min-width: 751px) and (max-width:1440px) {
#main{ height:200px; width:80%;}
}
@media only screen and (max-width: 750px) {
#main{ height100px; width:60%;}
}
根据浏览器的宽度大小调用不同的style样式。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="http://www.nnxiayi.com/myfile/js/jquery.js"></script><!--加载一个jquery.js-->
</head>
<body>
<style type="text/css">
*{ padding:0px; margin:0px; border:none;}
#header{ height:10px; padding-top:800px;}
#footer{ height:1000px;}
#main{ height:300px; width:100%; background-color:#F00; position:relative;}
.main p{animation:main_s_p 3s 1; -webkit-animation:main_s_p 3s 1; left:30%; position:absolute; width:100px; height:100px; background: #000;}
@keyframes main_s_p{from {left:0%; } to {left:30%;}}
@-webkit-keyframes main_s_p {from {left:0%;} to {left:30%;}}
/*animation @keyframes 这些大家可以在网上查一下相关资料*/
</style>
<div id="header"></div>
<div id="main"><p></p></div>
<div id="footer"></div>
<script type="text/javascript">
$(window).scroll(function(){//$(window).scroll(function() 当滚动条滑动时
var juli =$(window).height() - $("#main").offset().top + document.documentElement.scrollTop ;//定义 id为main的div到可视区域底部的距离为juli， $(window).height()当前浏览器可见区域的高度，$("#main").offset().top是id为main的div到body的高度， document.documentElement.scrollTop; 为滚动条下拉时页面往上卷缩（隐藏）的高度；
if(juli>0){// 当juli大于0时，即div元素main在浏览器底部开始出现时
document.getElementById("main").className="main";// 给即div元素main添加class名称 即 class="main"
}else{
document.getElementById("main").className="";}//反之，移除class
});
</script>
</body></html>
