元素的尺寸
- 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;
}
IT入门 感谢关注
学习地址: www.520mg.com/it
(1)Python所有方向的学习路线(新版)
这是我花了几天的时间去把Python所有方向的技术点做的整理,形成各个领域的知识点汇总,它的用处就在于,你可以按照上面的知识点去找对应的学习资源,保证自己学得较为全面。
最近我才对这些路线做了一下新的更新,知识体系更全面了。
(2)Python学习视频
包含了Python入门、爬虫、数据分析和web开发的学习视频,总共100多个,虽然没有那么全面,但是对于入门来说是没问题的,学完这些之后,你可以按照我上面的学习路线去网上找其他的知识资源进行进阶。
(3)100多个练手项目
我们在看视频学习的时候,不能光动眼动脑不动手,比较科学的学习方法是在理解之后运用它们,这时候练手项目就很适合了,只是里面的项目比较多,水平也是参差不齐,大家可以挑自己能做的项目去练练。
网上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。
一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!