JavaScript 仿腾讯新闻年份事件滑动效果

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!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>
<title>仿腾讯新闻年份事件滑动效果</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<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(//ku.shouce.ren/files/images/201601/56a36bdf9cf7c.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(//ku.shouce.ren/files/images/201601/56a36bdf9cf7c.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(//ku.shouce.ren/files/images/201601/56a36bdf9cf7c.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':'2010-12-25','title':'手册网','href':''},
	{'date':'2010-11-01','title':'前台制作与脚本专栏','href':'http://bbs.blueidea.com'},
	{'date':'2010-10-22','title':'纯CSS实现列表鼠标划过变色','href':'http://bbs.blueidea.com'},
	{'date':'2010-09-23','title':'实现checkbox的全选/全不选','href':'http://bbs.blueidea.com'},
	{'date':'2010-09-05','title':'JS计时器setTimeout()与setInterval()方法的区别','href':'http://bbs.blueidea.com'},
	{'date':'2010-06-07','title':'加载xml文档的函数(原生JavaScript版及jQuery版)','href':'http://bbs.blueidea.com'},
	{'date':'2010-05-09','title':'限制字符输入数功能(jQ版和原生JS版)','href':'http://bbs.blueidea.com'},
	{'date':'2010-04-13','title':'奇或偶数行高亮显示及鼠标划过高亮显示类','href':'http://bbs.blueidea.com'},
	{'date':'2010-03-01','title':'结构/表现/行为完全分离的选项卡(jQ版和原生JS版)','href':'http://bbs.blueidea.com'},
	{'date':'2010-02-22','title':'简易的点击展开/关闭效果(原生JS版和JQ版)','href':'http://bbs.blueidea.com'},
	{'date':'2010-02-01','title':'网站基本优化：php的gzip压缩方法','href':'http://bbs.blueidea.com'},
	{'date':'2010-01-20','title':'基于jQuery的渐隐渐显图片轮换幻灯片','href':'http://bbs.blueidea.com'}
];
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');
}
</script>
</head>
<body>
<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>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

JavaScript 仿腾讯新闻年份事件滑动效果

分类

网站常用

描述

JavaScript 仿腾讯新闻年份事件滑动效果，具体请看代码吧，里面的注释很丰富，效果也不错。现在在腾讯新闻专题页面还可见到此效果。