使用选取框标记滚动

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

使用选取框标记滚动

回答

相关问题