展开

站内通知     

    查看: 241|回复: 0
    收起左侧

    [JS代码] 仿腾讯专题新闻年份记事滑动JS效果

    [复制链接]
  • TA的每日心情
    擦汗
    2019-6-7 20:48
  • 签到天数: 71 天

    连续签到: 3 天

    [LV.6]常住居民II

    892

    主题

    1094

    帖子

    1万

    积分

    管理员站长大人】 :Rank: 9Rank: 9Rank: 9

    威望1859
    贡献1896
    蓝币5570

    最佳新人活跃会员热心会员推广达人灌水之王突出贡献优秀版主荣誉管理论坛元老

    Lanyuan 发表于 2016-8-7 05:25:44 | 显示全部楼层 |阅读模式

    马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

    您需要 登录 才可以下载或查看,没有帐号?立即注册

    x

    作者:Lanyuan--蓝鸢梦想
                                   
    登录/注册后可看大图

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. <head>
    4. <title>仿腾讯专题新闻年份记事滑动效果 破洛洛演示http://www.poluoluo.com</title>
    5. <meta http-equiv="content-type" content="text/html;charset=gb2312">
    6. <style type="text/css">  
    7. #itimeslide{position:relative;margin:0 20px;padding:15px 0}
    8. #itimeslide #date{display:none;position:absolute;left:74px;top:3px;width:70px}
    9. #itimeslide #date span{display:block;height:14px;padding:0 3px;background:#4e7db3;color:#fff;font-size:12px;line-height:14px}
    10. #itimeslide #date em{display:block;width:5px;height:3px;margin:0 auto;background:url(/jzxy/UploadFiles_333/201104/2011042217560712.gif) no-repeat -61px 0}
    11. #itimeslide #timeline{overflow:visible;width:100%;height:2px;margin:16px 0 20px;background:#c7c7c7}
    12. #itimeslide #timeline li{display:block;position:absolute;left:0;top:24px;width:17px;height:17px;background:url(/jzxy/UploadFiles_333/201104/2011042217560712.gif) no-repeat 0 0;text-indent:-999px;cursor:pointer}
    13. #itimeslide #timeline li.hover{background-position:-20px 0}
    14. #itimeslide span#titletop{display:none;position:absolute;top:45px;width:12px;height:8px;background:url(/jzxy/UploadFiles_333/201104/2011042217560712.gif) no-repeat -88px -21px;z-index:1}
    15. #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;
    16. -moz-box-shadow:3px 3px 3px #c7c7c7}
    17. </style>
    18. <script language="javascript">  
    19. var JSONData=[
    20. {'date':'2010-12-25','title':'破洛洛提供','href':'http://www.poluoluo.com'},
    21. {'date':'2010-11-01','title':'PS网页设计教程','href':'http://www.poluoluo.com'},
    22. {'date':'2010-10-22','title':'纯CSS实现列表鼠标划过变色','href':'http://www.poluoluo.com'},
    23. {'date':'2010-09-23','title':'实现checkbox的全选/全不选','href':'http://www.poluoluo.com'},
    24. {'date':'2010-09-05','title':'JS计时器setTimeout()与setInterval()方法的区别','href':'http://www.poluoluo.com'},
    25. {'date':'2010-06-07','title':'加载xml文档的函数(原生JavaScript版及jQuery版)','href':'http://www.poluoluo.com'},
    26. {'date':'2010-05-09','title':'限制字符输入数功能(jQ版和原生JS版)','href':'http://www.poluoluo.com'},
    27. {'date':'2010-04-13','title':'奇或偶数行高亮显示及鼠标划过高亮显示类','href':'http://www.poluoluo.com'},
    28. {'date':'2010-03-01','title':'结构/表现/行为完全分离的选项卡(jQ版和原生JS版)','href':'http://www.poluoluo.com'},
    29. {'date':'2010-02-22','title':'简易的点击展开/关闭效果(原生JS版和JQ版)','href':'http://www.poluoluo.com'},
    30. {'date':'2010-02-01','title':'网站基本优化:php的gzip压缩方法','href':'http://www.poluoluo.com'},
    31. {'date':'2010-01-20','title':'基于jQuery的渐隐渐显图片轮换幻灯片','href':'http://www.poluoluo.com'}
    32. ];
    33. function iTimePoint(iTimeSlideId, dateId, timeLineId, titleTop, titleId, defaultShow){
    34.     /* 传入参数说明:
    35.      * iTimeSlideId: 外围ID名. 本样例DOM中#itimeslide;
    36.      * dateId: 日期ID名. 本样例DOM中#date;
    37.      * timeLineId: 时间点分布ID名. 本样例DOM中#timeline;
    38.      * titleTop: 标题容器上方小三角ID名. 本样例DOM中#titletop;
    39.      * titleId: 标题容器ID名. 本样例DOM中#title;
    40.      * defaultShow: 设定初始显示的时间点, 默认为0, 可不传值
    41.      */
    42.     //参数判断, 测试用, 成功运行后可删除
    43.     if (arguments.length < 5 || arguments.length>6) {
    44.         alert('参数传入错误,请传入5或6个值! :)');
    45.         return false;
    46.     }
    47. //通用方法
    48.     var iBase = {
    49.         //document.getElementById
    50.         Id: function(name){
    51.             return document.getElementById(name);
    52.         },
    53.         //时间点动画显示
    54.         PointSlide: function(elem, val){
    55.             //可通过修改i+=5中的5控制滑动速度
    56.             for (var i = 0; i <= 100; i += 5) {
    57.                 (function(){
    58.                     //这个pos定义很重要, 若直接使用闭包获取到的不是上面的i
    59.                     var pos = i;
    60.                     //平滑移动
    61.                     setTimeout(function(){
    62.                         elem.style.left = pos * val / 100 + 'px';
    63.                     }, (pos + 1) * 10);
    64.                 })();              }          },
    65.         //为元素添加样式
    66.         AddClass: function(elem, val){
    67.             //若元素无class, 直接赋值
    68.             if (!elem.className) {
    69.                 elem.className = val;
    70.             }else {
    71.                 //否则通过添加空格新增一个class
    72.                 var oVal = elem.className;
    73.                 oVal += ' ';
    74.                 oVal += val;
    75.                 elem.className = val;
    76.             }
    77.         },
    78.         //获取元素索引
    79.         Index: function(cur, obj){
    80.             for (var i = 0; i < obj.length; i++) {
    81.                 if (obj[i] == cur) {
    82.                     return i;                  }              }          }      }
    83. //整个函数变量定义区
    84.     var dataLen = JSONData.length;
    85.     var iTimeSilde = iBase.Id(iTimeSlideId);
    86.     var date = iBase.Id(dateId);
    87.     var timeLine = iBase.Id(timeLineId);
    88.     var titletop = iBase.Id(titleTop);
    89.     var title = iBase.Id(titleId);
    90.     var iTimeSildeW = iTimeSilde.offsetWidth;//幻灯区实际宽度
    91.     var timePoint = document.createElement('ul');//用来存储时间点的ul
    92.     var timePointLeft = null;//时间点相对于父元素左边距离
    93.     var timePointLeftCur = null;//每两个时间点间距
    94.     var pointIndex = 0;//时间点在队列中的索引值
    95. var defaultShow = defaultShow || 0;//默认显示的时间
    96. var clearFun=null;//当用户无意识的划过时中止执行
    97. var that=null;
    98.     //根据数据条数生成对应的时间点html
    99.     for (var i = 0; i < dataLen; i++) {
    100.         timePoint.innerHTML += '<li></li>';
    101.     }
    102.     //将时间点插入到时间线DIV中
    103.     timeLine.appendChild(timePoint)
    104.     var timePoints = timeLine.getElementsByTagName('li');
    105.     //时间点平滑显示
    106.     for (var i = 0; i < timePoints.length; i++) {
    107.   //每两个时间点间间距
    108.         timePointLeftCur = parseInt(iTimeSildeW / (dataLen + 1));
    109.   //计算对应时间点左边距
    110.         timePointLeft = (i + 1) * timePointLeftCur;
    111.   //时间点动画形式初始化
    112.         iBase.PointSlide(timePoints[i], timePointLeft);
    113.   //初始显示时间点
    114.         setTimeout(function(){
    115.             timePoints[defaultShow].onmouseover();
    116.         }, 1200);
    117.   //获取时间点默认class值, 为鼠标事件做准备
    118.         timePoints[i].oldClassName = timePoints[i].className;
    119.         timePoints[i].onmouseover = function(){
    120.    that = this;//确保clearFun中的this是当前的this
    121.    //提升用户体验, 当用户无意识地划过时不执行函数
    122.    clearFun=setTimeout(function(){
    123.           pointIndex = iBase.Index(that, timePoints);
    124.     //计算出当前时间点索引值, 为鼠标划出做准备
    125.     //为当前时间点加载高亮样式
    126.              iBase.AddClass(that, 'hover');
    127.     //切换日期及标题值
    128.              date.innerHTML = '<span>' + (JSONData[pointIndex]['date'] || '') + '</span><em></em>';
    129.              title.innerHTML = '<a href="' + (JSONData[pointIndex]['href'] || '') + '">' + (JSONData[pointIndex]['title'] || '') + '</a>';
    130.              //改变日期及标题的位置, 此处减去的数字, 可根据实际样式调整
    131.              date.style.left = ((pointIndex + 1) * timePointLeftCur - 25) + 'px';
    132.              titletop.style.left = ((pointIndex + 1) * timePointLeftCur + 6) + 'px';
    133.              //当标题框左边距与标题框宽度之和大于外围宽度时, 以右边为绝对点
    134.              if ((title.offsetWidth + (pointIndex + 1) * timePointLeftCur) < iTimeSildeW) {
    135.                  title.style.left = ((pointIndex + 1) * timePointLeftCur - timePointLeftCur) + 'px';
    136.              }else {
    137.                  title.style.left = (iTimeSildeW - title.offsetWidth) + 'px';
    138.              }
    139.              //显示日期/时间点/标题
    140.              date.style.display = 'block';
    141.              titletop.style.display = 'block';
    142.              title.style.display = 'block';
    143.    },200);//200为认定无意识划过的时间, 可自行调节
    144.         }
    145.         timePoints[i].onmouseout = function(){
    146.    //若停留时间低于200ms, 认定为无意识划过, 中止函数
    147.    clearTimeout(clearFun);
    148.    //鼠标划出时, 保留最后一个鼠标划过的高亮样式
    149.             for (var m = 0; m < timePoints.length; m++) {
    150.                 if (m != pointIndex) {
    151.                     timePoints[m].className = timePoints[m].oldClassName
    152.                 }              }          }      }  }
    153. //样例加载该函数
    154. window.onload = function(){
    155.     iTimePoint('itimeslide', 'date', 'timeline', 'titletop','title');
    156. }  </script>  </head>  <body>
    157. <div id="demo">
    158. <div id="itimeslide">
    159.   <div id="date"></div>
    160.   <div id="timeline"></div>
    161.   <span id="titletop"></span>
    162.   <div id="title"></div>
    163. </div>
    164. </div>
    165. <p> </p>
    166. <p> </p>
    167. <p> </p>
    168. <p> </p>
    169. <p align="center"><a href="http://www.poluoluo.com" target="_blank">破洛洛提供 http://www.poluoluo.com</a></p>
    170. <p> </p>
    171. </body>
    172. </html>  
    复制代码

    素材:  
    作者:Lanyuan--蓝鸢梦想
                                   
    登录/注册后可看大图

    本站不承担任何版权问题,如果我们侵犯了您的利益,请来信
    告知(kefu@aceanow.com),我们会在第一时间处理!
            





    上一篇:超萌的猫头鹰登录界面代码下载
    下一篇:Photoshop设计时尚的个人作品网页界面教程
    该会员没有填写今日想说内容.

    kefu@aceanow.com

    蓝鸢梦想客服邮箱
    周一至周日:08:00-22:00

    蓝鸢微信扫一扫

    ©2015-2019. All rights reserved. ( 湘ICP备15008664号-1 )  Powered by Discuz! X3.4  技术支持:蓝鸢梦想
    快速回复 返回顶部 返回列表