搜索
首页web前端js教程原生Js实现按的数据源均分时间点幻灯片效果(已封装)_javascript技巧

建议在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 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 (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 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 timePoint.innerHTML += '
  • ';
    }
    //将时间点插入到时间线DIV中
    timeLine.appendChild(timePoint)
    var timePoints = timeLine.getElementsByTagName('li');
    //时间点平滑显示
    for (var i = 0; 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 if (m != pointIndex) {
    timePoints[m].className = timePoints[m].oldClassName
    }
    }
    //为当前时间点加载高亮样式
    iBase.AddClass(that, 'hover');
    //切换日期及标题值
    date.innerHTML = '' + (JSONData[pointIndex]['date'] || '') + '';
    title.innerHTML = '' + (JSONData[pointIndex]['title'] || '') + '';
    //改变日期及标题的位置,此处减去的数字,可根据实际样式调整
    date.style.left = ((pointIndex + 1) * timePointLeftCur - 25) + 'px';
    titletop.style.left = ((pointIndex + 1) * timePointLeftCur + 6) + 'px';
    //当标题框左边距与标题框宽度之和大于外围宽度时,以右边为绝对点
    if ((title.offsetWidth + (pointIndex + 1) * timePointLeftCur) 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);
    }
    }
    }
  • 声明
    本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
    电源BI无法连接,尝试连接时遇到错误电源BI无法连接,尝试连接时遇到错误Feb 18, 2024 pm 05:48 PM

    当PowerBI无法连接到XLS、SQL或Excel文件的数据源时,可能会遇到困难。本文将探讨可能的解决方案,以帮助您解决这一问题。如果您在连接过程中遇到错误或连接失败的情况,本文将指导您采取一些措施。因此,如果您面临这个问题,请继续阅读,我们将为您提供一些有用的建议。PowerBI中的网关连接错误是什么?PowerBI中的网关错误通常是由数据源信息与底层数据集不匹配引起的。要解决这个问题,需要确保本地数据网关上定义的数据源与PowerBI桌面中指定的数据源是准确且一致的。PowerBI无法连接

    如何修复背景幻灯片在 Windows 11、10 中不起作用如何修复背景幻灯片在 Windows 11、10 中不起作用May 05, 2023 pm 07:16 PM

    在Windows11/10系统上,一些用户声称桌面背景上的幻灯片已经停止工作。用户对为什么笔记本电脑背景屏幕上的照片不再滑动感到困惑。幻灯片无法正常工作的此问题的原因如下所述。已安装第三方桌面定制应用程序。在电源选项中,桌面背景幻灯片设置已暂停。包含背景图像的文件夹被删除。幻灯片播放完成后屏幕可能会关闭。在对上述原因进行调查之后,我们创建了一个修复列表,无疑将帮助用户解决问题。解决方法——停用的窗口可能是导致此问题的原因之一。因此,请尝试激活Windows并检查问题是否已解决。尝试通过“设置”应

    幻灯片全屏播放为什么有黑边幻灯片全屏播放为什么有黑边Oct 20, 2023 pm 03:25 PM

    幻灯片全屏播放有黑边可能是因为屏幕分辨率不匹配、图片尺寸不匹配、缩放模式设置不正确、显示器设置问题和幻灯片设计问题等。详细介绍:1、屏幕分辨率不匹配,黑边的一个常见原因是屏幕分辨率与幻灯片尺寸不匹配,当幻灯片的尺寸小于屏幕分辨率时,播放时会出现黑边,解决方法是调整幻灯片的尺寸,使其与屏幕分辨率匹配,在 PowerPoint中,可以选择“设计”选项卡,然后点击“幻灯片大小”等等。

    如何在Windows 11上创建带有背景音乐的幻灯片?如何在Windows 11上创建带有背景音乐的幻灯片?Apr 21, 2023 am 10:07 AM

    幻灯片是在Windows11计算机上组织图片的好方法。有时,Windows用户可能会面临某种硬件限制或系统更新,他们需要一种方法来存储他们的文件,以免被意外删除或丢失。此外,与必须通过一张一张地滚动照片来手动向人们展示相比,它使对照片进行分类和展示要容易得多。幻灯片也是将来自不同来源(相机、手机、USB驱动器)的照片汇集为一种易于欣赏的格式的好方法。幸运的是,您可以使用一些有用的第三方应用程序来创建这些幻灯片,而不必被迫使用PowerPoint之类的工具。该应用程序适用于商业演示,但Pow

    如何将 PowerPoint 转换为 Google Slides?如何将 PowerPoint 转换为 Google Slides?Apr 22, 2023 pm 03:19 PM

    如何将PowerPoint转换为Google幻灯片将完整的PowerPoint演示文稿转换为Google幻灯片的最简单方法之一是上传它。通过将PowerPoint(PPT或PPTX)文件上传到Google幻灯片,该文件将自动转换为适用于Google幻灯片的格式。要将PowerPoint直接转换为Google幻灯片,请执行以下步骤:登录您的Google帐户,前往Google幻灯片页面,然后单击“开始新的演示文稿”部分下的空白。在新的演示文稿页面中,单击文件&g

    如何隐藏文本直到在 Powerpoint 中单击如何隐藏文本直到在 Powerpoint 中单击Apr 14, 2023 pm 04:40 PM

    如何在 PowerPoint 中的任何点击之前隐藏文本如果您希望在单击 PowerPoint 幻灯片上的任意位置时显示文本,那么设置起来既快速又容易。要在 PowerPoint 中单击任何按钮之前隐藏文本:打开您的 PowerPoint 文档,然后单击“插入 ”菜单。单击新幻灯片。选择空白或其他预设之一。仍然在插入菜单中,单击文本框。在幻灯片上拖出一个文本框。单击文本框并输入您

    PPT幻灯片插入七边形方法介绍PPT幻灯片插入七边形方法介绍Mar 26, 2024 pm 07:46 PM

    1、打开PPT幻灯片文档,在PPT左侧【大纲、幻灯片】栏中,点击选择需要插入基本【形状】的幻灯片。2、选择好之后,在PPT上方功能菜单栏中选择【插入】菜单并点击。3、点击【插入】菜单后,在功能菜单栏下方弹出【插入】子菜单栏。在【插入】子菜单栏中选择【形状】菜单。4、点击【形状】菜单,弹出预设的形状种类选择页面。5、在形状种类选择页面中,选择【七边形】形状并点击。6、点击后,鼠标移动至幻灯片编辑界面,按下鼠标绘制,绘制完成后松开鼠标。完成【七边形】形状的插入。

    PPT幻灯片统一主题颜色的操作步骤PPT幻灯片统一主题颜色的操作步骤Mar 26, 2024 pm 08:51 PM

    1、配色方案自然是与设计有关,所以,我们点击设计工具栏,在其右侧,可以看到颜色选项。鼠标指上去,可以看到当前主题颜色是:默认设计模板1。2、点开该选项,排在第一的就是当前的颜色设计。更改它,我们要在面板下方进入:新建主题颜色。3、点进去,在出现的一列颜色种可以看到有三种强调文字颜色都偏淡,在浅色背景下几乎无法显示,其中就有本例中的文字颜色。4、点击颜色右侧的下拉箭头,出现颜色选择面板。为不破坏整体配色,在原色系中选择一种深色替代原色。同样方法将另外两种颜色替换。5、更改后的颜色与原色对比。左边为

    See all articles

    热AI工具

    Undresser.AI Undress

    Undresser.AI Undress

    人工智能驱动的应用程序,用于创建逼真的裸体照片

    AI Clothes Remover

    AI Clothes Remover

    用于从照片中去除衣服的在线人工智能工具。

    Undress AI Tool

    Undress AI Tool

    免费脱衣服图片

    Clothoff.io

    Clothoff.io

    AI脱衣机

    AI Hentai Generator

    AI Hentai Generator

    免费生成ai无尽的。

    热门文章

    R.E.P.O.能量晶体解释及其做什么(黄色晶体)
    2 周前By尊渡假赌尊渡假赌尊渡假赌
    仓库:如何复兴队友
    1 个月前By尊渡假赌尊渡假赌尊渡假赌
    Hello Kitty Island冒险:如何获得巨型种子
    4 周前By尊渡假赌尊渡假赌尊渡假赌

    热工具

    PhpStorm Mac 版本

    PhpStorm Mac 版本

    最新(2018.2.1 )专业的PHP集成开发工具

    禅工作室 13.0.1

    禅工作室 13.0.1

    功能强大的PHP集成开发环境

    SublimeText3 Mac版

    SublimeText3 Mac版

    神级代码编辑软件(SublimeText3)

    DVWA

    DVWA

    Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序,非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具,帮助Web开发人员更好地理解保护Web应用程序的过程,并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞,难度各不相同。请注意,该软件中

    mPDF

    mPDF

    mPDF是一个PHP库,可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件,并处理不同的语言。与原始脚本如HTML2FPDF相比,它的速度较慢,并且在使用Unicode字体时生成的文件较大,但支持CSS样式等,并进行了大量增强。支持几乎所有语言,包括RTL(阿拉伯语和希伯来语)和CJK(中日韩)。支持嵌套的块级元素(如P、DIV),