欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery實(shí)現(xiàn)的簡單歌詞滾動(dòng)功能示例

 更新時(shí)間：2019年01月07日 09:41:15   作者：The_road_of_ordinary  
這篇文章主要介紹了jQuery實(shí)現(xiàn)的簡單歌詞滾動(dòng)功能,結(jié)合實(shí)例形式分析了基于jQuery插件scroll.js實(shí)現(xiàn)滾動(dòng)功能相關(guān)操作技巧,涉及jQuery結(jié)合時(shí)間函數(shù)動(dòng)態(tài)操作頁面元素相關(guān)實(shí)現(xiàn)方法,需要的朋友可以參考下

本文實(shí)例講述了jQuery實(shí)現(xiàn)的簡單歌詞滾動(dòng)功能。分享給大家供大家參考，具體如下：

jquery實(shí)現(xiàn)歌詞滾動(dòng)

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>點(diǎn)擊確定顯示歌詞</span><button>確定</button>
    <div class="box" style="display: none;">
      <div class="bcon">
        <h1><b>當(dāng)你老了</b></h1>
        <!-- 代碼開始 -->
        <div class="list_lh">
          <ul>
            <li>
              <p>當(dāng)你老了 頭發(fā)白了 睡意昏沉</p>
            </li>
            <li>
              <p>當(dāng)你老了 走不動(dòng)了</p>
            </li>
            <li>
              <p>爐火旁打盹 回憶青春</p>
            </li>
            <li>
              <p>多少人曾愛你 青春歡暢的時(shí)辰</p>
            </li>
            <li>
              <p>愛慕你的美麗 假意或真心</p>
            </li>
            <li>
              <p>只有一個(gè)人還愛你 虔誠的靈魂</p>
            </li>
            <li>
              <p>愛你蒼老的臉上的皺紋</p>
            </li>
            <li>
              <p>當(dāng)你老了 眼眉低垂 燈火昏黃不定</p>
            </li>
            <li>
              <p>風(fēng)吹過來 你的消息 這就是我心里的歌</p>
            </li>
            <li>
              <p>多少人曾愛你 青春歡暢的時(shí)辰</p>
            </li>
            <li>
              <p>愛慕你的美麗 假意或真心</p>
            </li>
            <li>
              <p>只有一個(gè)人還愛你 虔誠的靈魂</p>
            </li>
            <li>
              <p>愛你蒼老的臉上的皺紋</p>
            </li>
            <li>
              <p>當(dāng)你老了 眼眉低垂 燈火昏黃不定</p>
            </li>
            <li>
              <p>風(fēng)吹過來 你的消息 這就是我心里的歌</p>
            </li>
            <li>
              <p>當(dāng)我老了 我真希望 這首歌是唱給你的</p>
            </li>
          </ul>
        </div>

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");
          $("div.list_lh").myScroll({
            speed: 60, //數(shù)值越大，速度越慢
            rowHeight: 44 //li的高度
          });
        });
      });
    });

引入scroll.js

// JavaScript Document
(function($){
  $.fn.myScroll = function(options){
  //默認(rèn)配置
  var defaults = {
    speed:40, //滾動(dòng)速度,值越大速度越慢
    rowHeight:24 //每行的高度
  };
  var opts = $.extend({}, defaults, options),intId = [];
  var x = $("ul").find("li").length;//找到li的個(gè)數(shù)
  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是為了讓循環(huán)只走一遍，如果去掉就是首尾不間斷滾動(dòng)
          $(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);

完整實(shí)例代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>www.dbjr.com.cn jQuery歌詞滾動(dòng)</title>
<style>
/* 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;
}
</style>
</head>
<body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="scroll.js"></script>
<span>點(diǎn)擊確定顯示歌詞</span><button>確定</button>
    <div class="box" style="display: none;">
      <div class="bcon">
        <h1><b>當(dāng)你老了</b></h1>
        <!-- 代碼開始 -->
        <div class="list_lh">
          <ul>
            <li>
              <p>當(dāng)你老了 頭發(fā)白了 睡意昏沉</p>
            </li>
            <li>
              <p>當(dāng)你老了 走不動(dòng)了</p>
            </li>
            <li>
              <p>爐火旁打盹 回憶青春</p>
            </li>
            <li>
              <p>多少人曾愛你 青春歡暢的時(shí)辰</p>
            </li>
            <li>
              <p>愛慕你的美麗 假意或真心</p>
            </li>
            <li>
              <p>只有一個(gè)人還愛你 虔誠的靈魂</p>
            </li>
            <li>
              <p>愛你蒼老的臉上的皺紋</p>
            </li>
            <li>
              <p>當(dāng)你老了 眼眉低垂 燈火昏黃不定</p>
            </li>
            <li>
              <p>風(fēng)吹過來 你的消息 這就是我心里的歌</p>
            </li>
            <li>
              <p>多少人曾愛你 青春歡暢的時(shí)辰</p>
            </li>
            <li>
              <p>愛慕你的美麗 假意或真心</p>
            </li>
            <li>
              <p>只有一個(gè)人還愛你 虔誠的靈魂</p>
            </li>
            <li>
              <p>愛你蒼老的臉上的皺紋</p>
            </li>
            <li>
              <p>當(dāng)你老了 眼眉低垂 燈火昏黃不定</p>
            </li>
            <li>
              <p>風(fēng)吹過來 你的消息 這就是我心里的歌</p>
            </li>
            <li>
              <p>當(dāng)我老了 我真希望 這首歌是唱給你的</p>
            </li>
          </ul>
        </div>
<script>
$(document).ready(function() {
      $('.list_lh li:even').addClass('lieven');
    });
    $(document).ready(function() {
      $("button").click(function() {
        $("span").hide("slow", function() {
          $(".box").css("display", "block");
          $("div.list_lh").myScroll({
            speed: 60, //數(shù)值越大，速度越慢
            rowHeight: 44 //li的高度
          });
        });
      });
    });
</script>
</body>
</html>

效果：

感興趣的朋友可以使用本站在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運(yùn)行效果。

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery常用插件及用法總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery動(dòng)畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》

希望本文所述對大家jQuery程序設(shè)計(jì)有所幫助。

相關(guān)文章

最新評論