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

发布时间：2018-08-18 21:06:08 所属栏目：运营来源：站长网

导读：Java Script 仿腾讯消息年份变乱滑动结果，详细请看代码吧，内里的注释很富厚，结果也不错。此刻在腾讯消息专题页面还可见到此结果。演示： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transi

　　JavaScript 仿腾讯消息年份变乱滑动结果，详细请看代码吧，内里的注释很富厚，结果也不错。此刻在腾讯消息专题页面还可见到此结果。

　　演示：

<!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(/uploads/allimg/1104/sprite.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(/uploads/allimg/1104/sprite.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(/uploads/allimg/1104/sprite.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<b>计时器</b>setTimeout()与setInterval()要领的区别','href':'http://bbs.blueidea.com'}, {'date':'2010-06-07','title':'加载xml文档的函数(原生JavaScript版及<b>jQuery</b>版)','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><br /><center>如不能表现结果，请按Ctrl+F5革新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提醒：可修改儿女码再运行!

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

OPPO概念机泄露，5000	华为找到了让手机支持
Redmi K50 Pro屏幕升级	天玑8100电竞旗舰仅要