原生Js实现按的数据源均分时间点幻灯片效果(已封装)


Posted in Javascript onDecember 28, 2010

建议在Chrom,Firefox,Opera,Safari等标准浏览器中查看. Ie下没有阴影及圆角.

实现了根据源数据(样例中是一个JSON数据组)总条数, 均分出时间点以平滑向右动画方式显示在时间线上, 当鼠标划过时间点时, 显示对应的日期及标题. 鼠标划过事件, 充分考虑了用户体验, 当用户快速(无意识移动)从时间点上划过时, 并不触发相应事件.

相关的方法说明及使用, 请参见下面的注释或发评论, 同时也欢迎大家找bug并提交.
原生Js实现按的数据源均分时间点幻灯片效果(已封装)
Js核心代码点此查看样例

var JSONData=[{...},{...},...];//数据源,一切皆因它而生,因它而灭 function iTimePoint(iTimeSlideId, dateId, timeLineId, titleTop, titleId, defaultShow){ 
/* 传入参数说明: 
* iTimeSlideId: 外围ID名. 本样例DOM中#itimeslide; 
* dateId: 日期ID名. 本样例DOM中#date; 
* timeLineId: 时间点分布ID名. 本样例DOM中#timeline; 
* titleTop: 标题容器上方小三角ID名. 本样例DOM中#titletop; 
* titleId: 标题容器ID名. 本样例DOM中#title; 
* defaultShow: 设定初始显示的时间点, 默认为0, 可不传值 
*/ 
//参数判断,测试用,成功运行后可删除 
if (arguments.length < 5 || arguments.length>6) { 
alert('参数传入错误,请传入5或6个值! :)'); 
return false; 
} 
//通用方法 
var iBase = { 
//document.getElementById 
Id: function(name){ 
return document.getElementById(name); 
}, 
//时间点动画显示 
PointSlide: function(elem, val){ 
//可通过修改i+=5中的5控制滑动速度 
for (var i = 0; i <= 100; i += 5) { 
(function(){ 
//这个pos定义很重要,若直接使用闭包获取到的不是上面的i 
var pos = i; 
//平滑移动 
setTimeout(function(){ 
elem.style.left = pos * val / 100 + 'px'; 
}, (pos + 1) * 10); 
})(); 
} 
}, 
//为元素添加样式 
AddClass: function(elem, val){ 
//若元素无class,直接赋值 
if (!elem.className) { 
elem.className = val; 
}else { 
//否则通过添加空格新增一个class 
var oVal = elem.className; 
oVal += ' '; 
oVal += val; 
elem.className = val; 
} 
}, 
//获取元素索引 
Index: function(cur, obj){ 
for (var i = 0; i < obj.length; i++) { 
if (obj[i] == cur) { 
return i; 
} 
} 
} 
} 
//整个函数变量定义区 
var dataLen = JSONData.length; 
var iTimeSilde = iBase.Id(iTimeSlideId); 
var date = iBase.Id(dateId); 
var timeLine = iBase.Id(timeLineId); 
var titletop = iBase.Id(titleTop); 
var title = iBase.Id(titleId); 
var iTimeSildeW = iTimeSilde.offsetWidth;//幻灯区实际宽度 
var timePoint = document.createElement('ul');//用来存储时间点的ul 
var timePointLeft = null;//时间点相对于父元素左边距离 
var timePointLeftCur = null;//每两个时间点间距 
var pointIndex = 0;//时间点在队列中的索引值 
var defaultShow = defaultShow || 0;//默认显示的时间 
var clearFun=null;//当用户无意识的划过时中止执行 
var that=null; 
//根据数据条数生成对应的时间点html 
for (var i = 0; i < dataLen; i++) { 
timePoint.innerHTML += '<li></li>'; 
} 
//将时间点插入到时间线DIV中 
timeLine.appendChild(timePoint) 
var timePoints = timeLine.getElementsByTagName('li'); 
//时间点平滑显示 
for (var i = 0; i < timePoints.length; i++) { 
//每两个时间点间间距 
timePointLeftCur = parseInt(iTimeSildeW / (dataLen + 1)); 
//计算对应时间点左边距 
timePointLeft = (i + 1) * timePointLeftCur; 
//时间点动画形式初始化 
iBase.PointSlide(timePoints[i], timePointLeft); 
//初始显示时间点 
setTimeout(function(){ 
timePoints[defaultShow].onmouseover(); 
}, 1200); 
//获取时间点默认class值,为鼠标事件做准备 
timePoints[i].oldClassName = timePoints[i].className; 
timePoints[i].onmouseover = function(){ 
that = this;//确保clearFun中的this是当前的this 
//提升用户体验,当用户无意识地划过时不执行函数 
clearFun=setTimeout(function(){ 
//计算出当前时间点索引值,为鼠标划出做准备 
pointIndex = iBase.Index(that, timePoints); 
//去除上一个时间点高亮样式 
for (var m = 0; m < timePoints.length; m++) { 
if (m != pointIndex) { 
timePoints[m].className = timePoints[m].oldClassName 
} 
} 
//为当前时间点加载高亮样式 
iBase.AddClass(that, 'hover'); 
//切换日期及标题值 
date.innerHTML = '<span>' + (JSONData[pointIndex]['date'] || '') + '</span><EM></EM>'; 
title.innerHTML = '<a href="' + (JSONData[pointIndex]['href'] || '') + '">' + (JSONData[pointIndex]['title'] || '') + '</a>'; 
//改变日期及标题的位置,此处减去的数字,可根据实际样式调整 
date.style.left = ((pointIndex + 1) * timePointLeftCur - 25) + 'px'; 
titletop.style.left = ((pointIndex + 1) * timePointLeftCur + 6) + 'px'; 
//当标题框左边距与标题框宽度之和大于外围宽度时,以右边为绝对点 
if ((title.offsetWidth + (pointIndex + 1) * timePointLeftCur) < iTimeSildeW) { 
title.style.left = ((pointIndex + 1) * timePointLeftCur - timePointLeftCur) + 'px'; 
}else { 
title.style.left = (iTimeSildeW - title.offsetWidth) + 'px'; 
} 
//显示日期/时间点/标题 
date.style.display = 'block'; 
titletop.style.display = 'block'; 
title.style.display = 'block'; 
},200);//200为认定无意识划过的时间,可自行调节 
} 
timePoints[i].onmouseout = function(){ 
//若停留时间低于200ms,认定为无意识划过,中止函数 
clearTimeout(clearFun); 
} 
} 
}
Javascript 相关文章推荐
Jquery 学习笔记(一)
Oct 13 Javascript
关于JavaScript的面向对象和继承有利新手学习
Jan 11 Javascript
JavaScript给按钮绑定点击事件(onclick)的方法
Apr 07 Javascript
jQuery表格插件datatables用法详解
Nov 23 Javascript
vue自定义指令实现v-tap插件
Nov 03 Javascript
JavaScript字符串检索字符的方法
Jun 23 Javascript
js仿微信抢红包功能
Sep 25 Javascript
vue中的模态对话框组件实现过程
May 01 Javascript
浅谈Webpack核心模块tapable解析
Sep 11 Javascript
详解vue 数组和对象渲染问题
Sep 21 Javascript
Element Collapse 折叠面板的使用方法
Jul 26 Javascript
Vue中关闭弹窗组件时销毁并隐藏操作
Sep 01 Javascript
按给定几率进行随机抽取的js代码
Dec 28 #Javascript
围观tangram js库
Dec 28 #Javascript
让你的博文自动带上缩址的实现代码,方便发到微博客上
Dec 28 #Javascript
JS弹出对话框返回值代码(asp.net后台)
Dec 28 #Javascript
jQuery Tips 为AJAX回调函数传递额外参数的方法
Dec 28 #Javascript
JavaScript去掉空格的方法集合
Dec 28 #Javascript
js常用排序实现代码
Dec 28 #Javascript
You might like
PHP实现将HTML5中Canvas图像保存到服务器的方法
2014/11/28 PHP
PHP SPL标准库之接口(Interface)详解
2015/05/11 PHP
通用于ie和firefox的函数 GetCurrentStyle (obj, prop)
2006/12/27 Javascript
javascript removeChild 使用注意事项
2009/04/11 Javascript
checkbox 复选框不能为空
2009/07/11 Javascript
javascript类型转换使用方法
2014/02/08 Javascript
浅析webapp框架AngularUI的demo
2014/12/21 Javascript
JavaScript更改字符串的大小写
2015/05/07 Javascript
Node.js实用代码段之正确拼接Buffer
2016/03/17 Javascript
针对JavaScript中this指向的简单理解
2016/08/26 Javascript
javascript简单进制转换实现方法
2016/11/24 Javascript
Angular ng-repeat指令实例以及扩展部分
2016/12/26 Javascript
jquery 仿锚点跳转到页面指定位置的实例
2017/02/14 Javascript
jQuery实现获取h1-h6标题元素值的方法
2017/03/06 Javascript
jquery实现异步加载图片(懒加载图片一种方式)
2017/04/24 jQuery
JS中的数组转变成JSON格式字符串的方法
2017/05/09 Javascript
微信小程序项目总结之点赞 删除列表 分享功能
2018/06/25 Javascript
React实现全局组件的Toast轻提示效果
2018/09/21 Javascript
js基础之事件捕获与冒泡原理
2019/10/09 Javascript
分享一款超好用的JavaScript 打包压缩工具
2020/04/26 Javascript
在vue-cli创建的项目中使用sass操作
2020/08/10 Javascript
python引用DLL文件的方法
2015/05/11 Python
关于python的list相关知识(推荐)
2017/08/30 Python
Python使用matplotlib绘制随机漫步图
2018/08/27 Python
mac PyCharm添加Python解释器及添加package路径的方法
2018/10/29 Python
Python button选取本地图片并显示的实例
2019/06/13 Python
在Python中os.fork()产生子进程的例子
2019/08/08 Python
Python列表list常用内建函数实例小结
2019/10/22 Python
Python终端输出彩色字符方法详解
2020/02/11 Python
基于TensorBoard中graph模块图结构分析
2020/02/15 Python
Python requests上传文件实现步骤
2020/09/15 Python
CSS3制作3D立方体loading特效
2020/11/09 HTML / CSS
自荐书模板
2013/12/19 职场文书
模特职业生涯规划范文
2014/02/26 职场文书
gateway与spring-boot-starter-web冲突问题的解决
2021/07/16 Java/Android
PC版《死亡搁浅导剪版》现已发售 展开全新的探险
2022/04/03 其他游戏