09-jquery获取元素的尺寸


元素的尺寸

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;

js

$(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;
}

09-jquery获取元素的尺寸

IT入门 感谢关注

学习地址: www.520mg.com/it

原创:https://www.panoramacn.com
源码网提供WordPress源码,帝国CMS源码discuz源码,微信小程序,小说源码,杰奇源码,thinkphp源码,ecshop模板源码,微擎模板源码,dede源码,织梦源码等。

专业搭建小说网站,小说程序,杰奇系列,微信小说系列,app系列小说

09-jquery获取元素的尺寸

免责声明,若由于商用引起版权纠纷,一切责任均由使用者承担。

您必须遵守我们的协议,如果您下载了该资源行为将被视为对《免责声明》全部内容的认可-> 联系客服 投诉资源
www.panoramacn.com资源全部来自互联网收集,仅供用于学习和交流,请勿用于商业用途。如有侵权、不妥之处,请联系站长并出示版权证明以便删除。 敬请谅解! 侵权删帖/违法举报/投稿等事物联系邮箱:2640602276@qq.com
未经允许不得转载:书荒源码源码网每日更新网站源码模板! » 09-jquery获取元素的尺寸
关注我们小说电影免费看
关注我们,获取更多的全网素材资源,有趣有料!
120000+人已关注
分享到:
赞(0) 打赏

评论抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

您的打赏就是我分享的动力!

支付宝扫一扫打赏

微信扫一扫打赏