使用原生js&&jquery实现知乎的答题功能
时间：2023-04-02 20:51:35
HTML
更新2016.12.7已打包为插件原生js插件$npminstallfoldcontent-zhihu@">=3.0.12"--saveUsagejqueryplug-在$npminstallfoldcontent-zhihu-jquery@">=1.0.1"--saveUsageUpdate2016.11.23之前的demo定义了两个按钮，一个是固定定位，一个是绝对定位，所以滚动到底部的时候，会有是两个按钮同时出现的问题，用户体验不是很好，所以改成只有一个按钮，在判断滚动到底部时添加classname改变样式。并且简化了代码ヾ(≧?≦*)ゝ滚动事件性能优化问题。当鼠标滚动时，大约每隔10~20ms触发scroll事件。与其他鼠标和键盘事件相比，它的触发频率高且间隔时间短。因此，如果滚动事件涉及位置计算、元素重绘等大量工作，而这些工作不能在下一次滚动事件触发前完成，就会导致浏览器丢帧。因此，需要减少与要执行的滚动绑定的业务逻辑。执行次数和对象初始化、常量高度值等缓存在滚动事件之外。有个bug：高速滚动时，滚动绑定的事件可能不会执行(ó﹏ò)，请问有没有更好的优化方案？示例代码和github都更新了?(ˊ?ˋ*)?Update2016.11.22优化了代码结构，存在命名不规范、jquery方法和原生js方法混合使用、代码未封装、冗余设计等问题。..审查代码已被批准。..如果不需要...就先提个?(???????)?做公司内部的mongoDB日志查询网站，前端用bootstrap，后端用nodejs做一个简单的页面，不得不说页面还是很粗糙，因为一个日志的内容很多，如果直接显示，内容太长，经常需要滚动几下才能看懂一个日志，而且经常查询几个固定键，不利于快速调试。问题已解决。需要实现的是在展示日志的时候，只展示几个经常查询的键值对。点击展开时显示所有日志，点击折叠时恢复原状。需求很简单，和知乎的displayall&&collapse功能很像，但是谷歌没有找到类似的demo，所以决定自己实现一个！下面我们去看看知乎的网页代码。原理是点击ShowAll时，如果答案超出浏览器窗口，折叠按钮就变成固定位置，js计算合适的值，底部固定为12px；当答案底部滚动到浏览器窗口时，折叠按钮变回绝对定位。ps发现知乎改版了。上一个答案底部出现在浏览器窗口后，这个位置有一个关闭按钮？按钮由固定定位变为绝对定位并改变样式，就像旁边的作者保留权利一样。风格~（图片还没上传。。暂时放弃）目前的做法是直接隐藏固定位置的收起按钮。其实我的实现方式和知乎的还是有很大区别的，因为我真的看不懂他的js代码！谁能告诉我这种情况怎么调试(ノ°ο°)ノ于是我想到了另外一种思路，在答案的右下角定义一个按钮A，判断top和y的相对位置x和y答案的底部，其中y=x+答案的高度（js获取）。当答案出现在浏览器窗口中，即x=$(window).height()时，给A加上固定定位，动态定义合适的值；当答案即将滚出浏览器窗口时，即y=$(window)。height()，A变成相对定位，右边的值永远是20px。当A的文本内容收起时，点击A的文本内容展开，解除固定定位。这里省略了连接数据库等无关的工作，只用两段有趣的文字作为demo~首先将文字内容分为两部分，all-content和part-content，就是要展示的内容折叠前和折叠后，因为还有答案折叠后显示哪部分内容的算法我还不太明白，所以简单粗暴的把折叠前和折叠后的内容分了。.这里有TODO吗？SheldonSeatTheory
在冬天，座椅离散热器足够近以保持温暖，但又不会太近而导致出汗。在夏天，它直接位于那里打开窗户所产生的交叉微风的路径上。角度既不是直接的，因此不利于交谈，也不是太宽以产生视差失真。我可以继续说下去，但是......我想我已经表达了我的观点。
在冬天，这个地方离电暖气很近，是最温暖的地方，但又不会近到让你觉得热出汗；夏天，可以吹到从两扇窗户吹进来的微风；我一边看电视一边和其他人聊天，没有受到影响，只是距离不太远，没有视觉错觉。
那是我的位置。在瞬息万变的世界中，这是一个简单的一致性点。如果我的生命被表达为四维笛卡尔坐标系中的一个函数，那么我第一次坐上去的那个点就是0000。
那是我的特殊座位。在这个瞬息万变的世界里，这是不变的。假设我的人生是用建立在四维直角坐标系中的一个方程表示的，那么这个座位从我坐上去的那一刻起就变成了（0,0,0,0）。
在冬天，座椅离散热器足够近以保持温暖，但又不会太近以致出汗。在夏天。.. 展开 vardoc=$(document);varwin=$(window);//多次使用，缓存doc.on('click','.unfold',function(){varunfold=$(this);if(unfold.text()!=='collapse'){unfold.text('fold').siblings('.part-content').hide().siblings('.all-content').show();varpanel=unfold.parent();varpanelScroll=panel.offset().top+panel.height();varscrollHeight=doc.scrollTop()+win.height();varright=win.width()/2-350+20>20?win.width()/2-350+20:20;//当点击展开按钮时，判断是否出现折叠按钮if(scrollHeight-panelScroll<50){unfold.addClass('fold-fix').css('right',right);}//绑定在滚动事件上varcb={onscroll:function(){varpanelScroll=panel.offset().top+panel.height();varscrollHeight=doc.scrollTop()+win.height();varright=win.width()/2-350+20>0?win.width()/2-350+20:20;if(scrollHeight-panelScroll<50&&panel.offset().top-scrollHeight<-90&&unfold.text()!=='展开'){unfold.addClass('fold-fix').css('right'，正确的）;}else{changeStyle(展开);}win.off("滚动",cb.onscroll);setTimeout(function(){win.on("滚动",cb.onscroll);},50);}};win.on("滚动",cb.onscroll);}else{varfold=$(this);改变风格（折叠);fold.text('expand').siblings('.part-content').show().siblings('.all-content').hide();}});functionchangeStyle(i){i.removeClass('fold-fix').css('right','20px');}这里涉及到一个知识点：网页元素的绝对位置&&相对位置的绝对网页元素的位置指的是元素的相对左上角jquery中的offset()方法返回的是整个网页左上角坐标处元素相对于文档的偏移量。此方法返回的对象包含两个整数属性：top和left。x.offset().top是x元素的绝对高度；网页元素的相对位置是指元素的左上角相对于浏览器窗口左上角的坐标。绝对位置减去页面滚动条的滚动距离就是相对位置。x.offset().top-$(document).scrollTop()是x元素的相对高度。本例需要浏览器窗口刚刚滚动到答案a的绝对定位按钮的效果，所以这个节点是答案底部的相??对高度减去浏览器窗口的高度，正好等于负号按钮一个高度。即a.offset().top+a.height()-$(document).scrollTop()-$(window).height()=-button的高度解释的很清楚了。如果你想进一步了解这个知识点，建议你阅读这篇文章。也许你会觉得豁然开朗。?(ˊ?ˋ*)?如何动态设置固定位置折叠按钮的正确值？答案的固定宽度是700px，所以浏览器窗口的宽度减去700px除以2永远是答案的正确值，因为当按钮定位绝对正确时：20px；所以对：$(window).width()/2-350+20保证固定定位和绝对定位时按钮都在一条垂直线上，过渡很自然。当浏览器窗口不断缩小时，上面计算的固定定位的按钮的右值可能是负数，这显然不符合要求，所以在计算出的右值是负数的时候设置右值20px。catch代码源码已经上传到我的github(???)?
