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 相关文章推荐
javascript学习笔记(十六) 系统对话框(alert、confirm、prompt)
Jun 20 Javascript
判断日期是否能跨月查询的js代码
Jul 25 Javascript
js中实现多态采用和继承类似的方法
Aug 22 Javascript
javascript实现根据时间段显示问候语的方法
Jun 18 Javascript
详解如何将angular-ui的图片轮播组件封装成一个指令
May 09 Javascript
Vue中添加手机验证码组件功能操作方法
Dec 07 Javascript
解决angular2在双向数据绑定时[(ngModel)]无法使用的问题
Sep 13 Javascript
详解Vue用cmd创建项目
Feb 12 Javascript
详解用Webpack与Babel配置ES6开发环境
Mar 12 Javascript
微信公众号平台接口开发 菜单管理的实现
Aug 14 Javascript
axios如何利用promise无痛刷新token的实现方法
Aug 27 Javascript
vue实现分页加载效果
Dec 24 Javascript
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
Excel数据导入Mysql数据库的实现代码
2008/06/05 PHP
php获取远程图片的两种 CURL方式和sockets方式获取远程图片
2011/11/07 PHP
通过php快速统计某个数据库中每张表的数据量
2012/09/04 PHP
标准PHP的AES加密算法类
2015/03/12 PHP
php合并数组并保留键值的实现方法
2018/03/12 PHP
PHP实现简单用户登录界面
2019/10/23 PHP
TBCompressor js代码压缩
2011/01/05 Javascript
让alert不出现弹窗的两种方法
2014/05/18 Javascript
jQuery操作cookie方法实例教程
2014/11/25 Javascript
js和jquery分别验证单选框、复选框、下拉框
2015/12/17 Javascript
使用plupload自定义参数实现多文件上传
2016/07/19 Javascript
JavaScript中数组的各种操作的总结(必看篇)
2017/02/13 Javascript
Bootstrap table右键功能实现方法
2017/02/20 Javascript
Angular2使用Angular CLI快速搭建工程(一)
2017/05/21 Javascript
JS中使用cavas截图网页并解决跨域及模糊问题
2018/11/13 Javascript
d3绘制基本的柱形图的实现代码
2018/12/12 Javascript
Node.JS在命令行中检查Chrome浏览器是否安装并打开指定网址
2019/05/21 Javascript
redux处理异步action解决方案
2020/03/22 Javascript
[04:02]DOTA2上海特锦赛小组赛第二日recap精彩回顾
2016/02/28 DOTA
python抓取百度首页的方法
2015/05/19 Python
Python设计模式之观察者模式简单示例
2018/01/10 Python
Python获取航线信息并且制作成图的讲解
2019/01/03 Python
Python实现DDos攻击实例详解
2019/02/02 Python
python中eval与int的区别浅析
2019/08/11 Python
Python类绑定方法及非绑定方法实例解析
2020/10/09 Python
HTML5地理定位与第三方工具百度地图的应用
2016/11/17 HTML / CSS
原装进口全世界:天猫国际
2016/08/03 全球购物
凯特方迪化妆品官网:Kat Von D Beauty
2016/11/15 全球购物
英国最大的网上药品商店:Chemist Direct
2017/12/16 全球购物
英国最全面的橄榄球联盟门票网站:Live Rugby Tickets
2018/10/06 全球购物
全球性的奢侈品梦工厂:Forzieri(福喜利)
2019/02/20 全球购物
21岁生日感言
2014/02/27 职场文书
我的梦想演讲稿1000字
2014/08/21 职场文书
嘉宾邀请函
2015/01/31 职场文书
2015年办公室文员工作总结
2015/04/24 职场文书
创业计划书介绍
2019/04/24 职场文书