当前位置：首页 > 网页特效 > 图片代码 >

非常不错的jQuery的滑动文字覆盖图片效果酷悬停滑动效果

时间：2013-08-14 08:58 来源：互联网作者：源码搜藏收藏推荐

广告推荐

效果预览立即下载

设置文件

好了，让我们开始打开我们的文本编辑器，创建一个新的HTML文档，保存到您的桌面上为“index.html”。现在创建一个新的CSS文件并保存此“的style.css”在新文件夹命名为“CSS”。

包括我们的文件

返回到我们的索引文件，现在我们需要包括我们新创建的CSS文件和jQuery库到我们的文件头。

<link href="style.css"，我们目前无法显示地点的地图。type="text/css" />

在本教程中，我们将链接到谷歌API版本的jQuery的机会在某些时候，你的用户已经遇到的这个文件，所以它已经被缓存在自己的系统。

如何得到src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </ SCRIPT>

标记向上

现在，我们已经包含了我们所需的文件这一效应来工作，让我们的窗口，我们的文档中添加一些HTML。包括HTML里面<body>标记索引文件。

<div id="container">的 <div id="overlay">的  </ DIV> <div id="hover">的  </ DIV> </ DIV>

风格的身体

打开css文件，我们创建较早命名的“风格”，让我们添加一些页面风格，只是为了少平淡。您可以更动就像你喜欢这些颜色，它的所有优先股真的。

身体{ 背景颜色：＃1e1e1e; 顶：150像素; 字体大小：11像素; 字体家庭：宋体，黑体，无衬线; } H1 { 字体大小：12px; 字体重量：大胆; 颜色：＃4de2e0; } A { 颜色：＃4de2e0; 文字装饰：无; }

集装箱式

现在的页面有一点点的颜色，我们可以添加的风格给我们的div，我们要开始＃容器div这样我们就可以讨论通过的原因具有一定的风格。

＃集装箱{ 宽度：450px; 高度：150像素; 相对位置：; 溢出：隐藏; 的z-index：0; 填充：0; 保证金：0汽车;  边框：10px的固体＃414141; } ＃集装箱：悬停{ 边框颜色：＃303030; }

容器的div显示我们的形象，这两个其他的div（＃悬停和＃叠加）将滑过。

我们设定的这个位置相对的，因为我们需要设置，使我们孩子的div绝对定位他们的观点-这是一个重要的风格。

溢出
这种风格基本上隐藏了两个子潜使他们滑过的图像效果。

桩的底部，这为我们提供了透明看看从上面的div 的z-index的div。

叠加样式

这是DIV病给我们的半透明的黑色效果消失在我们的形象，让我们再次添加样式到我们的css文件，并通过一些重要的风格。

＃叠加{ 背景颜色：＃000; 显示：块; 位置：绝对; 顶：0; 左：0; 宽度：450px; 高度：150像素; 的z-index：1; }

背景颜色，
我们可以改变这个颜色，我们什么都想要的效果，例如＃FFF白色。

显示
div是一个空的，我们需要显示它作为块。

我们设定的这个位置是绝对的，这样我们就可以定位任何地方，我们喜欢我们的容器中的定位相对。

顶部和左侧，
这将放置在最顶端和最左边，我们将改变我们的容器div的左侧位置，以后使用jQuery的div。

我们已经建立的z-index为1，这样，它坐落在我们的形象之上。

hover样式

现在，让我们添加的样式末期息＃悬停，其中包含的内容在我们的滑动效果。

＃悬停{ 宽度：400像素; 显示：块; 高度：100像素; 位置：绝对; 的z-index：3; 填充：25PX; } ＃悬停P { 颜色：＃FFF; 字体重量：正常; }

宽度和高度，你可能已经注意到，我们已经降低了我们的宽度和高度在这里 - 的原因，我们要使用填充，使我们的内容没有被挤压英寸
位置，我们这个div的定位绝对再次让我们可以控制，我们将在我们的容器div。

假内容

你可以把任何你喜欢在你的分区，但现在我只是要放置在一些虚拟的内容。

<H1>酷悬停滑动效果！</ H1>  <P> Lorem存有简直是虚拟文本的印刷和排版行业。Lorem存有一直是业界标准的虚拟文本，自从16世纪，当一个未知的打印机类型的厨房和炒它做一个类型标本的书。</ P>   <P> <a href="#">更多的</ A> </ P>

里面去＃悬停格。

让我们坐下到jQuery

现在，有趣的东西，我们就可以开始使用jQuery的一点点的动画内容。要做到这一点，我们需要在我们的文件头部分插入的开幕和闭幕的脚本标记。

<script type="text/javascript">   $（文件）。就绪（函数（）{  }）;  </ SCRIPT>

什么是文件准备好了？

基本上，我们在这里做什么，不告诉我们的代码运行，除非文档完全加载，并准备这样做。另外，我们可以把我们的jQuery在我们的正上方收盘body标签在页脚会自动让页面加载之前运行我们的脚本，这意味着我们可以消除我们的document.ready功能一起。

设置变量

在这里我们的代码设置变量的原因是真的，只是为了节省重复的代码，在这种情况下是非常有用的。

<script type="text/javascript">  $（文件）。就绪（函数（）{  颜色= $（“＃叠加”）;  内容= $（“＃悬停”）;  }）;  </ SCRIPT>

隐藏的div

如果你预览代码，我们已经写了这么远，你会注意到，所有的div坐在彼此的顶部，隐藏我们的形象，这是不好的。为了解决这个问题，我们将需要使用jQuery来隐藏这些元素，让我们把这些变量来使用。

<script type="text/javascript"> $（文件）。就绪（函数（）{  颜色= $（“＃叠加”）;  内容= $（“＃悬停”）;  content.hide（）;  colour.hide（）;  }）;  </ SCRIPT>

现在你会发现，我们看到的是我们的形象，这是伟大的。

将鼠标悬停在某些颜色

现在，我们打算把我们的＃叠加格的一些使用和淡入，然后再次备份。添加下面的代码，直接在上面</ SCRIPT>标记。

$（“＃”）。悬停（函数（）{  colour.stop（）。fadeTo（500，0.7）  }  ，函数（）{  colour.stop（）。fadeTo（500，0）  }）;

时间一点点的解释，在代码“500”代表的div会褪色的速度有多快 - 在这种情况下，它会褪色，在500毫秒。我们可以改变不透明的div更强或更弱调整“.7”，这意味着目前的div会褪色至70％的不透明度。

在内容上滑动

为了让我们的动画效果，我们将需要获得该div包含我们的内容开始滑动，看看这段代码复制线和2号线和6号线的副本。

$（“＃”）。悬停（函数（）{  content.show（）。CSS（{“左”：“450px”}）动画（{左：0}，300）;  colour.stop（）。fadeTo（500，0.7）  }  ，函数（）{  content.animate（{左：450}，300）;  colour.stop（）。fadeTo（500，0）  }）;

CSS（）解释

这里你可以看到，我们已经增加了一些CSS＃悬停格，在这里我们绝对定位的div，早在我们的样式表，我们现在可以玩这个，在我们的jQuery。注意的位置留给减号（ - ）的全宽，这将使我们的div发生这个元素只是出于我们的容器div的可见部分，如果你打算使你的div不同大小的一个我们已经使用在本教程中，您将需要调整这部分jQuery来匹配您的新宽度。

停止我们的滑块要疯了

如果您疯狂地在图像上移动鼠标，你会发现，内容只是不断不受控制地来回滑动，克服这一点，我们需要调用。停止（），这将基本上停止从运行我们的代码。您可能已经注意到，我们已经有了这个线控制褪色的地方，我们基本上是要在这里做同样的事情。

$（“＃”）。悬停（函数（）{  content.stop（），（），CSS（{“左”：“450px”}）动画（{左：0}，300）;  colour.stop（）。fadeTo（500，0.7）  }  ，函数（）{  content.stop（），动画（{左：450}，300）;  colour.stop（）。fadeTo（500，0）  }）;

这一切！

本站资源仅限于学习研究，严禁从事商业或者非法活动! 源码搜藏网所有源码来自互联网转载与用户上传分享，如果侵犯了您的权益请与我们联系，我们将在24小时内删除！谢谢！