使用選取框標記滾動

6

不要使用<marquee>

選框標籤是導致文本向上滾動，向下，向左或向右自動非標準的HTML元素。該標籤首先在微軟Internet Explorer的早期版本中引入，與Netscape的blink元素相比，該標籤爲，作爲HTML標準的專有非標準擴展，帶有可用性問題。 W3C棄用，並不建議他們使用任何HTML 文檔。

如果你仍然想選取框達到預期效果看到這 http://remysharp.com/demo/marquee.html

來源

2012-07-21 11:41:04 Rab

+0

那麼我到底想幹什麼？我需要自動滾動幻燈片徽標。 – MehulKanani 2012-07-21 12:58:32

+0

http://remysharp.com/demo/marquee.html – Rab 2012-07-21 13:19:28

+0

我想設置客戶端標誌圖像與選框，但其設置垂直形式 – MehulKanani 2012-07-21 13:22:55

2

只使用CSS，因爲你的標籤說，一個解決方案是使用keyframe animations。但是，IE9或更早版本不支持關鍵幀動畫（IE10支持它們，所有當前版本的Chrome，Firefox，Safari和Opera都支持）。

例使用關鍵幀動畫：http://dabblet.com/gist/3155878

HTML

<div class="carousel-wrapper"> 
    <ul class="logo-list"> 
     <li><a href="#"><img src="logo-img1.jpg"></a> 
     </li><li><a href="#"><img src="logo-img2.jpg"></a> 
     </li><!--many more list items just like this--> 
     </ul> 
</div>

基本CSS

.carousel-wrapper { 
    width: 32em; 
    height: 9em; 
    margin: 10em auto; 
    padding: 0; 
    border: solid 1px #ccc; 
    overflow: hidden; 
} 
.logo-list { 
    margin: 0 0 0 16em; 
    padding: .5em 0; 
    white-space: nowrap; 
    animation: scrollme 35s infinite linear alternate; 
} 
.logo-list li { 
    padding: .25em; 
    display: inline-block; 
} 
.logo-list a { 
    width: 10em; 
    height: 7.5em; 
    border: solid 1px #ccc; 
    display: block; 
} 
@keyframes scrollme { 
    to {margin-left: -173em;} 
    /* 173em = 18 list items * 10.5em - 16em 
    (10.5em = 10em width + 2*.25em paddings left and right) 
    (16em = half the width of the wrapper) */ 
}

解決方案IE9及以上：

1.使用JavaScript。使用jQuery，它是一樣簡單：

$('.logo-list').animate({ marginLeft: '-173em'}, 35000, 'linear');

這裏演示http://jsfiddle.net/thebabydino/gTRXQ/1/

然而，如果禁用了JavaScript，用戶將只能看到第一個圖像（除非他選擇並拖動......其中大部分用戶不）。

2.只是CSS。那麼，完全相同的效果（自動滾動）無法實現，但有幾個選項。

拳重要的是，<html>元素添加.lt-ie9和.ie9類：

<!--[if lt IE 9]><html class="lt-ie9"><![endif]--> 
<!--[if IE 9]><html class="ie9"><![endif]--> 
<!--[if gt IE 9]><!--><html><!--<![endif]-->

，這樣你可以做不同的事情。

a）第一個選項：醜陋的選項。沒有自動滾動，只需在包裝紙上留下一個水平滾動條（當然也可以增加其高度），以便用戶可以滑動以查看所有圖像。

.ie9 .carousel-wrapper, .lt-ie9 .carousel-wrapper { 
    height: 10em; 
    overflow-x: scroll; 
}

B）第二個選項：只適用時，有沒有那麼多的圖像。堆疊起來，並揭示它們hover - 像我在這個畫廊做的：http://jsfiddle.net/thebabydino/F7MKy/6/

C）選項只會在IE9工作，但你可以使用選項a）或b）作爲後備舊版本。添加某種導航，如http://dabblet.com/gist/3156683（在IE9中查看）。

d）醜陋的選項＃2。回到僅用於IE9及更高版本的字幕（使用條件註釋）。

我會怎麼做：

首先，一類.no-js添加到<html>

使用Modernizr刪除它，如果JavaScript沒有被禁用。在這種情況下，請使用JavaScript版本的自動滾動功能。

如果JavaScript被禁用，但支持動畫，請使用關鍵幀動畫。在這種情況下，.no-js類未被刪除，所以：

.no-js .logo-list { animation: scrollme 35s infinite linear alternate; }

如果沒有JavaScript的動畫也不支持，儘量的我在點列出的選項另一個。

來源

2012-07-21 13:59:53 Ana

0

您應該更正您網站中的結構性錯誤。

例如，選取框位於<ul>元素內，但在任何<li>元素之外。我相信瀏覽器會遇到這個問題！
因此，請確保網站在繼續之前在http://validator.w3.org/上進行驗證。

來源

2012-07-21 14:12:18

使用選取框標記滾動

回答

相關問題