css中怎样让内容或图片滚动？

html-css058

css中怎样让内容或图片滚动？,第1张

让图片和文字滚动以前是用<marquee></marquee>标签，不过现在已经很少人使用这个标签了，因为局限性太大！

现在一般都采用JS的方式或jquery具体的看你的具体需求才能使用相应的代码。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

<!--

#aa {

height: 150px

position: relative

border: 1px solid #000000

width: 585px

overflow: hidden

margin: 0px

padding: 0px

}

#aatable {

padding-top: 0px

padding-right: 0px

padding-bottom: 0px

padding-left: 0px

position: absolute

left: 0px

top: 0px

}

-->

</style>

<script type="text/javascript">

function copyaa()

{

var onetab=document.getElementById("a").getElementsByTagName("table")[0]

var twotab=onetab.cloneNode(true)

document.getElementById("b").appendChild(twotab)

mmm()

}

function mmm()

{

var obj=document.getElementById("aatable")

var left=obj.style.left

left=eval(left.replace("px",""))

left-=5

if(left<=-956)

{

left=0

}

obj.style.left=left+"px"

setTimeout("mmm()",50)

}

</script>

</head>

<body onload="copyaa()">

<div id="aa">

<table border="0" cellspacing="0" cellpadding="0" id="aatable" style="left:0">

<tr>

<td id="a">

<table border="0" cellspacing="0" cellpadding="0">

<tr>

<td><img src="images/3.jpg" /></td>

<td><img src="images/5.jpg" /></td>

<td><img src="images/6.jpg" /></td>

<td><img src="images/8.jpg" /></td>

</tr>

</table>

</td>

<td id="b"></td>

</tr>

</table>

</div>

</body>

</html>

td里面的图片 你自己找图片放进去就行了，欢迎采纳，

你好！CSS实现不了，配合JS才行

代码如下：

<style type="text/css">

<!--

#demo {overflow:hiddenwidth:740px}

#indemo { float: leftwidth: 800%}

#demo1 { float: left}

#demo2 { float: leftmargin-left:7px}

-->

</style>

<div id="demo">

<div id="indemo">

<div id="demo1">

<a href="#"><img src="1.jpg" alt="#" /></a>

<a href="#"><img src="1.jpg" alt="#" /></a>

<a href="#"><img src="1.jpg" alt="#" /></a>

<a href="#"><img src="1.jpg" alt="#" /></a>

<a href="#"><img src="1.jpg" alt="#" /></a>

<a href="#"><img src="1.jpg" alt="#" /></a>

</div>

<div id="demo2"></div>

</div>

</div>

<script>

<!--

var speed=10//数字越大速度越慢

var tab=document.getElementById("demo")

var tab1=document.getElementById("demo1")

var tab2=document.getElementById("demo2")

tab2.innerHTML=tab1.innerHTML

function Marquee(){

if(tab2.offsetWidth-tab.scrollLeft<=0)

tab.scrollLeft-=tab1.offsetWidth

else{

tab.scrollLeft++

}

}

var MyMar=setInterval(Marquee,speed)

tab.onmouseover=function() {clearInterval(MyMar)}

tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)}

-->

</script>