jquery 鼠标滑动显示详情应用示例

504 阅读 0 评论 333 点赞

我是靠谱客的博主悦耳香烟，最近开发中收集的这篇文章主要介绍jquery 鼠标滑动显示详情应用示例，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

效果如下图：

实现的代码很少，很简洁，可参考学习

复制代码代码如下:

 
<script type="text/javascript"> 
jQuery(document).ready(function () { 
ShowImage1(); 
}); 
var ShowImage1 = function () { 
$(".show_box1 .show_box_dd").hover(function (e) { 
$(".show_box1 .phover").hide(); 
$(".show_box1 .show_box_dd").show(); 
$(this).hide(); 
$(this).siblings().show(); 
}, 
function () { 
}); 
}; 
</script> 

复制代码代码如下:

 
<pre code_snippet_id="169406" snippet_file_name="blog_20140124_1_9547095" name="code" class="javascript"><div style="border-left: none" class="module-box1 orangeback show_box1"></pre> 
<pre></pre> 
<pre code_snippet_id="169406" snippet_file_name="blog_20140124_2_3723790" name="code" class="html"> <dl> 
<div class="module-tit"> 
<span class="store-name">好评度排名</span> 
</div> 
<div> 
<dd style="padding: 15px 0 10px 15px" class="phover"> 
<em class="current">1</em><img class="jiupic" src="images/jiu.gif" width="100" height="100" /> 
<span class="pname"><a href="#" target="_blank">五粮液</a> </span><span class="pinpingzhe">品评评分：</span><span class="fenshu">8.6分</span> 
<div class="jindu"><span class="jindutiao"><em class="fen0"></em></span></div> 
</dd> 
<dd class="show_box_dd" style="display: none;"> 
<em>1</em><a href="#" target="_blank">五粮液</a><span class="rank">9分</span> 
</dd> 
</div> 
<div> 
<dd style="padding: 15px 0 10px 15px; display: none;" class="phover"> 
<em class="current">2</em><img class="jiupic" src="images/jiu.gif" width="100" height="100" /> 

<span class="pname"><a href="#" target="_blank">泸州老窖</a> </span><span class="pinpingzhe">品评评分：</span><span class="fenshu">8.6分</span> 
<div class="jindu"><span class="jindutiao"><em class="fen0"></em></span></div> 
</dd> 
<dd class="show_box_dd"> 
<em>2</em><a href="#" target="_blank">泸州老窖</a><span class="rank">9分</span> 
</dd> 
</div> 
<div> 
<dd style="padding: 15px 0 10px 15px; display: none;" class="phover"> 
<em class="current">3</em><img class="jiupic" src="images/jiu.gif" width="100" height="100" /> 

<span class="pname"><a href="#" target="_blank">金六福</a> </span><span class="pinpingzhe">品评评分：</span><span class="fenshu">8.6分</span> 
<div class="jindu"><span class="jindutiao"><em class="fen0"></em></span></div> 
</dd> 
<dd class="show_box_dd"> 
<em>3</em><a href="#" target="_blank">金六福</a><span class="rank">9分</span> 
</dd> 
</div> 


</dl> 
</div></pre> 
<pre></pre> 