05-jquery-CSS 相关操作

CSS 相关操作

CSS()方法

    // 获取元素的css
    $("h1").css("font-size");
    
    // 设置css
    $("h1").css("font-size","14px");
    
    // 设置多个css属性
    $("h1").css({
    
    "font-size"："14px","color":"red"});
    

位置

offset()
获取匹配元素在当前视口的相对偏移。
返回的对象包含两个整形属性：top 和 left。

position()
获取匹配元素相对父元素的偏移。
返回的对象包含两个整形属性：top 和 left。

scrollLeft()
获取匹配元素相对滚动条左侧的偏移; scrollLeft(300)
设置元素相对滚动条左边的偏移值

scrollTop()
获取匹配元素相对滚动条上边的偏移; scrollTop(300)
设置元素相对滚动条上边的偏移值

案例 固定到顶部的导航

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 不然会被遮盖到下面*/
}

案例-导航下拉

作者：曾庆林
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 浏览器不支持除a以外元素的:hover 事件
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入门 感谢关注

练习地址： www.520mg.com/it