jquery 鼠标滑动显示详情应用示例
2014-01-24 00:00
691 查看
效果如下图:
实现的代码很少,很简洁,可参考学习
实现的代码很少,很简洁,可参考学习
<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>
相关文章推荐
- jquery 鼠标滑动显示详情应用示例
- jquery 鼠标滑动显示详情
- jQuery hover事件鼠标滑过图片半透明标题文字滑动显示隐藏
- 基于jquery的鼠标滑动详细显示框
- jquery鼠标滑过展示图片时显示详情
- JQuery 应用: 鼠标滑过td 显示td 的其他内容(方法一)
- jQuery事件函数-点击、双击、键盘按键、鼠标滑动、失去焦点、显示哪个 DOM 元素触发了事件/返回事件的类型。等
- JQuery 应用: 鼠标滑过td 显示td 的其他内容(方法二)
- jquery鼠标悬停图片放大滑动显示标题
- jquery学习笔记----隐藏、显示、切换,滑动,淡入淡出,以及动画
- 密码框显示提示文字jquery示例
- 用CSS3和jQuery来创建一个鼠标悬停显示详细面板
- 一个很好玩的jquery例子:小方块先逐渐显示,后向右滑动,再向左滑回,最后向上隐藏
- JQuery鼠标移动上去显示预览图
- jquery实现鼠标拖拽滑动效果来选择数字的方法
- 表格间隔颜色。鼠标滑动高亮显示
- JQUERY HOVER鼠标悬停导航菜单滑动展开弹性下拉菜单
- jquery 实现超出部分隐藏,鼠标移动上显示全部文字
- JQuery实现鼠标移动到图片上显示边框效果