怎么用CSS代码实现,好多图片横向的不间断滚动?

html-css010

怎么用CSS代码实现,好多图片横向的不间断滚动?,第1张

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保存后,使用浏览器打开预览效果。

1、输入代码,其中button是鼠标要滑动的地方,滑过button时,class为content的内容就要显示出来,鼠标滑出去的时候,这块内容就需要重新隐藏起来。

2、把黑色内容的部分初始状态写成隐藏。只需要在class为content里写上display:none,即可。

3、来看下代码和浏览器中的效果。可以看到黑色内容部分已经不见了。

4、把onmouseover和onmouseout两个事件作用在button上面,再写overShow()和overHide()两个 函数。可以看到在函数中通过改content的display属性来实现显示隐藏的效果。

5、在浏览器中就可以看到效果了。