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);  

效果：