横向鼠标感应滑动弹出图层特效，用户的鼠标经过时切换背景图片加亮显示，并在下面弹出相关信息。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。">
<title>仿腾讯新闻年份记事滑动效果_武鸣人</title>
<style type="text/css">
#itimeslide{position:relative;margin:0 20px;padding:15px 0}
#itimeslide #date{display:none;position:absolute;left:74px;top:3px;width:70px}
#itimeslide #date span{display:block;height:14px;padding:0 3px;background:#4e7db3;color:#fff;font-size:12px;line-height:14px}
#itimeslide #date em{display:block;width:5px;height:3px;margin:0 auto;background:url(/img/20240306_www_wuming_ren_61.gif) no-repeat -61px 0}
#itimeslide #timeline{overflow:visible;width:100%;height:2px;margin:16px 0 20px;background:#c7c7c7}
#itimeslide #timeline li{display:block;position:absolute;left:0;top:24px;width:17px;height:17px;background:url(/img/20240306_www_wuming_ren_61.gif) no-repeat 0 0;text-indent:-999px;cursor:pointer}
#itimeslide #timeline li.hover{background-position:-20px 0}
#itimeslide span#titletop{display:none;position:absolute;top:45px;width:12px;height:8px;background:url(/img/20240306_www_wuming_ren_61.gif) no-repeat -88px -21px;z-index:1}
#itimeslide #title{display:none;position:absolute;top:52px;padding:15px 10px;background:#f8f8ff;border:1px solid #708bab;border-radius:5px;-weblit-border-radius:5px;-moz-border-radius:5px;-webkit-box-shadow:3px 3px 3px #c7c7c7;
-moz-box-shadow:3px 3px 3px #c7c7c7}
</style>
<script language="javascript">
var JSONData=[
{'date':'2023-12-25','title':'武鸣人一号标题','href':'https://www.wuming.ren'},
{'date':'2023-11-01','title':'武鸣人二号标题','href':'https://www.wuming.ren'},
{'date':'2023-10-22','title':'武鸣人三号标题','href':'https://www.wuming.ren'},
{'date':'2023-09-23','title':'武鸣人四号标题','href':'https://www.wuming.ren'},
{'date':'2023-09-05','title':'武鸣人五号标题','href':'https://www.wuming.ren'},
{'date':'2023-06-07','title':'武鸣人六号标题','href':'https://www.wuming.ren'},
{'date':'2023-05-09','title':'武鸣人七号标题','href':'https://www.wuming.ren'},
{'date':'2023-04-13','title':'武鸣人八号标题','href':'https://www.wuming.ren'},
{'date':'2023-03-01','title':'武鸣人九号标题','href':'https://www.wuming.ren'},
{'date':'2023-02-22','title':'武鸣人十号标题','href':'https://www.wuming.ren'},
{'date':'2023-02-01','title':'武鸣人十一号标题','href':'https://www.wuming.ren'},
{'date':'2023-01-20','title':'武鸣人十二号标题','href':'https://www.wuming.ren'}
];//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
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);
//计算出当前时间点索引值, 为鼠标划出做准备
//为当前时间点加载高亮样式
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);
//鼠标划出时, 保留最后一个鼠标划过的高亮样式
for (var m = 0; m < timePoints.length; m++) {
if (m != pointIndex) {
timePoints[m].className = timePoints[m].oldClassName
}
}
}
}
}
//样例加载该函数
window.onload = function(){
iTimePoint('itimeslide', 'date', 'timeline', 'titletop','title');
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
</script>
</head>
<body>
<a href="https://www.wuming.ren">武鸣人</a>，各种信息资源免费发布，分享励志语录经典短句，减肥健身常识，各种js特效代码。网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
<div id="demo">
<div id="itimeslide">
<div id="date"></div>
<div id="timeline"></div>
<span id="titletop"></span>
<div id="title"></div>
</div>
</div>
</body>
</html>