网站前端制作上下滚动效果(按钮控制)_成都网站搭建
在网站制作中,首页一般都会有新闻推荐列表之类的,页面布局时,新闻列表给的区域大小不够或者预估以后上传内容很多,这时前端人员需要做出隐藏多出的内容上下滑动显示剩余的内容,前端人员做出这样的效果时,就会出现滚动条影响美观,一般我们会隐藏掉滚动条,但这样又不突出这里的内容时可以上下滚动的,所以需要有上下两个按钮来提示我们这里是可以做上下滚动显示其内容的。效果图如下:
如图所示左边写了个类似新闻的列表,默认显示3个,右边是控制其上下的两个按钮。HTML图如下:
JS图如下:
通过varscroll=$(.quick-links.roll).height()获取外层的高度,这个高度是先设定好的,也就是显示的区域高度,然后varscroll_Ul=$(.quick-links.rollul).height()获取实际内容的高度,就是每一条新闻列表加起来的总高度,通过if判断当前的内容总高度有没有大于显示区域的高度(没有大于显示区域的高度就不用滚动显示了),当大于显示高度时,点击往下按钮,通过varscroll_Top=$(.quick-links.roll).scrollTop()获取varscroll_Ul顶部距离scroll顶部的距离,scroll_Top=scroll_Top+44这个值是每次点击往下按钮所累加的值,因为这里列表每一条的高度是44,所以每次加44,最后通过animate动画来滚动。往上按钮也是一样的道理。滚动的效果如图:
网站前端制作上下滚动效果(按钮控制)_成都网站搭建 https://cdnanqi.cn/wangzhanzhizuo/11373.html
- seo优化技术是解决网站流量转化的好方法-成都SEO优化
- 网页信噪比是什么?怎样提高网页信噪比?_宜宾seo优化
- 最近百度K站严重,有什么好的方法吗-都江堰seo优化快排
- SEM竞价员进阶高管之路必经的7个过程,你准备好改变了吗?_竞价托管
- 网站设计:解开创意:克服创意障碍的8个实用技巧_成都网站制作
- 网站关键词挖掘与关键词分析_宜宾seo优化
- SEO优化对网站运营起着什么作用-成都seo优化-成都网站优化
- 挖掘百度关键词时应明辨搜索引擎给出排名的错误预测-成都seo网站关键词优化
- 实现企业站点盈利需要将SEO技术与网络营销相融合_宜宾seo优化
- 如何利用百度资源平台挖掘核心关键词-成都seo优化-成都网站优化