2. 程式人生 > >資訊滾動（marquee+JS實現）

資訊滾動（marquee+JS實現）

阿新 • • 發佈：2019-02-20

Attributes behavior Sets how the text is scrolled within the marquee. Possible values are scroll, slide and alternate. If no value is specified, the default value is scroll. bgcolor Sets the background color through color name or hexadecimal value. direction Sets the direction of the scrolling within the marquee. Possible values are 
left, right, upand down. If no value is specified, the default value is left. height Sets the height in pixels or percentage value. width Sets the width in pixels or percentage value. hspace Sets the horizontal margin loop Sets the number of times the marquee will scroll. If no value is specified, the default value is −1, which means the marquee will scroll continuously.
scrollamount Sets the amount of scrolling at each interval in pixels. The default value is 6. scrolldelay Sets the interval between each scroll movement in milliseconds. The default value is 85. Note that any value smaller than 60 is ignored and the value 60 is used instead, unlesstruespeed is specified.
truespeed By default, scrolldelay values lower than 60 are ignored. If truespeed is present, those values are not ignored. vspace Sets the vertical margin in pixels or percentage value. 補充：
  • behavior的預設值為scroll
  • scrollamount 表示運動速度，值是正整數，預設為6，數值越大，移動速度也越快
  • scrolldelay 用於設定兩次滾動操作之間的間隔時間，該時間以毫秒為單位
  • <marquee bgcolor=FF0000>...</marquee> 設定背景顏色
  • <marquee onmouseover="this.stop();" onmouseout="this.start();">...</marquee> 滑鼠移上去就暫停滾動
為什麼<marquee>標籤會被棄用？ 因為它違反了W3C的武學道義，W3C江湖第一原則就是功能性分離即行為與表現的分離，只有恪守這個原則的標籤才會被允許參加舞林大會，其他類似於marquee爾等皆是歪門邪道，武功再高也不要，不要！好像就是武功太高啦，哈哈 無縫滾動 var area =document.getElementById("con"); var con1 = document.getElementById("con1"); var con2 = document.getElementById("con2"); con2.innerHTML = con1.innerHTML; function scrollUp() { if (con.scrollTop >= con1.offsetHeight) { con.scrollTop = 0; } else { con.scrollTop ++; } } var myScroll = setInterval("scrollUp()", 30); con.onmouseover = function () { clearInterval(myScroll); } con.onmouseout = function () { myScroll = setInterval("scrollUp()", 30); } 間歇性滾動 // 克隆 var box3con =document.getElementById("box3con"); box3con1.innerHTML += box3con1.innerHTML; function box3scrollUp() { box3con.scrollTop ++; if (box3con.scrollTop % 30 == 0) { clearInterval(box3myScroll); setTimeout(function () { box3con.scrollTop ++; box3myScroll = setInterval(box3scrollUp, 50); }, 2000); } } var box3myScroll = setInterval(box3scrollUp, 50); box3con.onmouseover = function () { clearInterval(box3myScroll); } box3con.onmouseout = function () { box3myScroll = setInterval(box3scrollUp, 50); } <marquee>案例 <div id="box1"> <marquee behavior="" direction="up"> 我是滾動預設up </marquee> <marquee behavior="scroll" direction="down" > 我是滾動behavior="scroll"down </marquee> <marquee behavior="slide" direction="" scrollamount="6" loop="2"> 我是滾動behavior="slide" </marquee> <marquee behavior="scroll" direction="right" scrollamount="10" scrolldelay="0" onmouseover="this.stop();" onmouseout="this.start();"> <p><a href="">我是滾動behavior="scroll"</a></p> </marquee> <!-- "down"與"left"的合成 --> <marquee behavior="scroll" direction="down" width="250" height="150" behavior="alternate" style="border:solid"> <marquee behavior="alternate" direction="left"> This text will bounce </marquee> </marquee> </div>

相關推薦

資訊滾動（marquee+JS實現）

Attributes behavior Sets how the text is scrolled within the marquee. Possible values are scroll,

手風琴實現效果js（純js實現）

這是用原生js實現的一個手風琴效果，但是當滑鼠快速滑動的時候，會出現輕微的抖動效果！ <!DOCTYPE html> <html> <head>     <title>js實現手風琴效果</titl

iOS UITableView 快速滾動（索引方式實現）

參考：http://my.oschina.net/joanfen/blog/204503 思路：UITableView一次性載入資料過多時，需要滑動多次觸底。想通過索引實現快速滑動，索引中載入20個空點。使用者在最右端滑動時，索引框顯示，當觸及索引點時指向其想對應的UITa

className相同的多個元素分別設定監聽事件（原生JS實現）

JS使用for迴圈動態生成多個div，HTML大概是這樣： <div class='title'> y </div> <div class='title'> i </div> <div class='title'> x &l

省市區聯動（原生js實現）

<!DOCTYPE html> <head> <title> 三級聯動 </title> <meta charset="utf-8"> </head> <bod

3377加減乘除等於24（原生js實現）

<!doctype html> <html> <head> <meta charset="utf-8"> <title>無標題文件</title> </head> <body> </body>

自己開發簡單web伺服器二（Node.js實現）

Node.js 剛接觸Node.js沒多久，試用了一下，輕輕鬆鬆幾行程式碼就可以實現一個簡單的HTTP伺服器，開發起來的確比其他語言快多了。 Node.js是一個開源的JavaScript庫，可以跨平臺執行在Windows、Linux、Mac上。JS解析庫用的是大名鼎鼎的G

特定位取反（js實現）

ack 左移 運算 pre 是把 data- 類型 位操作 個數 去華為面試的時候。沒有做好準備工作。面試的流程沒有問清也沒有查，結果一過去就讓上機做題，著實有點措手不及。筆者是擅長前端的Java Webproject師啊，主要的底層編程知識早已生疏

select默認選中項顏色為灰色，選擇後變為黑色（js實現）

pre var select ted col item first round fin <script> var unSelected = "#999"; var selected = "#333"; $(function () {

微信小程式：登陸獲取使用者資訊，包括維護3rdSession。（Node.js-Koa）

前兩三個月最常見的問題就是登陸模組的問題了。自己也改了好幾次登陸的問題，從普通登陸，一直改到維護3rdSession。（token） 普通登陸：使用者資料包括appid，secret全部暴露在外，相對來說不安全。 上前臺程式碼塊： wxml <button open-typ

陣列和物件這2種資料結構的儲存和轉換的2道題（JS實現）

這是關於陣列和物件這2種資料結構的儲存和轉換的2道題，相信你看了和做了之後會有所收穫。 1.將物件轉換成二維陣列 var scoreObject = { "Tony": { "Math": 95, "English": 79, "Mus

二叉樹的遍歷演算法（js實現）

之前我的部落格中講到了如何通過js去實現一顆二叉樹，有興趣的可以去我的部落格中看下。今天我們來一起實現下二叉樹的遍歷演算法。歡迎大家幫忙指出不當之處，或者進行深入的挖掘。大家一起進步。二叉樹吶，有三種遍歷演算法，1：中序遍歷，2：先序遍歷，3：後序遍歷。在我們看具體實現之前，我們想下為什麼要這樣做？二叉樹廣泛

LeetCode加一演算法（JS實現）

給定一個由整陣列成的非空陣列所表示的非負整數，在該數的基礎上加一。 最高位數字存放在陣列的首位， 陣列中每個元素只儲存一個數字。 你可以假設除了整數 0 之外，這個整數不會以零開頭。 示例 1: 輸入: [1,2,3] 輸出: [1,2,4] 解釋: 輸入陣列表示數字 1

學生資訊管理系統--（Java+MySQL實現）

基於Java swing+MySQL實現學生資訊管理系統：主要實現JDBC對學生資訊進行增刪改查，應付一般課設足矣，分享給大家。（由於篇幅原因，程式碼未全部列出，如有需要留下郵箱） 1、開發環境：jdk7+MySQL5+win7 程式碼結構：model-dao

重建二叉樹（JS實現）

題目 輸入某二叉樹的前序遍歷和中序遍歷的結果，請重建出該二叉樹。假設輸入的前序遍歷和中序遍歷的結果中都不含重複的數字。例如輸入前序遍歷序列{1,2,4,7,3,5,6,8}和中序遍歷序列{4,7,2,1,5,3,8,6}，則重建二叉樹並返回。 /* fu

職工資訊管理系統（c語言實現）

功能實現： （1）系統以選單方式工作 （2）職工資訊錄入功能（職工資訊用檔案儲存）－－輸入 （3）職工資訊瀏覽功能－－輸出 （4）職工資訊查詢功能－－演算法 查詢方式：按姓名查詢/按職工號查詢 （5）職工資訊

動態規劃 剪繩子 （JS 實現）

題目 現有一根長度為N的繩子，需要你剪成M段，使M段的乘積最大。（其中M、N都為整數，剪成的每段長度也為整數，N已知，M未知）。例如長度為8的繩子，當剪為3段乘積最大，即2*3*3=18. 思路

JS實現簡易版貪吃蛇小遊戲（純js程式碼）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head&

使用Ajax模仿Google suggest的搜尋提示（Java+JSP+JS實現）

最近專案需要作一個類似google suggest的搜尋提示功能，在網上找了一些資料，自己弄弄就出來了。專案的關鍵是JS。 實際執行效果： 即使在輸入的時候前面有空格，也可以正確判斷。 工程結構： Keywords.java package com.bir

m個元素的陣列，隨機選擇n個不重複元素（js實現）

問題描述： 在由m個元素的source陣列中，隨機選擇n個不重複的元素放入新陣列target 注：source陣列元素本身不重複，m>n 解決方案 方案一： 根據陣列source，在0到source.length-1範圍內隨機一個數作為下標，