标签:style blog http io ar color sp java for
第一种效果:
HTML结构:
<div class="vewinfor"> <div class="leftin_hd"> <h3>作者热文</h3> <a href="" target="_blank" class="in_more">...</a> </div> <div class="leftin_bd"> <ul class="auth_infor clearfix" data-mouseevent="1"> <li> <em class="auth_num auth_red">1</em> <div class="auth_txt" style="display:none;" data-mousehide="1"><a href="" target="_blank">张呈栋造乌龙 友谊赛中国3-0成功复仇</a></div> <div class="auth_show" style="display:block;" data-mouseshow="1"> <a href="" target="_blank">张呈栋造乌龙 友谊赛中国3-0成功复仇 </a> <span>镑进行引援,但是目前范加尔的球队仍然显得非得非得非常</span> </div> </li> <li> <em class="auth_num">2</em> <div class="auth_txt" data-mousehide="1"><a href="" target="_blank">中国女排时隔16年进决赛夺银 后勤神医居功至伟</a></div> <div class="auth_show" data-mouseshow="1"> <a href="" target="_blank">张呈栋造乌龙 友谊赛中国3-0成功复仇 </a> <span>镑进行引援,但是目前范加尔的球队仍然显得非得非得非常</span> </div> </li> <li> <em class="auth_num">3</em> <div class="auth_txt" data-mousehide="1"><a href="" target="_blank">美女为赢iPhone6深夜裸奔 三点全露被调侃女雷锋</a></div> <div class="auth_show" data-mouseshow="1"> <a href="" target="_blank">张呈栋造乌龙 友谊赛中国3-0成功复仇 </a> <span>镑进行引援,但是目前范加尔的球队仍然显得非得非得非常</span> </div> </li> </ul> </div> </div>
JS代码:
$(function(){ $(‘[data-mousehide]‘).on(‘mouseover‘,function(){ $(‘[data-mouseshow]‘).hide().siblings(‘[data-mousehide]‘).show(); $(this).siblings(‘[data-mouseshow]‘).show().siblings(‘[data-mousehide]‘).hide(); return false; }); });
文件分享下载如下:baiduyunguanjia-javascript实例-20141119-鼠标悬浮标题切换显示出标题的文字和图片效果
第二种效果:
用了动画setTimeout来控制来显示,还有slideUp(),fadeIn(),增加一些动画的效果,鼠标悬浮在上面的时候停顿一段时间再显示,不过功能也是一样的;
HTML结构与上面第一种效果的HTML结构一样,只是JS不一样:
JS代码:
$(function(){ if ($(‘[data-mouseevent]‘).length && $(‘[data-mousehide]‘).length && $(‘[data-mouseshow]‘).length) { var dataMouseTimeid = ‘‘; $(‘[data-mousehide]‘).on(‘mouseover‘, function(e) { if ($(this).siblings(‘[data-mouseshow]‘).length) { var $selft = $(this); dataMouseTimeid = window.setTimeout(function(){ $selft.parents(‘[data-mouseevent]‘) .find(‘[data-mouseshow]‘).slideUp() .siblings(‘[data-mousehide]‘).show(‘fast‘, function() { $selft.hide().siblings(‘[data-mouseshow]‘).fadeIn(); }); },500); } }).on(‘mouseout‘, function(){ if (dataMouseTimeid) clearTimeout(dataMouseTimeid); }); } });
文件分享下载:baiduyunguanjia-javascript实例-20141120-鼠标悬浮标题切换显示出标题的文字和图片效果
标签:style blog http io ar color sp java for
原文地址:http://www.cnblogs.com/chenguiya/p/4108832.html