新航路师徒学院

 找回密码
 立即注册
搜索
查看: 396|回复: 0

【新航路】新闻上下滚动js 源代码

[复制链接]

80

主题

114

帖子

560

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
560
发表于 2016-8-31 12:25:26 | 显示全部楼层 |阅读模式

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>新闻上下滚动</title>
  6. <meta name="description" content="新闻上下滚动" />
  7. <meta name="keywords" content="新闻上下滚动" />
  8. <link rel="stylesheet" href="css/index.css"/>
  9. <style>
  10. * {margin:0;padding:0;font-weight:normal;font-size:12px;}
  11. .div {width:980px;height:30px;border:1px solid #ccc;margin:50px auto;}
  12. .k_prev {float:right;height:30px;line-height:30px;font-size:12px;margin-right:5px;_display:inline;text-decoration:none;color:#ccc;outline:none}
  13. .div b {float:left;height:30px;line-height:30px;padding-left:10px;font-weight:normal;color:#333;}
  14. .k_news {margin-left:70px;height:30px;overflow:hidden;}
  15. .k_news div {height:30px;line-height:30px;overflow:hidden;}
  16. </style>
  17. </head>
  18. <body>
  19. <div class="div">
  20.         <a href="javascript:;" class="k_prev" id="k_prev">下一条</a>
  21.         <b>新闻:</b>
  22.         <div class="k_news" id="k_ul">
  23.                 <div><a href="#">第1季选手“惨”遭爆料</a><i> </i><span>05-01</span></div>
  24.                 <div><a href="#">第2季选手“惨”遭爆料</a><span>05-01</span></div>
  25.                 <div><a href="#">第3季选手“惨”遭爆料</a><span>05-01</span></div>
  26.                 <div><a href="#">第4季选手“惨”遭爆料</a><span>05-01</span></div>
  27.                 <div><a href="#">第5季选手“惨”遭爆料</a><span>05-01</span></div>
  28.                 <div><a href="#">第6季选手“惨”遭爆料</a><span>05-01</span></div>
  29.                 <div><a href="#">第7季选手“惨”遭爆料</a><span>05-01</span></div>
  30.                 <div><a href="#">第8季选手“惨”遭爆料</a><span>05-01</span></div>
  31.                 <div><a href="#">第9季选手“惨”遭爆料</a><span>05-01</span></div>
  32.                 <div><a href="#">第10季选手“惨”遭爆料</a><span>05-01</span></div>
  33.         </div>
  34. </div>
  35. <script>
  36. var _Q = {
  37.         css : function (obj,attr,value){
  38.                 if(!obj){return null;}
  39.                 if(arguments.length === 2){       
  40.                         if(obj.currentStyle){
  41.                                 return obj.currentStyle[attr];
  42.                         }else{
  43.                                 return getComputedStyle(obj,false)[attr];
  44.                         }
  45.                 }else if(arguments.length === 3){
  46.                         obj.style[attr] = value;
  47.                 }
  48.         },
  49.         startMove : function (obj,oTarget,fn){
  50.                 if(!obj){return null;}
  51.                 clearInterval(obj.timer);obj.timer = null;
  52.                 obj.timer = setInterval(function(){
  53.                         var iCur = 0;
  54.                         var attr = '';
  55.                         var bStop = true;
  56.                         for(attr in oTarget){
  57.                                 if(attr == 'opacity'){
  58.                                         //iCur = Math.round(_Q.css(obj,'opacity')*100);
  59.                                         iCur = parseInt(parseFloat(_Q.css(obj,'opacity')).toFixed(2)*100);
  60.                                 }else {
  61.                                         iCur = parseInt(_Q.css(obj,attr))
  62.                                 }
  63.                                 if(isNaN(iCur)){iCur=0;}
  64.                                 var iSpeed = (oTarget[attr]-iCur)/9;
  65.                                 iSpeed=iSpeed>0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
  66.                                 iCur+=iSpeed;
  67.                                 if(oTarget[attr]!=iCur){bStop=false;}
  68.                                 if(attr == 'opacity'){
  69.                                         obj.style.filter='alpha(opacity:'+iCur+')';
  70.                                         obj.style.opacity=iCur/100;
  71.                                 }else {
  72.                                         obj.style[attr]=iCur+'px';
  73.                                 }
  74.                         }
  75.                         if(bStop){
  76.                                 clearInterval(obj.timer);
  77.                                 obj.timer=null;
  78.                                 if(fn){fn.call(obj);}
  79.                         }
  80.                 },30)
  81.         }
  82. }
  83. function onScrollFn(){
  84.         var oUl = document.getElementById('k_ul');
  85.         var oPrev = document.getElementById('k_prev');
  86.         var aLi = oUl.getElementsByTagName('div');
  87.         var t = null;
  88.         oPrev.onmouseover = oUl.onmouseover = function(){
  89.                 if(t){
  90.                         clearInterval(t);
  91.                         t = null;
  92.                 }
  93.         }
  94.         oPrev.onmouseout = oUl.onmouseout = function(){
  95.                 if(!t){
  96.                         t = setInterval(scro,3000)
  97.                 }
  98.         }
  99.         t = setInterval(scro,3000)
  100.         function scro(){
  101.                 var lastObj = last(oUl);
  102.                 var firstObj = first(oUl);
  103.                 lastObj.style.height = '0';
  104.                 _Q.startMove(lastObj,{height:30});
  105.                 oUl.insertBefore(lastObj,firstObj);
  106.         }
  107.         oPrev.onclick = scro;
  108. }
  109. function last(oParent){
  110.         if(!oParent)return null;
  111.         return oParent.lastElementChild || oParent.lastChild;
  112. }
  113. function first(oParent){
  114.         if(!oParent)return null;
  115.         return oParent.firstElementChild || oParent.firstChild;
  116. }
  117. onScrollFn();
  118. </script>
  119. </body>
  120. </html>
复制代码


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

新航路师徒学院 ( 京ICP备16035622号

GMT+8, 2018-7-22 04:57 , Processed in 0.142290 second(s), 28 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表