元素的尺寸

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入门感谢关注

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

09-jquery获取元素的尺寸相关推荐

jquery获取元素在文档中的位置信息以及滚动条位置（转）
jquery获取元素在文档中的位置信息以及滚动条位置 http://blog.csdn.net/qq_34095777/article/details/78750886 原文链接原创 201 ...
jquery获取元素宽高
前言 jquery获取元素宽高 <!DOCTYPE html> <html lang="zh" > <head><meta charset ...
jquery获取元素的索引_如何在jQuery中获取具有特定索引的元素
jquery获取元素的索引 In this post, we are going to discuss how to get an element with a specific index. jQu ...
html获取边缘元素,JQuery 获取元素到浏览器可视窗口边缘的距离
获取元素到浏览器可视窗口边缘的距离 by:授客 QQ:1033553122 1.测试环境 JQuery-3.2.1.min.js 下载地址: https://gitee.com/ishouke/fro ...
jquery获取元素索引值index()
jquery获取元素索引值index() 作者: 梅川内酷于 13-04-26 热度:384 jquery获取元素索引值index()方法: jquery的index()方法搜索匹配的元素,并返回 ...
jquery获取元素四种方式。
jquery获取元素四种方式. 当你成功引入jquery插件之后,就可以用jquery的语法来获取html元素. js获取只有document.getElementById或者通过名称来获取. 而jq ...
js jquery 获取元素(父节点,子节点,兄弟节点),元素筛选
js jquery 获取元素(父节点,子节点,兄弟节点) 一,js 获取元素(父节点,子节点,兄弟节点) var test = document.getElementById("test&q ...
使用jQuery获取元素类型
本文翻译自:Get element type with jQuery Is it possible, using jQuery, to find out the type of an element ...
js jquery 获取元素(父节点,子节点,兄弟节点)
js jquery 获取元素(父节点,子节点,兄弟节点) js 获取元素(父节点,子节点,兄弟节点) var test = document.getElementById("test&quo ...
css基础---使用offsetWidth和offsetHeight获取元素的尺寸
获取元素的尺寸(display显示情况和display:none两种情况来获取) offsetWidth表示元素在页面中所占用的总宽度 offsetHeight表示元素在页面中所占用的总高度 &l ...

09-jquery获取元素的尺寸

元素的尺寸

jquery无缝滚动案例

09-jquery获取元素的尺寸相关推荐

最新文章

热门文章