原生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 相关文章推荐
javascript中使用css需要注意的地方小结
Sep 01 Javascript
javascript克隆对象深度介绍
Nov 20 Javascript
文件编码导致jquery失效的解决方法
Jun 26 Javascript
jquery.validate的使用说明介绍
Nov 12 Javascript
jquery操作复选框(checkbox)的12个小技巧总结
Feb 04 Javascript
JavaScript的null和undefined区别示例介绍
Sep 15 Javascript
Javascript中内建函数reduce的应用详解
Oct 20 Javascript
JavaScript 上传文件(psd,压缩包等),图片,视频的实现方法
Jun 19 Javascript
微信小程序报错:this.setData is not a function的解决办法
Sep 27 Javascript
JavaScript门道之标准库
May 26 Javascript
使用bootstrap实现下拉框搜索功能的实例讲解
Aug 10 Javascript
JavaScript创建防篡改对象的方法分析
Dec 30 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
为了这两部电子管收音机,买了6套全新电子管和10粒刻度盘灯泡
2021/03/02 无线电
php递归使用示例(php递归函数)
2014/02/14 PHP
PHP 之 写时复制介绍(Copy On Write)
2014/05/13 PHP
PHP常用算法和数据结构示例(必看篇)
2017/03/15 PHP
PHP之认识(二)关于Traits的用法详解
2019/04/11 PHP
jQuery Study Notes学习笔记 (二)
2010/08/04 Javascript
自写的一个jQuery圆角插件
2010/10/26 Javascript
jQuery操作checkbox选择(list/table)
2013/04/07 Javascript
jQuery动态设置form表单的enctype值(实现代码)
2013/07/04 Javascript
JavaScript将当前时间转换成UTC标准时间的方法
2015/04/06 Javascript
jQuery EasyUI datagrid在翻页以后仍能记录被选中行的实现代码
2016/08/15 Javascript
HTML5基于Tomcat 7.0实现WebSocket连接并实现简单的实时聊天
2016/10/31 Javascript
使用travis-ci如何持续部署node.js应用详解
2017/07/30 Javascript
React + webpack 环境配置的方法步骤
2017/09/07 Javascript
详解vue-cli之webpack3构建全面提速优化
2017/12/25 Javascript
详解webpack模块化管理和打包工具
2018/04/21 Javascript
JS中call和apply函数用法实例分析
2018/06/20 Javascript
JS实现select选中option触发事件操作示例
2018/07/13 Javascript
Jquery实现无缝向上循环滚动列表的特效
2019/02/13 jQuery
实例详解带参数的 npm script
2019/05/28 Javascript
微信小程序实现购物车功能
2020/11/18 Javascript
Python中无限元素列表的实现方法
2014/08/18 Python
在Python中使用poplib模块收取邮件的教程
2015/04/29 Python
总结Python中逻辑运算符的使用
2015/05/13 Python
python抽象基类用法实例分析
2015/06/04 Python
python远程连接MySQL数据库
2019/04/19 Python
win10系统Anaconda和Pycharm的Tensorflow2.0之CPU和GPU版本安装教程
2019/12/03 Python
Python BeautifulReport可视化报告代码实例
2020/04/13 Python
GAP欧盟网上商店:GAP EU
2016/09/13 全球购物
世界顶级户外运动品牌折扣网站:LeftLane Sports
2019/06/12 全球购物
双立人加拿大官网:Zwilling加拿大
2020/08/10 全球购物
信息总监管理职责范本
2014/03/08 职场文书
荷叶母亲教学反思
2014/04/30 职场文书
2014年高三班主任工作总结
2014/12/05 职场文书
技术员个人工作总结
2015/03/03 职场文书
Python循环之while无限迭代
2022/04/30 Python