09-jquery获取元素的尺寸

布满荆棘的人生 2022-12-08 14:13 182阅读 0赞

# 元素的尺寸 #

*  height()
 *  width()  
    内容的宽 不含padding marign
 *  innerHeight()
 *  innerWidth()  
    内容的宽加上padding
 *  outerHeight()
 *  outerWidth()  
    内容的宽+padding+borderWidth(元素的实际宽)
 *  outerHeight(true)
 *  outerWidth(true)  
    是内容的宽+padding+borderWidth(元素的实际宽)+margin
 *  $(window).width(); 窗口的宽
 *  $(window).height();窗口的高

# jquery无缝滚动案例 #

html

<h3>最新动态</h3>
    <div class="scrollNews" >
      <ul>
    	 <li><a href="#" class="tooltip" title="甜美宽松毛衣今秋一定红.">甜美宽松毛衣今秋一定红.</a></li>
    	 <li><a href="#" class="tooltip" title="秋装百搭小马甲不到50元.">秋装百搭小马甲不到50元.</a></li>
    	 <li><a href="#" class="tooltip" title="修身韩版小西装万人疯抢.">修身韩版小西装万人疯抢.</a></li>
    	 <li><a href="#" class="tooltip" title="夏末雪纺店主含泪大甩卖.">夏末雪纺店主含泪大甩卖.</a></li>
    	 <li><a href="#" class="tooltip" title="瑞丽都疯狂推荐的秋装.">瑞丽都疯狂推荐的秋装.</a></li>
    	 <li><a href="#" class="tooltip" title="48元长款针织小开衫卖疯啦.">48元长款针织小开衫卖疯啦.</a></li>
             <li><a href="#" class="tooltip" title="长袖雪纺衫单穿内搭都超美.">长袖雪纺衫单穿内搭都超美.</a></li>
      </ul>
    </div>

分析

> 1，ul整体 向上慢慢的走一个li的高度（margin-top为负值）  
> 2，ul的第一个li放到最后面  
> 3，ul整体突然快速margin-top：0；

$(function(){ 
      var timeid;
      var h=$(".scrollNews ul li:eq(0)").outerHeight();//获取li元素的高
    	
      function move(){ 
    		//1 ul整体 向上慢慢的走一个li的高度（margin-top为负值
    		//最后一个function 是指 动画执行完毕后要做的函数
        $(".scrollNews ul").animate(
            { "margin-top":-h},
            500,
            function(){ 
        		//2,ul的第一个li放到最后面
        	    var fi=$(".scrollNews ul li:eq(0)");
        	    $(".scrollNews ul").append(fi);
        		//3,ul整体突然快速margin-top：0；
        	    $(".scrollNews ul").css("margin-top",0);
            	    timeid=setTimeout(function(){  move()},1500)
    	    }//回调函数 
    	); //animate ed
      }//move ed
       
      // 鼠标放上ul停止动画 鼠标离开开始动画
      $(".scrollNews").hover(function(){ 
    	clearTimeout(timeid);
      },function(){ 
    	move();
      }).trigger("mouseleave")
     //默认自动触下鼠标离开 
    })

css

*{  padding:0; padding:0;}
    body{  padding:50px;}
    ul,ol{  list-style:none;}
    h3,div,ul,li,ol{  margin:0; padding:0;}
    .global_module h3{ 
        height:35px;
        line-height:35px; 
        text-align:center; 
        background-color:#369; 
        color:#f6f6f6;
    }
    .news ul li{ 
        height:30px; 
        line-height:30px; 
        padding-left:15px;
        color:#666; border-
        bottom:1px dashed #d0d0d0; 
    }
    .scrollNews{ 
        height:150px; 
        overflow:hidden; 
        border: 1px solid red;
    }
    .news{  
        width:220px;
        border:1px solid #36C;
    }

![IT入门 感谢关注][IT_]

IT入门 感谢关注

学习地址： [www.520mg.com/it][www.520mg.com_it]

[IT_]: /images/20221123/c063fb5d11ab4096bb4b113dbb7db0d8.png
[www.520mg.com_it]: https://520mg.com/it/#/main/334