皇冠电子游戏登录

皇冠电子游戏登录网络

您的当前位置:首页 > 皇冠电子游戏登录动态 > 网站建设学堂 >

响应式网站建设 div元素出现时加载css3动画特效 滚动条下拉加载class sytle样式

2020-09-16 23:12:38   来源:   评论:0 点击:
响应式网站建设是当前比较流行的,可以给客户呈现高大上的视觉效果。当div元素从底部开始出现在浏览器可视区域时,给div加上classname,通过给classname添加css样式来实现响应式。
 
另外可结合
 
@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="/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>
皇冠电子游戏登录动态
网站建设学堂
网站优化学堂
网络行业皇冠电子游戏登录
皇冠电子游戏登录网络动态
推荐文章
如何查看网站哪些图片或文件影响网站打开速度?
如何让网站打开速度更快之图片压缩
大型企业网站建设需要注意的几个问题
高端企业网站建设PK低端企业网站建设
网站SEO优化是什么意思?
  • 网建
  • 优化
  • 资讯
  • 案列
  • 客服 有事点这里 有事点这里