jquery 鼠標(biāo)滑動(dòng)顯示詳情應(yīng)用示例
更新時(shí)間：2014年01月24日 15:35:05 作者：
本文示例要為大家實(shí)現(xiàn)的效果是鼠標(biāo)滑動(dòng),顯示詳情，代碼很簡(jiǎn)潔，很適合學(xué)習(xí)
效果如下圖：
實(shí)現(xiàn)的代碼很少，很簡(jiǎn)潔，可參考學(xué)習(xí)
<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">好評(píng)度排名</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">品評(píng)評(píng)分：</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">品評(píng)評(píng)分：</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">品評(píng)評(píng)分：</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>
實(shí)現(xiàn)的代碼很少，很簡(jiǎn)潔，可參考學(xué)習(xí)
復(fù)制代碼 代碼如下:
<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>
復(fù)制代碼 代碼如下:
<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">好評(píng)度排名</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">品評(píng)評(píng)分：</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">品評(píng)評(píng)分：</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">品評(píng)評(píng)分：</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>
相關(guān)文章
這篇文章主要介紹了jquery禁用右鍵單擊功能屏蔽F5刷新的具體實(shí)現(xiàn),需要的朋友可以參考下2014-03-03
jQuery 翻頁(yè)組件yunm.pager.js實(shí)現(xiàn)div局部刷新的思路
翻頁(yè)插件有很多種，做出來的效果都非常棒，這篇文章主要介紹了jQuery 翻頁(yè)組件yunm.pager.js實(shí)現(xiàn)div局部刷新的思路，非常不錯(cuò),需要的朋友可以參考下2016-08-08
jQuery實(shí)現(xiàn)下拉菜單（內(nèi)容為時(shí)間）的實(shí)時(shí)更新及圖表的隨動(dòng)更新的方法
這篇文章主要介紹了實(shí)現(xiàn)下拉菜單（內(nèi)容為時(shí)間）的實(shí)時(shí)更新及圖表的隨動(dòng)更新的方法的相關(guān)資料,需要的朋友可以參考下2016-07-07
jquery1.4 教程一 便利的設(shè)置函數(shù)
jquery1.4已經(jīng)發(fā)布了，1.4相對(duì)于1.32的改進(jìn)還是非常巨大的，可以說是全面性的，性能也全面超越了1.32。這一周，將一一展示jquery1.4的改進(jìn)，同時(shí)也會(huì)放出相應(yīng)的demo。2010-02-02
jQuery實(shí)現(xiàn)下拉框功能實(shí)例代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)下拉框功能實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2016-05-05
這篇文章主要介紹了JQuery刪除DOM節(jié)點(diǎn)的方法,實(shí)例分析了jQuery使用remove及empty方法實(shí)現(xiàn)結(jié)點(diǎn)刪除的相關(guān)技巧,需要的朋友可以參考下2015-06-06
JQuery 實(shí)現(xiàn)文件下載的常用方法分析
這篇文章主要介紹了JQuery 實(shí)現(xiàn)文件下載的常用方法,結(jié)合實(shí)例形式分析了jQuery的GET方式、POST方式及HTML5 Blob對(duì)象等常見的文件下載機(jī)制、原理與實(shí)現(xiàn)方法,需要的朋友可以參考下2019-10-10
這篇文章主要介紹了jQuery 操作 HTML 元素和屬性的方法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-11-11
jQuery實(shí)現(xiàn)鼠標(biāo)滑過圖片移動(dòng)特效
這篇文章主要介紹了jQuery實(shí)現(xiàn)鼠標(biāo)滑過圖片移動(dòng)特效，鼠標(biāo)移動(dòng)到圖片上時(shí)圖片向上動(dòng)一下，等到鼠標(biāo)離開后，圖片又返回到原來位置,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
jQuery內(nèi)容折疊效果插件用法實(shí)例分析(附demo源碼)
這篇文章主要介紹了jQuery內(nèi)容折疊效果插件用法,結(jié)合實(shí)例形式分析了jQuery展開折疊插件jquery.coolfieldset.js的具體使用技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2016-04-04