html簡單的跑馬燈效果

阿新 • • 發佈：2019-01-24

很多專案中都會遇到有類似跑馬燈效果的訊息輪播展示，做了一個簡單的訊息輪播展示。
主要程式碼如下：
html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>跑馬燈效果</title>
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, width=device-width" 
>
    <link href="css/index.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="g-winner-roll">
    <img src="img/tongzhi.png">
    <div class="m-countdown">

    </div>
</div>
<script src="js/jquery.min.js"></script>
<script src 
="js/index.js"></script>
</body>
</html>

css


.g-winner-roll{
    height: 30px;
    border-bottom: 1px solid #d3d3d3;
    background-color: #ffffff;
}

.g-winner-roll img{
    float: left;
    margin-left: 10px;
    margin-top: 7px;
    display: block;
    width: 15px;
    height: 15 
px;
}
.m-countdown{
    margin-left: 25px;
    width: 100%;
    height: 30px;
}

.m-countdown > a{
    text-align: left;
    margin-left: 10px;
    height: 30px;
    line-height: 30px;
    font-size: 12px;
    position:absolute;
    display: none;
}

.m-countdown > a:first-child{
    display: block;
}

.m-countdown > a >span{
    color: rgb(128,128,128);
    height: 30px;
}

index.js

/**
 * Created by rayootech on 16/8/6.
 */
$(function(){
    var list = ["跑馬燈效果資料1","跑馬燈效果資料2","跑馬燈效果資料3","跑馬燈效果資料4","跑馬燈效果資料5","跑馬燈效果資料6"];
    var htmlString ="";
    for(var i=0;i<list.length;i++){
        htmlString += '<a href="#"><span>'+list[i]+'</span></a>';
    }
    $(".m-countdown").html(htmlString);
    showRollling();
});
function showRollling(){
    var height = 40;    //這個數字是輪播圖片的高度
    var animationTime = 600; //這個數字是動畫時間
    var marginTime = 2000; //這個數字是間隔時間
    var nowimg = 0;     //訊號量
    var mytimer = null;
    //將圖片列表中的第一個節點複製，然後追加到佇列的最後。
    //$(".m-countdown a:first-child").clone().appendTo(".m-countdown");

    var mytimer = window.setInterval(
        function(){
            youanniu();
        }
        ,marginTime
    );
    <!--計時器暫停方法-->
    // window.clearInterval(mytimer);
    // mytimer = window.setInterval(
    function youanniu(){
        if(!$(".m-countdown a").is(":animated")){
            //折騰訊號量
            if(nowimg < $(".m-countdown a").length - 1){
                nowimg = nowimg + 1;
                showAnimate(nowimg);
            }else{
                nowimg = 0;
                $(".m-countdown a").each(function(index){
                    if(index==0){
                        $(this).css("display","block");
                    }
                    else {
                        $(this).css("display","none");
                    }
                }).css("top","7px");
            }
        }
    }
    function sho![這裡寫圖片描述](http://img.blog.csdn.net/20160807012707902)wAnimate(index) {
        $(".m-countdown a").eq(index).css("display","block");
        $(".m-countdown a").eq(index-1).animate(
            {
                "top": -height * nowimg
            }
            , animationTime
        );
    }
}

效果：
這裡寫圖片描述

html簡單的跑馬燈效果

很多專案中都會遇到有類似跑馬燈效果的訊息輪播展示，做了一個簡單的訊息輪播展示。主要程式碼如下： html <!DOCTYPE html> <html> <hea

簡單的跑馬燈效果（輪播圖）

font script meta 圖片 ive abs height 單單 none 邏輯簡介：想要圖片或者是文字向左移動，那肯定得用到定時器，那麽移動那就必然是距離左邊的left值在改變；核心問題就是通過定時器來改變ul距離left的值；本姑娘就是簡簡單單直直接接，上代碼

簡單實現跑馬燈效果

先看看效果在build.gradle中匯入依賴 implementation ‘com.sunfusheng:marqueeview:1.3.3’ 佈局檔案 <?xml version="1.0" encoding="utf-8"?> <androi

簡單實現TextVIew跑馬燈效果

<TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="莫聽穿林打葉聲，何妨吟嘯且徐行。竹杖芒鞋輕勝馬，誰怕？一蓑煙雨任平生。 "

挺簡單的一個跑馬燈效果 MarqueeTextView

自定義TextView： @SuppressLint("AppCompatCustomView") public class MarqueeTextView extends TextView { public MarqueeTextView(Conte

最簡單的跑馬燈效果

<?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android=“http://schemas.android.com/apk/res/and

HTML 跑馬燈效果

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>跑馬燈效果</title> <st

Android 開發筆記_textvieww跑馬燈效果

support ota 效果 utf bundle per ack top ddl 1 <?xml version="1.0" encoding="utf-8"?> 2 <LinearLayout xmlns:android="http://sche

TextView的跑馬燈效果（AS開發實戰第二章學習筆記）

color clas eat star log ble _for ellipsize ddl TextView的跑馬燈效果跑馬燈用到的屬性與方法說明singleLine 指定文本是否單行顯示ellipsize 指定文本超出範圍後的省略方式focusable 指定是否獲得焦點

TextView的跑馬燈效果

焦點包括效果 avi gpo textview 跑馬燈 nbsp lips TextView的gravity屬性可以指定文本的對齊方式跑馬燈的實現： 1.singleLine設置為true 2.ellipsize（文本超出後的省略方式，包括start、middle

vue文字跑馬燈效果

star lis using obia dir ng- visible tick cdn https://cdn.bootcss.com/jQuery.Marquee/1.5.0/jquery.marquee.js 兼容vue $("#demo4").marquee({

VUE之文字跑馬燈效果

文字 utf button doctype put inpu stop title set <!DOCTYPE html> Title <input type="button" value="浪起來"

Vue 文字跑馬燈效果

1. 話不多說看程式碼 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>

Android RecyclerView一個一個自動滾動，無限迴圈，聊天列表效果，跑馬燈效果

實現效果看到這個效果，看到很多人用ViewFlipper實現，但是效果並不理想，於是我想到用RecyclerView試試。主要是監聽recyclerView滑動，開始和暫停來控制，廢話不多說，上程式碼。自定義RecyclerView public class Auto

Vue跑馬燈效果（es5）

小程式實現跑馬燈效果

跑馬燈效果比較常見，一般做電商類的小程式都會使用到; 跑馬燈效果的製作製作方式很簡單，先方上程式碼，後面會對程式碼詳細講解一、wxml介面的實現 <view class="example"> <view class="marquee_box">

TextView 跑馬燈效果一個佈局可用多個效果

public class TextMarquee extends TextView { public TextMarquee(Context context, AttributeSet attrs) { super(context, attrs); } @Override protec

微信小程式：公告字幕滾動播放（文字跑馬燈效果）

一、需求公告文字僅限200字公告內容僅限一行文字顯示公告內容持續滾動二、解決思路使用動畫API（Animation.translate），完成移動動畫使用定時器API（setInterval）,完成迴圈播放動畫注

微信小程式-文字跑馬燈效果

效果如圖 WXML <scroll-view class="container"> <view class="scrolltxt"> <view class="marquee_box"> <view class=

Android 實現跑馬燈效果

這裡用到了HorizontalScrollView巢狀TextView，上xml佈局: <HorizontalScrollView android:id="@+id/horiSv" android:layout_width="match_parent"

html簡單的跑馬燈效果

相關推薦