原生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 相关文章推荐
js如何获取file控件的完整路径具体实现代码
May 15 Javascript
JavaScript对象学习经验整理
Oct 12 Javascript
JavaScript表单通过正则表达式验证电话号码
Mar 14 Javascript
jQuery使用before()和after()在元素前后添加内容的方法
Mar 26 Javascript
JS实现点击按钮后框架内载入不同网页的方法
May 05 Javascript
jQuery获取checkbox选中的值
Jan 28 Javascript
jQuery右下角悬浮广告实例
Oct 17 Javascript
Vue.js事件处理器与表单控件绑定详解
Mar 20 Javascript
JavaScrip关于创建常量的知识点
Dec 07 Javascript
javascript使用正则实现去掉字符串前面的所有0
Jul 23 Javascript
React项目动态设置title标题的方法示例
Sep 26 Javascript
Vue.js实现大转盘抽奖总结及实现思路
Oct 09 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
中国收音机工业发展史
2021/03/02 无线电
shopex主机报错误请求解决方案(No such file or directory)
2011/12/27 PHP
php在数组中查找指定值的方法
2015/03/17 PHP
Laravel5中Cookie的使用详解
2017/05/03 PHP
Jquery数独游戏解析(一)-页面布局
2010/11/05 Javascript
JQuery插件iScroll实现下拉刷新,滚动翻页特效
2014/06/22 Javascript
jquery使用正则表达式验证email地址的方法
2015/01/22 Javascript
JavaScript实现点击文字切换登录窗口的方法
2015/05/11 Javascript
javascript 常见功能汇总
2015/06/11 Javascript
说说AngularJS中的$parse和$eval的用法
2017/09/14 Javascript
jquery radio 动态控制选中失效问题的解决方法
2018/02/28 jQuery
jQuery实现的上传图片本地预览效果简单示例
2018/03/29 jQuery
Vue2.X和Vue3.0数据响应原理变化的区别
2019/11/07 Javascript
JS前端基于canvas给图片添加水印
2020/11/11 Javascript
python转换摩斯密码示例
2014/02/16 Python
Python元组及文件核心对象类型详解
2018/02/11 Python
详解python3中tkinter知识点
2018/06/21 Python
在scrapy中使用phantomJS实现异步爬取的方法
2018/12/17 Python
利用python-pypcap抓取带VLAN标签的数据包方法
2019/07/23 Python
对python while循环和双重循环的实例详解
2019/08/23 Python
详解python 破解网站反爬虫的两种简单方法
2020/02/09 Python
python代码如何注释
2020/06/01 Python
Python实现LR1文法的完整实例代码
2020/10/25 Python
致400米运动员广播稿
2014/02/07 职场文书
幼儿园六一儿童节主持节目串词
2014/03/21 职场文书
少儿节目主持串词
2014/04/02 职场文书
珍爱生命演讲稿
2014/05/10 职场文书
我们的节日中秋活动方案
2014/08/19 职场文书
新教师个人工作总结
2015/02/06 职场文书
世界遗产导游词
2015/02/13 职场文书
2015年上半年信访工作总结
2015/03/30 职场文书
2015年度个人业务工作总结
2015/04/27 职场文书
岁月神偷观后感
2015/06/11 职场文书
成人成长感言如何写?
2019/08/16 职场文书
html form表单基础入门案例讲解
2021/07/15 HTML / CSS
iSCSI服务器CHAP双向认证配置
2022/04/01 Servers