原生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 相关文章推荐
Div自动滚动到末尾的代码
Oct 26 Javascript
javascript通过class来获取元素实现代码
Feb 20 Javascript
javascript中setTimeout的问题解决方法
May 08 Javascript
node.js入门教程
Jun 01 Javascript
jQuery $命名冲突解决方案汇总
Nov 13 Javascript
JavaScript对象之深度克隆介绍
Dec 08 Javascript
JSON 的正确用法探讨:Pyhong、MongoDB、JavaScript与Ajax
May 15 Javascript
jQuery原理系列-css选择器的简单实现
Jun 07 Javascript
JS实现表单验证功能(验证手机号是否存在,验证码倒计时)
Oct 11 Javascript
JS仿Base.js实现的继承示例
Apr 07 Javascript
jQuery创建折叠式菜单
Jun 15 jQuery
9种方法优化jQuery代码详解
Feb 04 jQuery
按给定几率进行随机抽取的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
详细介绍:Apache+PHP+MySQL配置攻略
2006/09/05 PHP
深入探讨<br />和 \r\n两者有什么区别??
2013/06/05 PHP
php中url函数介绍及使用示例
2014/02/13 PHP
php面向对象编程self和static的区别
2016/05/08 PHP
javascript中的几个运算符
2007/06/29 Javascript
flash遮住div问题的正确解决方法
2014/02/27 Javascript
nodejs URL模块操作URL相关方法介绍
2015/03/03 NodeJs
详解JavaScript的while循环的使用
2015/06/03 Javascript
jQuery操作cookie
2016/08/08 Javascript
Ztree新增角色和编辑角色回显问题的解决
2016/10/25 Javascript
JS实现微信弹出搜索框 多条件查询功能
2016/12/13 Javascript
纯JS实现出生日期[年月日]下拉菜单效果
2018/06/01 Javascript
js验证账户名是否重复
2020/05/26 Javascript
vue各种事件监听实例(小结)
2020/06/24 Javascript
使用原生javascript开发计算器实例代码
2021/02/21 Javascript
Python中logging模块的用法实例
2014/09/29 Python
Python3使用requests登录人人影视网站的方法
2016/05/11 Python
Python队列的定义与使用方法示例
2017/06/24 Python
python操作MySQL 模拟简单银行转账操作
2017/09/27 Python
对Python模块导入时全局变量__all__的作用详解
2019/01/11 Python
完美解决python针对hdfs上传和下载的问题
2020/06/05 Python
python如何保存文本文件
2020/06/07 Python
用canvas实现图片滤镜效果附演示
2013/11/05 HTML / CSS
Marriott国际:万豪国际酒店查询预订
2017/09/25 全球购物
环保建议书作文
2014/03/12 职场文书
专科生就业求职信
2014/06/22 职场文书
2014入党积极分子批评与自我批评思想汇报
2014/09/20 职场文书
群众路线个人剖析材料
2014/10/07 职场文书
教师个人工作总结范文2014
2014/11/10 职场文书
淘宝客服专员岗位职责
2015/04/07 职场文书
红色影片观后感
2015/06/18 职场文书
理想国读书笔记
2015/06/25 职场文书
2015年全民创业工作总结
2015/07/23 职场文书
先进党支部事迹材料2016
2016/02/26 职场文书
2019旅游导游工作总结
2019/06/27 职场文书
pytorch加载预训练模型与自己模型不匹配的解决方案
2021/05/13 Python