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

html-css025

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

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

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

1、在html编辑器软件内，新建html页面，（一般我们常使用的两款编辑器是HBuilder和Adobe Dreamweaver，这里我使用的软件是HBuilder）。

2、在<body></body>添加<div  class="nav"></div>,于<div  class="nav"></div>中间添加<ul></ul>,在<ul>内添加<li>标签，<li>内同时添加<a>标签，方便连接导航跳转。

3、在新建的<a></a>内，添加横向导航要显示的内容。

4、在<title></title>下方添加一个<style type="text/css"></style>。

5、源文件html保存后，使用浏览器打开预览效果。

<table width=514 border=0 align="center" cellpadding=0 cellspacing=0>

<tr>

<td><div id=demo style="OVERFLOW: hiddenz-index: 3pxWIDTH: 514px">

<table align=left border=0>

<tr>

<td id=demo1><table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">

<tr align="center" valign="middle">

<%

dim n1

n1=0

%>

<%while not rs.eof and n1<999

if rs("picurl")<>"" then

n1=n1+1

%>

<td><table border=0 align=center cellpadding=0 cellspacing=0><tr><td><table border=0 align=center cellpadding=2 cellspacing=2 bgcolor='#ffffff' style="border: 0px double #FFFFFF"><tr><td><table border=0 align=center cellpadding=3 cellspacing=2 bgcolor='#ffffff' style="border: 1px double #666666">

<tr>

<td align="center" valign="middle"><a href="shownews.asp?id=<%=rs("newsid")%>" target="_blank" title="<%=rs("title")%>"><img src='../jindian/<%=rs("picurl")%>' alt='点击查看详细' height="111" border="0"></a></td>

</tr>

</table></td></tr></table></td></tr><tr><td align="center"><% if len(rs("title"))>11 then %><%=mid(rs("title"),1,11)%>...<%else %><%=rs("title")%><%end if%></td></tr></table></td>

<td width=4></td>

<% end if

rs.movenext

wend

n1=0

rs.movefirst

%>

<%

while not rs.eof and n1<999

if rs("picurl")<>"" then

n1=n1+1

%>

<% end if

rs.movenext

wend

%>

</tr>

</table></td>

<td id=demo2 valign=top></td>

</tr>

</table>

</div>

<script>

var speed3=20//速度数值越大速度越慢

demo2.innerHTML=demo1.innerHTML

function Marquee(){

if(demo2.offsetWidth-demo.scrollLeft<=0)

demo.scrollLeft-=demo1.offsetWidth

else{

demo.scrollLeft++

}

}

var MyMar=setInterval(Marquee,speed3)

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

demo.onmouseout=function() {MyMar=setInterval(Marquee,speed3)}

</script></td>

</tr>

</table>