jquery开关灯案例_jquery图文开关灯切换特效

非常实用，从网站扣下来的，第一时间与大家分享，实现了jquery图文开关灯切换特效，使用非常简单，网友们下载下来看一下就明白了。。。

查看演示

下载资源：

次下载资源

下载积分：

积分

首先引用文件

初始化jquery代码如下：

//服务

$('.one_fourth_box').each(function(){

$(this).hover(function(){

$(this).children('.ofb-img').stop(true).animate({top:'-135px'})

$(this).children('.ofb-img-bottom').stop(true).animate({top:'25px'})

$(this).children('.ofb-text').stop(true).animate({top:'160px'})

$(this).children('.ofb-text-top').stop(true).animate({top:'25px'})

$(this).children('.ofb-bg').stop(true,true).fadeIn();

},function(){

$(this).children('.ofb-img').stop(true).animate({top:'25px'})

$(this).children('.ofb-img-bottom').stop(true).animate({top:'160px'})

$(this).children('.ofb-text').stop(true).animate({top:'25px'})

$(this).children('.ofb-text-top').stop(true).animate({top:'-110px'})

$(this).children('.ofb-bg').stop(true,true).fadeOut();

})

// 案例

jquery开关灯案例_jquery图文开关灯切换特效相关推荐

jquery开关灯案例_jQuery实现开关灯效果
本文实例为大家分享了jQuery实现开关灯效果的具体代码,供大家参考,具体内容如下效果展示点击界面上的开灯关灯按钮,可以实现背景的调暗.方便晚上阅读. 开灯: 关灯: 分析这个功能很简单,其实就 ...
一款jQuery满屏自适应焦点图切换特效
一款jQuery满屏自适应焦点图切换特效 ,自适应当前浏览器的宽度,可以作为网站整个大背景的却换效果,很不错的一款不jquery特效. 兼容性没的说直接秒杀了IE6.适用浏览器:IE6.IE7.IE8 ...
图片切换ajax,jQuery AJAX全屏图文幻灯切换
JavaScript 语言: JaveScriptBabelCoffeeScript 确定 var load = function() { $.ajax({ url: 'https://www.red ...
横向全屏滑动插件_【案例】JQuery横向手风琴图片轮播切换代码
点击上方[我分享我快乐]→[...]右上角→[设为星标⭐]即可第一时间获取最新设计资源哈喽大家好,又到了每周二经典案例环节啦~同学们还想了解哪些网页知识今天段老师给同学们带来的是JQuery横向手 ...
一款jquery实现的整屏切换特效
今天要为大家带来一款由jquery实现的整屏切换特效,在右侧有圆型小标,每点一个切换一屏.当然,你也可以滚动鼠标来切换页面.效果非常好.我们看下效果吧在线预览源码下载 html代码: < ...
banner特效php,jQuery自适应通栏宽屏banner幻灯片切换特效
jQuery自适应通栏宽屏banner幻灯片切换特效这是一款代码简洁的jQuery自适应通栏宽屏banner幻灯片切换特效,jQuery自适应全屏BANNER焦点图代码. js代码 $(" ...
jquery背景自动切换特效
查看效果网址: http://keleyi.com/a/bjad/4kwkql05.htm 本特效的jquery版本只支持1.9.0以下. 代码如下: 1 <!DOCTYPE html PUBL ...
html5内容切换特效,html5+jQuery图片和文字内容同时左右切换特效
html5+jQuery图片和文字内容同时左右切换特效,点击图片或者点击左右按钮进行切换,图片转动以及文字内容动画效果切换. 查看演示下载资源: 22 次下载资源下载积分: 20 积分 js代码 ...
jquery叠加页片自动切换特效
查看效果:http://keleyi.com/keleyi/phtml/jqtexiao/34.htm 下面是HTML代码: <!DOCTYPE html> <html xmlns= ...

jquery开关灯案例_jquery图文开关灯切换特效

jquery开关灯案例_jquery图文开关灯切换特效相关推荐

最新文章

热门文章