欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jquery实现歌词滚动效果的代码教程

程序员文章站 2022-06-27 14:28:51
jquery实现歌词滚动 1.css /* css document */ * { margin: 0; padding: 0; font...

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实现歌词滚动效果的代码教程