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


Posted in Javascript onJanuary 24, 2014

效果如下图:
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>
Javascript 相关文章推荐
DOM 脚本编程中的兄弟节点
Oct 31 Javascript
javascript 同时在IE和FireFox获取KeyCode的代码
Feb 07 Javascript
js中将字符串转换成json的三种方式
Jan 12 Javascript
Javascript 中创建自定义对象的方法汇总
Dec 04 Javascript
jQuery实现复选框成对选择及对应取消的方法
Mar 03 Javascript
JavaScript字符串对象
Jan 14 Javascript
详解vue2.0的Element UI的表格table列时间戳格式化
Jun 13 Javascript
基于canvas粒子系统的构建详解
Aug 31 Javascript
浅谈angular4.0中路由传递参数、获取参数最nice的写法
Mar 12 Javascript
javascript中的event loop事件循环详解
Dec 14 Javascript
JavaScript遍历数组的方法代码实例
Jan 14 Javascript
详解如何在vue+element-ui的项目中封装dialog组件
Dec 11 Vue.js
js调用打印机打印网页字体总是缩小一号的解决方法
Jan 24 #Javascript
动态的创建一个元素createElement及删除一个元素
Jan 24 #Javascript
动态的绑定事件addEventListener方法的使用
Jan 24 #Javascript
js监听滚动条滚动事件使得某个标签内容始终位于同一位置
Jan 24 #Javascript
js利用事件的阻止冒泡实现点击空白模态框的隐藏
Jan 24 #Javascript
JS实现点击链接取消跳转效果的方法
Jan 24 #Javascript
js关于字符长度限制的问题示例探讨
Jan 24 #Javascript
You might like
php park、unpark、ord 函数使用方法(二进制流接口应用实例)
2010/10/19 PHP
简单的php写入数据库类代码分享
2011/07/26 PHP
对于PHP 5.4 你必须要知道的
2013/08/07 PHP
使用PHP接受文件并获得其后缀名的方法
2015/08/05 PHP
Thinkphp5框架简单实现钩子(Hook)行为的方法示例
2019/09/03 PHP
PHP 超级全局变量相关总结
2020/06/30 PHP
15个款优秀的 jQuery 图片特效插件推荐
2011/11/21 Javascript
jquery解析JSON数据示例代码
2014/03/17 Javascript
基于NodeJS的前后端分离的思考与实践(一)全栈式开发
2014/09/26 NodeJs
基于javascript实现的搜索时自动提示功能
2014/12/26 Javascript
jQuery实现仿腾讯微博滑出效果报告每日天气的方法
2015/05/11 Javascript
js如何准确获取当前页面url网址信息
2020/09/13 Javascript
jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据
2016/08/15 Javascript
vuex的使用及持久化state的方式详解
2018/01/23 Javascript
基于vue-simplemde实现图片拖拽、粘贴功能
2018/04/12 Javascript
总结JavaScript在IE9之前版本中内存泄露问题
2018/04/28 Javascript
vue组件通信传值操作示例
2019/01/08 Javascript
JQuery中queue方法用法示例
2019/01/31 jQuery
[01:02:53]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第二局
2016/03/06 DOTA
python getopt 参数处理小示例
2009/06/09 Python
Python实现爬取逐浪小说的方法
2015/07/07 Python
Python实现简单网页图片抓取完整代码实例
2017/12/15 Python
python判断一个数是否能被另一个整数整除的实例
2018/12/12 Python
Python模块的加载讲解
2019/01/15 Python
python实现感知器算法(批处理)
2019/01/18 Python
详解Python3注释知识点
2019/02/19 Python
python进阶之自定义可迭代的类
2019/08/20 Python
python 检查数据中是否有缺失值,删除缺失值的方式
2019/12/02 Python
python实现代码审查自动回复消息
2021/02/01 Python
Python实现疫情地图可视化
2021/02/05 Python
利用HTML5中Geolocation获取地理位置调用Google Map API在Google Map上定位
2013/01/23 HTML / CSS
使用javascript和HTML5 Canvas画的四渐变色播放按钮效果
2014/04/10 HTML / CSS
详解如何在登录过期后跳出Ifram框架
2020/09/10 HTML / CSS
Holland & Barrett爱尔兰:英国领先的健康零售商
2019/03/31 全球购物
共产党员公开承诺书范文
2014/03/28 职场文书
运动会宣传稿50字
2015/07/23 职场文书