css [滑动效果]Rollovers 实例教程

时间：2008-10-21 编辑：简简单单来源：一聚教程网

翻转的CSS
由三奇，又名Halikidiki ： 2005年1月19
现在正在一个我自己，我敢肯定，所有网页设计师在某个时候在其设计寿命想改变一个图像到另一个时，鼠标辗过（通常使用的联系）。最通用的方式实现这一目标是利用JavaScript和有很多教程了。但是，你（如果你像我这样的东西）停顿某处教程，跳到直线年底获得代码，然后只要复制并粘贴到您的网站上。现在，这个工作和一切，你不明白，为什么它的作品。或者，如果任何事情都会发生错误你怎么解决？翻车的CSS更简单，不需要任何东西，除非CSS和HTML （甚至不为预）。

本教程将引导您如何使锚标签到链接的图片，然后不断变化的图片时，鼠标上的形象。

这是一个例子，就是我要告诉你如何去做：

以下是如何
下面的步骤将解释如何可以实现这一效果。

打开HTML文件您想要一个CSS翻滚（或使用此HTML代码如果您只想进行试验的效果）：

<html>
<head>
<title>CSS Rolloverstitle>
<style type="text/css">
@import "rollover.css";
style>
head>

<body>
<div>
<a href="#" id="example">Homea>
div>
body>
html>
您不必担心任何的代码（你应该很容易理解这一切反正）以外的锚定标记的，什么是内部的风格标记。 保存您的HTML文件。 开放的FrontPage /制作/记事本（无论你喜欢使用），并粘贴的CSS ： #example{ height: 20px; width: 158px; text-indent: 10000px; overflow: hidden; background: url(kirupa1.gif) top left no-repeat; display: block; } #example:hover{ background-position: bottom left; } 为了本教程，请档案rollover.css并保存在同一目录作为您的HTML文件。 现在，这是本从不同majorly使用JavaScript 。对于转你有两个形象，一个是原来的状态和一个过渡的状态。当使用的CSS翻车你需要把图片都在相同的图像，像这样： 保存的形象kirupa1.gif在同一目录中的HTML + CSS文件。然后查看您的HTML文件和voila ！ 现在...时间去通过这个代码！ ＃什么是指所谓的ID什么，一样上课，但应只能使用一次的HTML文件。 尺寸kirupa1.gif是158px的40px 。但是，一半的高度是一个形象，我们不希望看到（至今），我们将高度20px ，以及后来对我们制定的背景，地位最高。 对于浏览器无法查看的CSS （是的，我知道... ）你应该始终包括一些文字中之间的开启和关闭锚标记。对于那些浏览器可以查看的CSS我们必须摆脱这一案文。因此，我们确定了文本缩进一些数量庞大，并设置溢出为隐藏。自我解释。 最后两行中的＃例如（）只是所谓的背景图片，告诉它自己置于上方，并且也不要重演。 其次是＃例如：悬停-在悬停说基本上是当鼠标移动到这个因素风格像这样。 所有这一切都没有改变它是展示顶端20pixels ，以显示底部20pixels ，有效图像切换。 干得好！您已经成功地创造了一些纯粹的CSS翻车！这是非常简单的比使用JavaScript ，因为它并不需要载入图像时，第二次鼠标辊超过您有没有必要使用JavaScript预装的形象。

上一个： div+css 列表菜单实例教程
下一个： css class与id的区别

推荐专题

最新下载

热门教程

css [滑动效果]Rollovers 实例教程

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程