摘要:jquery实现歌词滚动1.css2.html3.js引入scroll.js效果:jquery实现歌词滚动1.css2.html3.js

小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

jquery实现歌词滚动

1.css

 /* CSS Document */      * {       margin: 0;       padding: 0;       font-size: 12px;   }      body {       background: none;   }      input,   button,   select,   textarea {       outline: none;   }      ul,   li,   dl,   ol {       list-style: none;   }      a {       color: #666;       text-decoration: none;   }      h1 {       font-size: 25px;   }      p {       font-size: 18px;   }      span {       font-size: 16px;   }      button {       font-size: 18px;   }      marquee {       border: 1px solid #0096BE;       margin: 30px auto;   }      .box {       /*width: 980px;*/       margin: 0 auto;   }      .bcon {       width: 270px;       border: 1px solid #eee;       margin: 30px auto;   }      .bcon h1 {       border-bottom: 1px solid #eee;       padding: 0 10px;   }      .bcon h1 b {       font: bold 14px/40px '宋体';       border-top: 2px solid #3492D1;       padding: 0 8px;       margin-top: -1px;       display: inline-block;   }      .list_lh {       height: 400px;       overflow: hidden;   }      .list_lh li {       padding: 10px;       overflow: hidden;   }      .list_lh li.lieven {       background: #F0F2F3;   }      .list_lh li p {       line-height: 24px;   }      .list_lh li p a {       float: left;   }      .list_lh li p em {       width: 80px;       font: normal 12px/24px Arial;       color: #FF3300;       float: right;       display: inline-block;   }      .list_lh li p span {       color: #999;       float: right;   }      .list_lh li p a.btn_lh {       background: #28BD19;       height: 17px;       line-height: 17px;       color: #fff;       padding: 0 5px;       margin-top: 4px;       display: inline-block;       float: right;   }      .btn_lh:hover {       color: #fff;       text-decoration: none;   }      .btm p {       font: normal 12px/24px 'Microsoft YaHei';       text-align: center;   }  

2.html

 <span>点击确定显示歌词</span><button>确定</button>           <p class="box" style="display: none;">               <p class="bcon">                   <h1><b>当你老了</b></h1>                   <!-- 代码开始 -->                   <p class="list_lh">                       <ul>                           <li>                               <p>当你老了 头发白了 睡意昏沉</p>                           </li>                           <li>                               <p>当你老了 走不动了</p>                           </li>                           <li>                               <p>炉火旁打盹 回忆青春</p>                           </li>                           <li>                               <p>多少人曾爱你 青春欢畅的时辰</p>                           </li>                           <li>                               <p>爱慕你的美丽 假意或真心</p>                           </li>                           <li>                               <p>只有一个人还爱你 虔诚的灵魂</p>                           </li>                           <li>                               <p>爱你苍老的脸上的皱纹</p>                           </li>                           <li>                               <p>当你老了 眼眉低垂 灯火昏黄不定</p>                           </li>                           <li>                               <p>风吹过来 你的消息 这就是我心里的歌</p>                           </li>                           <li>                               <p>多少人曾爱你 青春欢畅的时辰</p>                           </li>                           <li>                               <p>爱慕你的美丽 假意或真心</p>                           </li>                           <li>                               <p>只有一个人还爱你 虔诚的灵魂</p>                           </li>                           <li>                               <p>爱你苍老的脸上的皱纹</p>                           </li>                           <li>                               <p>当你老了 眼眉低垂 灯火昏黄不定</p>                           </li>                           <li>                               <p>风吹过来 你的消息 这就是我心里的歌</p>                           </li>                           <li>                               <p>当我老了 我真希望 这首歌是唱给你的</p>                           </li>                       </ul>                   </p>  

3.js

 $(document).ready(function() {               $('.list_lh li:even').addClass('lieven');           });           $(document).ready(function() {               $("button").click(function() {                   $("span").hide("slow", function() {                       $(".box").css("display", "block");                       $("p.list_lh").myScroll({                           speed: 60, //数值越大,速度越慢                           rowHeight: 44 //li的高度                       });                   });               });           });  

引入scroll.js

 // JavaScript Document   (function($){       $.fn.myScroll = function(options){       //默认配置       var defaults = {           speed:40,  //滚动速度,值越大速度越慢           rowHeight:24 //每行的高度       };              var opts = $.extend({}, defaults, options),intId = [];       var x = $("ul").find("li").length;//找到li的个数       var z=0;       function marquee(obj, step){           obj.find("ul").animate({               marginTop: '-=1'           },0,function(){                   z = z + 1;                   var s = Math.abs(parseInt($(this).css("margin-top")));                   if(s >= step&&z<x){//z<x是为了让循环只走一遍,如果去掉就是首尾不间断滚动                       $(this).find("li").slice(0, 1).appendTo($(this));                       $(this).css("margin-top", 0);                   }               });           }                      this.each(function(i){               var sh = opts["rowHeight"],speed = opts["speed"],_this = $(this);               intId[i] = setInterval(function(){                   if(_this.find("ul").height()<=_this.height()){                       clearInterval(intId[i]);                   }else{                       marquee(_this, sh);                   }               }, speed);                  _this.hover(function(){                   clearInterval(intId[i]);               },function(){                   intId[i] = setInterval(function(){                       if(_this.find("ul").height()<=_this.height()){                           clearInterval(intId[i]);                       }else{                           marquee(_this, sh);                       }                   }, speed);               });                      });          }      })(jQuery);  

效果:

jquery实现歌词滚动

1.css

 /* CSS Document */      * {       margin: 0;       padding: 0;       font-size: 12px;   }      body {       background: none;   }      input,   button,   select,   textarea {       outline: none;   }      ul,   li,   dl,   ol {       list-style: none;   }      a {       color: #666;       text-decoration: none;   }      h1 {       font-size: 25px;   }      p {       font-size: 18px;   }      span {       font-size: 16px;   }      button {       font-size: 18px;   }      marquee {       border: 1px solid #0096BE;       margin: 30px auto;   }      .box {       /*width: 980px;*/       margin: 0 auto;   }      .bcon {       width: 270px;       border: 1px solid #eee;       margin: 30px auto;   }      .bcon h1 {       border-bottom: 1px solid #eee;       padding: 0 10px;   }      .bcon h1 b {       font: bold 14px/40px '宋体';       border-top: 2px solid #3492D1;       padding: 0 8px;       margin-top: -1px;       display: inline-block;   }      .list_lh {       height: 400px;       overflow: hidden;   }      .list_lh li {       padding: 10px;       overflow: hidden;   }      .list_lh li.lieven {       background: #F0F2F3;   }      .list_lh li p {       line-height: 24px;   }      .list_lh li p a {       float: left;   }      .list_lh li p em {       width: 80px;       font: normal 12px/24px Arial;       color: #FF3300;       float: right;       display: inline-block;   }      .list_lh li p span {       color: #999;       float: right;   }      .list_lh li p a.btn_lh {       background: #28BD19;       height: 17px;       line-height: 17px;       color: #fff;       padding: 0 5px;       margin-top: 4px;       display: inline-block;       float: right;   }      .btn_lh:hover {       color: #fff;       text-decoration: none;   }      .btm p {       font: normal 12px/24px 'Microsoft YaHei';       text-align: center;   }  

2.html

 <span>点击确定显示歌词</span><button>确定</button>           <p class="box" style="display: none;">               <p class="bcon">                   <h1><b>当你老了</b></h1>                   <!-- 代码开始 -->                   <p class="list_lh">                       <ul>                           <li>                               <p>当你老了 头发白了 睡意昏沉</p>                           </li>                           <li>                               <p>当你老了 走不动了</p>                           </li>                           <li>                               <p>炉火旁打盹 回忆青春</p>                           </li>                           <li>                               <p>多少人曾爱你 青春欢畅的时辰</p>                           </li>                           <li>                               <p>爱慕你的美丽 假意或真心</p>                           </li>                           <li>                               <p>只有一个人还爱你 虔诚的灵魂</p>                           </li>                           <li>                               <p>爱你苍老的脸上的皱纹</p>                           </li>                           <li>                               <p>当你老了 眼眉低垂 灯火昏黄不定</p>                           </li>                           <li>                               <p>风吹过来 你的消息 这就是我心里的歌</p>                           </li>                           <li>                               <p>多少人曾爱你 青春欢畅的时辰</p>                           </li>                           <li>                               <p>爱慕你的美丽 假意或真心</p>                           </li>                           <li>                               <p>只有一个人还爱你 虔诚的灵魂</p>                           </li>                           <li>                               <p>爱你苍老的脸上的皱纹</p>                           </li>                           <li>                               <p>当你老了 眼眉低垂 灯火昏黄不定</p>                           </li>                           <li>                               <p>风吹过来 你的消息 这就是我心里的歌</p>                           </li>                           <li>                               <p>当我老了 我真希望 这首歌是唱给你的</p>                           </li>                       </ul>                   </p>  

3.js

 $(document).ready(function() {               $('.list_lh li:even').addClass('lieven');           });           $(document).ready(function() {               $("button").click(function() {                   $("span").hide("slow", function() {                       $(".box").css("display", "block");                       $("p.list_lh").myScroll({                           speed: 60, //数值越大,速度越慢                           rowHeight: 44 //li的高度                       });                   });               });           });  

引入scroll.js

 // JavaScript Document   (function($){       $.fn.myScroll = function(options){       //默认配置       var defaults = {           speed:40,  //滚动速度,值越大速度越慢           rowHeight:24 //每行的高度       };              var opts = $.extend({}, defaults, options),intId = [];       var x = $("ul").find("li").length;//找到li的个数       var z=0;       function marquee(obj, step){           obj.find("ul").animate({               marginTop: '-=1'           },0,function(){                   z = z + 1;                   var s = Math.abs(parseInt($(this).css("margin-top")));                   if(s >= step&&z<x){//z<x是为了让循环只走一遍,如果去掉就是首尾不间断滚动                       $(this).find("li").slice(0, 1).appendTo($(this));                       $(this).css("margin-top", 0);                   }               });           }                      this.each(function(i){               var sh = opts["rowHeight"],speed = opts["speed"],_this = $(this);               intId[i] = setInterval(function(){                   if(_this.find("ul").height()<=_this.height()){                       clearInterval(intId[i]);                   }else{                       marquee(_this, sh);                   }               }, speed);                  _this.hover(function(){                   clearInterval(intId[i]);               },function(){                   intId[i] = setInterval(function(){                       if(_this.find("ul").height()<=_this.height()){                           clearInterval(intId[i]);                       }else{                           marquee(_this, sh);                       }                   }, speed);               });                      });          }      })(jQuery);  

效果:

觉得可用,就经常来吧!Javascript技巧 脚本宝典 欢迎评论哦! js技巧,巧夺天工,精雕玉琢。小宝典献丑了!

本文固定链接: http://www.js-code.com/js/js_1255.html