1. 程式人生 > >JavaScript實現走馬燈效果,上 下 左 右無縫連線、迴圈滾動

JavaScript實現走馬燈效果,上 下 左 右無縫連線、迴圈滾動

<!-- 指向連結圖片的URL -->
<div align="center" id="demo" style="overflow:hidden;height:100px;border-width:1px 1px 1px 1px;border-style:dotted dotted dotted dotted;">
    <div id="demo1">
	  <!-- 定義內容-->
	  <a href="#">1 一</a><br>
	  2 二<br>
	  3 三<br>
	  5 四<br>
	  6 五<br>
	  4 六<br>
	  <!-- 定義內容 end-->
    </div>
    <div id="demo2"></div>
</div>

<script language="javascript" type="text/javascript">
<!--
var demo = document.getElementById("demo");
var demo1 = document.getElementById("demo1");
var demo2 = document.getElementById("demo2");
var speed=30;    //數值越大滾動速度越慢
demo2.innerHTML = demo1.innerHTML;

demo.scrollTop = demo.scrollHeight+'px';
function Marquee(){
   /*向下的無縫迴圈滾動
    if(demo1.offsetTop-demo.scrollTop>=0)
        demo.scrollTop+=demo2.offsetHeight
    else{
        demo.scrollTop--
    }
   */

   /*向下的無縫迴圈滾動
    if(demo2.offsetTop-demo.scrollTop<=0)    //當滾動至demo1與demo2交界時
        demo.scrollTop-=demo1.offsetHeight    //demo跳到最頂端
    else{
        demo.scrollTop++
	}
	*/
	
	/*向左的無縫迴圈滾動
	 if(demo2.offsetWidth-demo.scrollLeft<=0)
			demo.scrollLeft-=demo1.offsetWidth
		else{
			demo.scrollLeft++
		}
	*/
	 
	 
	/*向右的無縫迴圈滾動
	   if(demo.scrollLeft<=0)
			demo.scrollLeft+=demo2.offsetWidth
		else{
			demo.scrollLeft--
		}
	*/
}
var MyMar = setInterval(Marquee,speed);
demo.onmouseover = function(){clearInterval(MyMar)}
demo.onmouseout = function(){MyMar = setInterval(Marquee,speed)}
-->
</script>


相關推薦

JavaScript實現走馬燈效果, 無縫連線迴圈滾動

<!-- 指向連結圖片的URL --> <div align="center" id="demo" style="overflow:hidden;height:100px;border-width:1px 1px 1px 1px;border-styl

Android開發使用PopupWindow在指定View///顯示(選單在指定位置顯示)

PupopWindow動態獲取顯示的位置,並新增指示箭頭 效果圖專案地址:(歡迎star)使用方法 mLucklyPopopWindow = new LucklyPopopWindow(this); //給popupWindow新增資料

使用JavaScript實現在頁面所有內容加載完之前一直顯示loading...頁面

back pro webkit index tro ear keyframes nload radius Html 1 <body class="is-loading"> 2 <div class="curtain"> 3 <

安卓實現走馬燈效果 textview 實現字型迴圈滾動效果

使在layout 中 實現文字滾動效果 也就是走馬燈的效果 只需要在響應控制元件裡面加上這幾行程式碼就可以 1              android:singleLine="true"             android:ellipsize="marquee"            

原生JS實現走馬燈效果

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title></title> <style> * {margin:0; paddi

SQL的四種連線-連線連線連線連線

聯接條件可在FROM或WHERE子句中指定,建議在FROM子句中指定聯接條件。WHERE和HAVING子句也可以包含搜尋條件,以進一步篩選聯接條件所選的行。     聯接可分為以下幾類:     1、內聯接(典型的聯接運算,使用像 =  或 <> 之類的比較運算

深入理解SQL的四種連線-連線連線連線連線

1、內聯接(典型的聯接運算,使用像 = 或 <> 之類的比較運算子)。包括相等聯接和自然聯接。 內聯接使用比較運算子根據每個表共有的列的值匹配兩個表中的行。例如,檢索 students和courses表中學生標識號相同的所有行。 2、外聯接。外聯接

JavaScript實現簡單的雙向資料繫結(EmberAngularVue)

什麼是雙向資料繫結呢? 簡單的說 就是UI檢視與資料繫結在了一塊 也就是資料和檢視是同步改變的 雙向資料繫結最常見的應用場景就是表單 (應用場景還是很有限的) 現在我們要實現這樣一個簡單的資料繫結 輸入欄中輸入字元 和它繫結的節點內容

詳解SQL的四種連線-連線連線連線連線

1、內聯接(典型的聯接運算,使用像 =  或 <> 之類的比較運算子)。包括相等聯接和自然聯接。      內聯接使用比較運算子根據每個表共有的列的值匹配兩個表中的行。例如,檢索 students和courses表中學生標識號相同的所有行。        2、

連線連線連線交叉連線及其區別

首先建立兩張表A、B。 表A: Aid:int型別,無符號遞增,主鍵 name:varchar型別 表B: Bid:int型別,無符號遞增,主鍵 name:varchar型別 age:int型

oracle連線連線完全外連線以及(+)號用法

準備工作 oracle連線分為: 左外連線:左表不加限制,保留左表的資料,匹配右表,右表沒有匹配到的行中的列顯示為null。右外連線:右表不加限制,保留右表的資料。匹配左表,左表沒有匹配到的行中列顯

連線連線連線全外連線交叉連線(CROSS JOIN)-----小知識解決大資料攻略

       早就聽說了內連線與外連線,以前檢視中使用過、這次自考也學習了,只是簡單理解,現在深入探究學習(由於上篇部落格的出現)與實踐: 概念 關鍵字: 左右連線 資料表的連線有: 1、內連線(

【技術篇】SQL的四種連線-連線連線連線連線

聯接條件可在FROM或WHERE子句中指定,建議在FROM子句中指定聯接條件。WHERE和HAVING子句也可以包含搜尋條件,以進一步篩選聯接條件所選的行。     聯接可分為以下幾類:     1、內聯接(典型的聯接運算,使用像 =  或 <> 之類的比較運算子)。包括相等聯接和自然聯接。  

連線連線連線交叉連線區別

http://blog.csdn.net/cnham/archive/2008/06/25/2584936.aspx  在之前,我對MSSQL中的內連線和外連線所得出的資料集不是很清楚。這幾天重新溫習了一下SQL的書本,現在的思路應該是很清楚了,現在把自己的理解發出來給大家溫習下。希望和我一樣對SQL的連線

表的複雜查詢----多表查詢兩表的條件連線連線(自連線連線連線子查詢分頁查詢

基於兩個或兩個以上的表或檢視的查詢。例如:emp和dept是兩張表。(這兩張表的deptno是共同欄位)    ①通過什麼條件把兩張表關聯(如果不使用條件關聯將產生行數乘積的合集---笛卡爾集)例子:emp表字段包含:每行有自己的名字和id以及自己的上級的id,同時自己的上級

mysql內連線連線連線連線詳解

內連線: 只連線匹配的行 左外連線: 包含左邊表的全部行(不管右邊的表中是否存在與它們匹配的行),以及右邊表中全部匹配的行 右外連線: 包含右邊表的全部行(不管左邊的表中是否存在與它們匹配的行),以及左邊表中全部匹配的行 全外連線: 包含左、右兩個表的全部行,不管另外一邊的表

關於多表查詢sql常用的連線語句:連線連線連線

1)內聯接:    內聯接使用比較運算子(使用像 =  或 <> 之類的比較運算子)根據每個表共有的列的值匹配兩個表中的行,根據這兩張表中相同列的條件,得出其      交集。例如:  

12SQL Server:SQL的四種連線-連線連線連線連線

聯接條件可在FROM或WHERE子句中指定,建議在FROM子句中指定聯接條件。WHERE和HAVING子句也可以包含搜尋條件,以進一步篩選聯接條件所選的行。     聯接可分為以下幾類:     1、內聯接(典型的聯接運算,使用像 =  或 <> 之類的比較運算子)。包括相等聯接和自然聯接。 

mySQL進行多表的連線連線連線全外連線

內連線: 只連線匹配的行 左外連線: 包含左邊表的全部行(不管右邊的表中是否存在與它們匹配的行),以及右邊表中全部匹配的行 右外連線: 包含右邊表的全部行(不管左邊的表中是否存在與它們匹配的行),以及左邊表中全部匹配的行 全外連線: 包含左、右兩個表的全部行,不管另外一

連線連線連線交叉連線區別(圖解)

在之前,我對MSSQL中的內連線和外連線所得出的資料集不是很清楚。這幾天重新溫習了一下SQL的書本,現在的思路應該是很清楚了,現在把自己的理解發出來給大家溫習下。希望和我一樣對SQL的連線語句不太理解的朋友能夠有所幫助