*、上司布置了一个新的任务,要展示一篇超出页面内容的段落文字,要实现隐藏多余部分且要看的时候再展示出来,(最好动态展示并且可以收缩的功能,注意实现动画效果)括号里是我自己加上去的,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的位置,这样一来,可以保证展示的动作不至于出现只隐藏一两个字符的情况 -->截取的部分和整体部分交替显示,从而实现展开和收起的效果