侧边栏导航(移动端商品--评论--详情)随楼层滑动高亮显示
来源:互联网 发布:java软件工程师前景 编辑:程序博客网 时间:2024/05/23 16:55
demo下载地址
接触前端一年时间,开始还能感觉到自己的进步,随着时间的推移,开始不知道方向。因为各种前端的框架和插件在网上都能够找到现成的,直接下载下来用就好了。
从来不考虑其中的实现原理什么的,即便是去看了其中的源代码,也是知其然而不知其所以然。举一个简单的例子:去年圣诞公司要求页面上要有雪花飘落的效果,当时的第一想法,就是canvas绘图制作这个动画(必定培训的时候学的飞机大战有类似的效果),后来发现很难实现,于是就在网上找了一个jquery.snow.js的插件,发现原理很简单,
(一个div中加入html的雪花----设置初始的css----执行从上到下的飘落动画同时雪花在过程中透明----动画完成移除该div),克隆多个div执行前边的过程,看着是不是很简单。
我当时也这么认为,于是我就自己仿着做了一个(当时自己认为),其实就是照个抄了一遍,加了一点自己需要的功能(例如:随机雪花的颜色),然后我就认为这是自己的,在jquery的插件网站去发布,结果被拒绝了,我当时很失望但是没有找自己的原因(因为那是抄的),后来也写了一些轮播,导航点击页面滑动等(自己认为的插件),后来发现可复用性的很差,没有起到插件的作用。通过看别人的,学习了一段时间,才决定再次写一个,检验一下。
# 1.extend扩展方法
- iquery的extend方法,这是jquery插件常用的扩展方法方法,将插件的默认参数和用户自定义参数合并为一个新参数的对象。
var defaults = {floorClass : '.scroll-floor',navClass : '.scroll-nav',activeClass : 'active',activeTop : 100,scrollTop : 100,delayTime : 200};var newOptions = $.extend({}, defaults, options);# 2.建立'获取每个楼层的jquery对象,以及该楼层滑动到窗口某位置导航高亮的TOP值,点击导航页面对应楼层滑动到窗口的某位置的TOP值'的函数
function getItem(_list,newOptions){_list.each(function() { var item = {}; item.$obj = $body.find(this); item.$activeTop = $body.find(this).offset().top - newOptions.activeTop; item.$scrollTop = $body.find(this).offset().top + newOptions.scrollTop; data.push(item); });}# 3.建立'滚动监听函数,同时激活侧边栏导航高亮显示'的函数
function scrollActive(_list,newOptions){var nowScrollTop = $(window).scrollTop();$.each(data,function(i,item){if(nowScrollTop > item.$activeTop){_list.removeClass(newOptions.activeClass).eq(i).addClass(newOptions.activeClass);}});}# 4.建立'点击激活侧边栏导航高亮显示'的函数
function clickActive(_index,newOptions){$('html,body').animate({'scrollTop' : data[_index].$scrollTop},newOptions.delayTime);}# 5.插件接口的制作
var scroll_floor = window.scrollFloor = function(options){var newOptions = $.extend({}, defaults, options);var floorList = $body.find(newOptions.floorClass),navList = $body.find(newOptions.navClass);getItem(floorList,newOptions);scrollActive(navList,newOptions); $(window).bind('scroll',function(){scrollActive(navList,newOptions);}); navList.bind('click',function(){ var _index = $body.find(this).index(); clickActive(_index,newOptions); });}# 6.完整插件的代码
(function(window){var defaults = {floorClass : '.scroll-floor',navClass : '.scroll-nav',activeClass : 'active',activeTop : 100,scrollTop : 100,delayTime : 200};var $body = $('body'),data = [];function getItem(_list,newOptions){_list.each(function() { var item = {}; item.$obj = $body.find(this); item.$activeTop = $body.find(this).offset().top - newOptions.activeTop; item.$scrollTop = $body.find(this).offset().top + newOptions.scrollTop; data.push(item); });}function scrollActive(_list,newOptions){var nowScrollTop = $(window).scrollTop();$.each(data,function(i,item){if(nowScrollTop > item.$activeTop){_list.removeClass(newOptions.activeClass).eq(i).addClass(newOptions.activeClass);}});}function clickActive(_index,newOptions){ $('html,body').animate({'scrollTop' : data[_index].$scrollTop},newOptions.delayTime); }var scroll_floor = window.scrollFloor = function(options){var newOptions = $.extend({}, defaults, options);var floorList = $body.find(newOptions.floorClass),navList = $body.find(newOptions.navClass);getItem(floorList,newOptions);scrollActive(navList,newOptions); $(window).bind('scroll',function(){scrollActive(navList,newOptions);}); navList.bind('click',function(){ var _index = $body.find(this).index(); clickActive(_index,newOptions); });}})(window);# 7.总结
该插件参考了会找人web端首页动画的js,就是先将所有楼层查找出来,然后将其需要的各个参数放入一个对象,滚动的监听的时候对该数组循环比对的思路。
思路对一个插件的制作很重要,就像我开始第一次制作这个插件的时候,就是将所有楼层的参数放到一个数组,然后对各个区间判断,这样就会使问题复杂话,同时还不好控制。
程序员的思路很重要,最开始可以很死板的按照步骤来,但是当我们慢慢的进化,就需要不断的对代码优化,每次优化都是一次学习,慢慢的不知不觉就会发现原来你会的雪莱越多。
例如:
if(nowScrollTop > item.$activeTop){_list.removeClass(newOptions.activeClass).eq(i).addClass(newOptions.activeClass);}替换为:
nowScrollTop > item.$activeTop&&_list.removeClass(newOptions.activeClass).eq(i).addClass(newOptions.activeClass);开始都一样,但是它培养了我们写代码的习惯,越写越简单。不对的地方敬请指正!!!
类似京东(商品----详情----评论)页面
wap效果地址:https://rattenking.github.io/demo/06/scrollFloorWap.html
wap效果图:
下载wap的demo:
http://www.jq22.com/jquery-info15387
类似京东首页楼层
web效果地址:https://rattenking.github.io/demo/06/scrollFloorWeb.html
web效果图:
下载web的demo:
http://www.jq22.com/jquery-info15387
- 侧边栏导航(移动端商品--评论--详情)随楼层滑动高亮显示
- 点击按钮滑动显示侧边导航栏
- 仿约会吧应用详情页,评论栏随Recyclerview滑动左右移动
- 让zen cart商品评论显示在商品详情页面
- jQuery高仿真移动手机滑动侧边栏布局插件
- 仿淘宝商品详情-点击显示大图,可滑动
- 商品详情的显示
- 移动端导航滑动案例
- 类似天猫商品详情随浏览器移动
- ecshop文章侧边栏导航,自动调用文章多级子栏目分类并且当前栏目及父栏目高亮显示
- 移动端侧边栏slideout
- 商品详情页显示商品的详细信息
- 14.首页点击商品显示商品详情
- 仿微信移动端的底部导航切换,显示高亮文字和图片
- 导航高亮显示
- 基于slideout.js实现的移动端侧边栏滑动特效
- 基于slideout.js实现的移动端侧边栏滑动特效
- android 仿天猫商品详情界面滑动效果
- python练习(十四)
- 数据类型
- Git的安装
- 【Python】使用Python模拟设备接入阿里云物联网的MQTT服务器
- pyapp体验版本发布--一款全新的app自动化测试框架
- 侧边栏导航(移动端商品--评论--详情)随楼层滑动高亮显示
- 5个你可能不知道的CSS属性
- 挂载大于2TB硬盘
- hive
- Bundles of Joy
- 彩票建模分析
- 立式加工中心换刀系统故障处理方法(图解)
- 反转链表
- Hadoop 对比 Spark