Html之滚动吧DIV

*、上司布置了一个新的任务，要展示一篇超出页面内容的段落文字，要实现隐藏多余部分且要看的时候再展示出来，（最好动态展示并且可以收缩的功能，注意实现动画效果）括号里是我自己加上去的，O(∩_∩)O哈哈~。

 

*、首先梳理下DIV高度变化知识点（其实已经完成了，就在附件里）

$("#divId").css("height");获取高度
$("#divId").css("height",val+"px");设置高度，注意px单位
ps:height只能实现一次最少+-(1)的最小单位，反正我尝试了是这样

 

*、接着开始操作height时发现了一个搞笑的事情，div的高度在变，可是当前页面不动，那能看到什么呢？呵呵，于是需要汲取下面的营养点

$(window).height();代表当前窗口的实际高度
$(document).height()；代表当前页面文档且包含滚动上去的高度
$(document).scrollTop();代表当前滚动条距离整个文档顶端的高度
ps:那么？
是否到达顶端：$(document).scrollTop()<=0
是否到达底端：($(document).height()-$(window).height()-$(document).scrollTop())<=0

 

*、然后肯定不能人去每秒不间断的点击对吧，所以就要用到神奇的定时器了，可是发现关不掉，我倒，我也不知道问题出在哪里，于是用了下面的方法，ε=(´ο｀*)))唉

对，没错，这次没有代码，哈哈
解决方法就是：在setInterval内部的function中添加状态，然后在某个特定状态下clearInterval(barName)即可
why?why?why?

 

 *、附件中的代码还有很多地方待优化哈哈，有时间再钻进去看喽

比如根据内容的长度自动计算出div或其他容器的高度
比如自定义展开和收起的速度
比如定时器的关闭策略的优化
比如写成闭包提供给别人直接调用
ε=(´ο｀*)))唉
要学习的还有好多，学习使我快乐，(*^▽^*)

 

 *、一个搞数据专员的同事无意间看到我在调试，然后我说展开的时候不能准确的检测高度，所以会有课空白，他说那就换个方式不可以吗？比如瞬间全部展示，额~

其实我想过，也实现过了，height改成auto就哦了。
然后我就调成auto，测试了一把，虽然展示的时候（不知道怎么说，貌似也没什么影响哎）
于是乎，展开用瞬间，一行代码就哦了，收起的时候用动态的，真棒，哈哈
好景不长。。。
比如说领导说收起的时候要什么动画，多余，于是乎收起也变成瞬间的了。ε=(´ο｀*)))唉
比如显示字数和定位高度的对应关系其实是有bug的，所以改呀。
-->然后就改成了截取的方式，截取又遇到标签截取一半的情况（定位到标签的每一个字符，然后特殊处理，比如重新定位截取地址）
-->另外一个想法是:超过800字符进行截取，但是截取的坐标不是800而是600的位置，这样一来，可以保证展示的动作不至于出现只隐藏一两个字符的情况
-->截取的部分和整体部分交替显示，从而实现展开和收起的效果