主要介绍本博客页面中几个常用的组件使用,这里做一个简要记录也是备忘,另外也是方便后面代码阅读,暂且算是一个API介绍吧。
注意都需要依赖jQuery库实现
滚动条动画 scroll_animate()
该组件主要是实现滚动条动画,主要用在页面导航和返回顶部按钮等这样类似的操作。参数说明:
scroll_animate({
target : num //目标值 必须
time : ms, //毫米值
step : num,//步长
type : string
//运动的速度'normal''slow''fast'
})
鼠标移入移出标题动画显示 hover_animate()
该组件主要是实现鼠标移入和移出时动画显示,主要用在图片列表中的描述显示隐藏。参数说明:
hover_animate({
parent : css-selector,
//css选择器,包含动画元素的父级元素 必须
eventTarget : css-selector,
//动画触发元素
show : css-selector,
//需要一直显示的元素
time : ms,//动画时长
type : string //运动方向
//'toTop''toBottom''toLeft''toRight'默认是'toTop'
})
该组件用于我的项目展示页面中,当鼠标移入时显示项目具体描述,移出就隐藏描述,其动画底层是由CSS3实现,有助于浏览器的页面渲染。
底部菜单按钮模块 render_bottom _bar()
主要用于按实际要求渲染底部按钮,该模块默认会生成一个底部按钮,即不输入任何参数便会生成一个底部按钮。参数说明:
render_bottom _bar({
num : num
//需要生成菜单的数量
class : string or array
//菜单添加类名可以是单个也可以是个数组,当class为数组时
//如果数组小于菜单数量,那么以最后一个class分配到多于的菜单数量
//如果数组大于菜单数量,那么多出来的class无效,不会加入
html : string or array
//生成菜单中的html内容,与class处理方式一样
})
为了使页面流畅建议该模块一次性注入,代码结构原理生成节点后加入CSS样式最后一次性注入到body中,加速页面的渲染。
页面导航数据的注入 updata_side _bar()
主要是根据一个标准布局来实现自动生成侧边栏的导航类容。参数说明:
这里说的标准布局是指,页面类容是明显的分成A\B\C\D结构,同时拥有相同的类名,即使用了一套CSS样式来布局,其次每个小节中有一个标题标签,本博客中使用的H3标签作为标准,每个小节为一个LI标签,同时li标签都有包含一个相同的class
updata_side _bar( targetEle , title )
//targetEle,表示要获取数据的目标,这里是指包含所有小节的父元素
//title, 侧边栏的标题(xxx页面导航栏、xxx清单)
说完啦! 目前我的博客已经完成基本的开发工作,主要是手机端调试,手机端触摸事件还有些BUG。