CSS related operations
CSS() method
// 获取元素的css
$("h1").css("font-size");
// 设置css
$("h1").css("font-size","14px");
// 设置多个css属性
$("h1").css({
"font-size"："14px","color":"red"});
position
offset()
Get the relative offset of the matched element in the current viewport.
The returned object contains two shaping attributes: top and left.
position()
Get the offset of the matched element relative to the parent element.
The returned object contains two shaping attributes: top and left.
scrollLeft()
gets the offset of the matched element relative to the left side of the scroll bar; scrollLeft(300)
sets the offset value of the element relative to the left side of the scroll bar
scrollTop()
gets the offset of the matched element relative to the top of the scroll bar; scrollTop(300)
sets the offset value of the element relative to the top of the scroll bar
Case fixed to the top navigation
html
<h3>offset 距离</h3>
<div class="banner">banner</div>
<div class="nav">nav</div>
<p>line1</p>
<p>line2</p>
...
<p>line99</p>
<p>line100</p>
js
// 思路：只要滚动的距离 大于 元素 nav 距页面顶部的距离 让 nav 固定定位 else 就 默认定位
$(function(){
var offT=$(".nav").offset().top;
//nav 距离顶部的距离
$(window).scroll(function(){
//窗口发生滚动事件
var scrollT=$(window).scrollTop();
//窗口滚动条滚过去的距离
if(scrollT>offT){
//如果大于这个距离添加一个固定的class
$(".nav").addClass("fixed")
$("body").css("padding-top","50px")
}else{
$(".nav").removeClass("fixed")
$("body").css("padding-top","0")
}
})
})
CSS
.banner{
height:500px ;
background-color:lightgreen;
}
.nav{
height: 50px;
background-color: lightsalmon;
}
.fixed{
position: fixed;
top: 0;
width: 100%;
left: 0;
z-index: 10;
/* 注意要写 z-index 不然会被遮盖到下面*/
}
Case-Navigation drop down
Author: Zeng Qinglin
html
<div class="nav" id="navigation">
<ul>
<li><a href="#">网站首页</a></li>
<li><a href="#">关于我们</a>
<ul>
<li><a href="#">企业文化</a></li>
<li><a href="#">企业文化</a></li>
<li><a href="#">企业文化</a></li>
</ul>
</li>
<li><a href="#">新闻资讯</a></li>
<li><a href="#">产品中心</a>
<ul>
<li>
<a>消防器材</a>
<ul>
<li><a href="#">照明系列</a></li>
<li><a href="#">防护系列</a></li>
<li><a href="#">破拆系列</a></li>
<li><a href="#">救生系列</a></li>
<li><a href="#">警戒系列</a></li>
<li><a href="#">其它系列</a></li>
</ul>
</li>
<li><a>工矿企业产品</a>
<ul>
<li><a href="#">照明系列</a></li>
<li><a href="#">机电设备系列 </a></li>
<li><a href="#">产品配件系列</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">招贤纳士</a></li>
<li><a href="#">客户留言</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</div>
js
$(function(){
//只要 li（有ul）被hover 让里面的ul 下拉显示
//只要 li（有ul）被out 让里面的ul 隐藏
$("li:has(ul)").hover(function(){
var myul=$(this).children("ul");
if(myul.is(":animated")){
myul.stop(true,true);
// stop(停止到队列动画，并回到最终状态)
}
myul.slideToggle()//第一次显示 第二次隐藏，第三次显示
})
})
ie6 browser does not support elements other than a: hover event
css
body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div,dt,dl,dd{
margin:0;padding:0;border:0;font-size:12px;font-family:"微软雅黑";}
ul li{
list-style:none;}
.nav{
width:980px; height:34px;margin-top:23px; margin:0 auto; }
.nav ul{
width:980px; height:34px; background: #069;}
.nav ul li{
width:140px; height:34px; background: #069; float:left; position:relative;}
.nav ul li a{
width:140px; height:34px; line-height:34px; text-align:center; display:block; color:#FFF; font-size:14px; text-decoration:none;}
.nav ul li a:hover{
background-color:rgb(31,201,244);}
.nav ul li ul{
position:absolute; left:0px; top:34px; width:140px; height:auto; display:none; }
.nav ul li ul li{
float:none; position:relative;}
.nav ul li ul li ul{
left:140px; top:0px; width:140px;}
IT Getting Started Thank attention
Practice address: www.520mg.com/it