注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

jquery图文开关灯切换特效

jQuery插件 fishcity 963浏览

这是一款非常实用的关灯切换特效,当然也是用强大的jquery制作,代码很少,但却实现了动感极的画面切换效果,它可以是文字切换,也可以是图片切换,当然也可以是Html的内容,样式设定好就OK了,懂css和有点jquery基础的朋友一看就能明白其中的原理与奥妙,下面我们来看他的代码吧。

首先,引入jquery库,这个是必须的,这里引入的是谷歌的jquery库,再引CSS样式,这个在行的朋友可以自由的布局页面,不局限于本例子。

<link  rel="stylesheet"  href="images/layout.css">
<script type="text/javascript" src="http://ajax. /ajax/libs/jquery/1.7.2/jquery.min.js"></script>

接着便是创建html标签,这里只写一个样式框的代码,其它的类似,就不多写了,

<a href="http://www.jqcool.net" class="one_fourth_box fl">
  <div class="ofb-bg"></div>
  <div class="ofb-img mypng"><img src="images/1of4-1.png" alt=""></div>
  <div class="ofb-img-bottom mypng"><img src="images/1of4-1-h.png" alt=""></div>
  <div class="ofb-text">
    <h5 class="color_333">网站建设</h5>
    <p class="color_666">定制化网站建设服务商,企业网络品牌树立全程服务。您的网站需要专业的团队去建设,我们给您带来不只是付出更收获回报</p>
  </div>
  <div class="ofb-text-top">
     <h5 class="color_orange">网站建设</h5>
     <p class="color_999">定制化网站建设服务商,企业网络品牌树立全程服务。您的网站需要专业的团队去建设,我们给您带来不只是付出更收获回报</p>
  </div>
</a>

首先用A标签包含速个展示的内容,当然您可以用其它标签,这里用A标签是为了点击时可以链接到其它页面,接着是背景颜色类ofb-bg,类ofb-img存放的是黑白图片,ofb-img-bottom存放的是采色图片,ofb-text为黑色文字,ofb-text-top在彩色文字,这样,整个html标签就创建完成了

写入JS代码,这个要在文档加载时就执行,否则触发不了事件,显示不了效果。代码加了详细的注释,懂jquery的朋友,一眼就能看明白了,再细说的话就要讲jquery的基础知识了,这是另一个课程内容了,在此就不谈了。

$(function(){
    $('.one_fourth_box').each(function(){
	$(this).hover(function(){//鼠标悬浮时
	    $(this).children('.ofb-img').stop(true).animate({top:'-135px'})//ofb-img(灰色图片)向上滚动至-135px位置
	    $(this).children('.ofb-img-bottom').stop(true).animate({top:'25px'})//彩色图片向上滚动至25px位置
	    $(this).children('.ofb-text').stop(true).animate({top:'160px'})//黑色文字向上滚到至160px位置 
	    $(this).children('.ofb-text-top').stop(true).animate({top:'25px'})//彩色文字向上滚动至25px位置
	    $(this).children('.ofb-bg').stop(true,true).fadeIn();//背色颜色淡出
	},function(){//鼠标移开时
	    $(this).children('.ofb-img').stop(true).animate({top:'25px'})//ofb-img(灰色图片)向上滚动至25px位置
	    $(this).children('.ofb-img-bottom').stop(true).animate({top:'160px'})//彩色图片向上滚动至160px位置
	    $(this).children('.ofb-text').stop(true).animate({top:'25px'})//黑色文字向上滚到至25px位置 
	    $(this).children('.ofb-text-top').stop(true).animate({top:'-110px'})//彩色文字向上滚动至-110px位置
	    $(this).children('.ofb-bg').stop(true,true).fadeOut();//背色颜色渐隐
	})
    })
	
})

好了,终于大功告成了,预览下吧,怎么样,帅吧,嗯,一边得瑟去!

转载请注明:jQ酷 » jquery图文开关灯切换特效

下载地址:本站下载 | 百度云
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。