原生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升级新版本后选择器的语法问题
Jun 02 Javascript
jQuery下实现等待指定元素加载完毕(可改成纯js版)
Jul 11 Javascript
详解Javacript和AngularJS中的Promises
Feb 09 Javascript
Angular2内置指令NgFor和NgIf详解
Aug 03 Javascript
Javascript动画效果(2)
Oct 11 Javascript
Angular2搜索和重置按钮过场动画
May 24 Javascript
Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
Jun 09 jQuery
jQuery 表单序列化实例代码
Jun 11 jQuery
Node Puppeteer图像识别实现百度指数爬虫的示例
Feb 22 Javascript
javascript实现fetch请求返回的统一拦截
Dec 22 Javascript
浅谈JavaScript中this的指向问题
Jul 28 Javascript
react国际化react-intl的使用
May 06 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 curl获取301或302转向的网址问题的解决方法
2011/06/02 PHP
一个php短网址的生成代码(仿微博短网址)
2014/05/07 PHP
PHP生成压缩文件实例
2015/02/07 PHP
javaScript 读取和设置文档元素的样式属性
2009/04/14 Javascript
动态调用CSS文件的JS代码
2010/07/29 Javascript
基于jquery的一个OutlookBar类,动态创建导航条
2010/11/19 Javascript
JS 去前后空格大全(IE9亲测)
2013/07/15 Javascript
JS实现向表格中动态添加行的方法
2015/03/30 Javascript
JavaScript必知必会(七)js对象继承
2016/06/08 Javascript
JS中对Cookie的操作详解
2016/08/05 Javascript
纯js实现画一棵树的示例
2017/09/05 Javascript
在vue中更换字体,本地存储字体非引用在线字体库的方法
2018/09/28 Javascript
vue如何根据网站路由判断页面主题色详解
2018/11/02 Javascript
Echarts之悬浮框中的数据排序问题
2018/11/08 Javascript
JavaScript 判断iPhone X Series机型的方法
2019/01/28 Javascript
VUE 实现复制内容到剪贴板的两种方法
2019/04/24 Javascript
原生JS利用transform实现banner的无限滚动示例代码
2020/06/15 Javascript
Python获取网页上图片下载地址的方法
2015/03/11 Python
初步解析Python中的yield函数的用法
2015/04/03 Python
Python 3.x 新特性及10大变化
2015/06/12 Python
浅谈python对象数据的读写权限
2016/09/12 Python
Python爬取网页中的图片(搜狗图片)详解
2017/03/23 Python
python实现植物大战僵尸游戏实例代码
2019/06/10 Python
python GUI库图形界面开发之PyQt5窗口背景与不规则窗口实例
2020/02/25 Python
pycharm如何设置官方中文(如何汉化)
2020/12/29 Python
一款纯css3实现简单的checkbox复选框和radio单选框
2014/11/05 HTML / CSS
联想新加坡官方网站:Lenovo Singapore
2017/10/24 全球购物
幼儿园元旦活动感言
2014/03/02 职场文书
求职简历自我评价范例
2014/03/12 职场文书
三爱活动实施方案
2014/03/19 职场文书
建筑工程质量通病防治方案
2014/06/08 职场文书
2014乡镇党委副书记对照检查材料思想汇报
2014/10/09 职场文书
机关作风建设心得体会
2014/10/22 职场文书
市场部岗位职责
2015/02/12 职场文书
vue项目proxyTable配置和部署服务器
2022/04/14 Vue.js
Java工作中实用的代码优化技巧分享
2022/04/21 Java/Android