jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码


Posted in Javascript onOctober 30, 2015

本文实例讲述了jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码。分享给大家供大家参考,具体如下:

这是一款仿腾讯网QQ空间装扮预览图片的鼠标提示效果,感应鼠标显示图片的介绍信息,当你把鼠标移到图片上的时候,图片的背景会有所变化,并会显示该图片的对应文字内容,是QQ空间使用过的效果。

运行效果截图如下:

jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码

在线演示地址如下:

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>仿QQ空间装扮预览图片的鼠标提示效果</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
*{margin:0;padding:0;font-size:12px;line-height:150%;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix{display:inline-block;}
#wrap{width:900px;margin:0 auto;}
.good_list{padding:0 0 30px 13px;background:#f8f8f8;border:1px solid #eaeaea;margin-top:50px;}
.item{float:left;margin:13px 13px 0 0;position:relative;}
.good{padding:8px;}
.goodOp{padding:2px;border:1px solid #a8a8a8;width:180px;background:#fff;font-size:0;}
.goodHover{padding:0px;position:absolute;z-index:99666669;top:-40px;left:-4px;width:210px;height:204px;}
.goodHd{background:url(images/imgHover.png);width:210px;height:204px;}
.goodHd h2{font-size:12px;text-align:center;padding-top:12px;}
.goodHd p{color:#9c9c9c;text-align:center;}
.goodHd .img{padding-left:12px;}
</style>
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
 $("#list>.item").hover(function(){
  $(this).find(".goodHover").show();
 },function(){
  $(this).find(".goodHover").hide();
 });
});
</script>
</head>
<body>
<div id="wrap">
 <div class="good_list clearfix" id="list">
  <div class="item" style="z-index:10">
  <div class="good">
   <div class="goodOp"><img src="images/1.gif"></div>
  </div>
  <div class="goodHover" style="display:none">
   <div class="goodHd">
   <h2>西班牙</h2>
   <p>点击图片预览装扮</p>
   <div class="img">
    <div class="goodOp"><img src="images/1.gif"></div>
   </div>
  </div>
  </div>
 </div>
 <div class="item" style="z-index:9">
  <div class="good">
   <div class="goodOp"><img src="images/2.gif"></div>
  </div>
  <div class="goodHover" style="display:none">
   <div class="goodHd">
   <h2>西班牙</h2>
   <p>点击图片预览装扮</p>
   <div class="img">
    <div class="goodOp"><img src="images/2.gif"></div>
   </div>
  </div>
  </div>
 </div>
 <div class="item" style="z-index:8">
  <div class="good">
   <div class="goodOp"><img src="images/3.gif"></div>
  </div>
  <div class="goodHover" style="display:none">
   <div class="goodHd">
   <h2>西班牙</h2>
   <p>点击图片预览装扮</p>
   <div class="img">
    <div class="goodOp"><img src="images/3.gif"></div>
   </div>
  </div>
  </div>
 </div>
 <div class="item" style="z-index:7">
  <div class="good">
   <div class="goodOp"><img src="images/4.gif"></div>
  </div>
  <div class="goodHover" style="display:none">
   <div class="goodHd">
   <h2>西班牙</h2>
   <p>点击图片预览装扮</p>
   <div class="img">
    <div class="goodOp"><img src="images/4.gif"></div>
   </div>
  </div>
  </div>
 </div>
 </div>
 </div>
</div>
</body>
</html>

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
jquery easyui的tabs使用时的问题
Mar 23 Javascript
js 数值转换为3位逗号分隔的示例代码
Feb 19 Javascript
js实现日历可获得指定日期周数及星期几示例分享(js获取星期几)
Mar 14 Javascript
jQuery实现的图片分组切换焦点图插件
Jan 06 Javascript
JavaScript函数中关于valueOf和toString的理解
Jun 14 Javascript
Bootstrap基本样式学习笔记之按钮(4)
Dec 07 Javascript
js鼠标跟随运动效果
Mar 11 Javascript
BootStrap TreeView使用实例详解
Nov 01 Javascript
用 Vue.js 递归组件实现可折叠的树形菜单(demo)
Dec 25 Javascript
详解Eslint 配置及规则说明
Sep 10 Javascript
javascript实现简单打字游戏
Oct 29 Javascript
Vue组件间的通信pubsub-js实现步骤解析
Mar 11 Javascript
jQuery密码强度检测插件passwordStrength用法实例分析
Oct 30 #Javascript
基于jQuery实现的美观星级评论打分组件代码
Oct 30 #Javascript
jQuery实现的个性化返回底部与返回顶部特效代码
Oct 30 #Javascript
自己动手写的javascript前端等待控件
Oct 30 #Javascript
jQuery实现的仿百度分页足迹效果代码
Oct 30 #Javascript
JavaScript获取function所有参数名的方法
Oct 30 #Javascript
jQuery实现瀑布流布局详解(PC和移动端)
Sep 01 #Javascript
You might like
PHP 遍历XP文件夹下所有文件
2008/11/27 PHP
深入PHP获取随机数字和字母的方法详解
2013/06/06 PHP
解析php中的fopen()函数用打开文件模式说明
2013/06/20 PHP
php后门URL的防范
2013/11/12 PHP
PHP实现的抓取小说网站内容功能示例
2019/06/27 PHP
JQuery datepicker 使用方法
2011/05/20 Javascript
jQuery版仿Path菜单效果
2011/12/15 Javascript
js 获取时间间隔实现代码
2014/05/12 Javascript
JavaScript Sort 的一个错误用法示例
2015/03/20 Javascript
JS实现自动固定顶部的悬浮菜单栏效果
2015/09/16 Javascript
jQuery UI插件实现百度提词器效果
2016/11/21 Javascript
JavaScript获取短信验证码(周期性)
2016/12/29 Javascript
JQuery实现定时刷新功能代码
2017/05/09 jQuery
jQuery 实现鼠标画框并对框内数据选中的实例代码
2017/08/29 jQuery
AngularJS实时获取并显示密码的方法
2018/02/06 Javascript
JavaScript函数节流和函数去抖知识点学习
2018/07/31 Javascript
Vue中的v-for循环key属性注意事项小结
2018/08/12 Javascript
vue全局自定义指令-元素拖拽的实现代码
2019/04/14 Javascript
微信小程序通过一个json实现分享朋友圈图片
2019/09/03 Javascript
Vue.js中的高级面试题及答案
2020/01/13 Javascript
[02:28]DOTA2亚洲邀请赛 LGD战队巡礼
2015/02/03 DOTA
Python之web模板应用
2017/12/26 Python
Python制作动态字符图的实例
2019/01/27 Python
通过 Python 和 OpenCV 实现目标数量监控
2020/01/05 Python
在 Linux/Mac 下为Python函数添加超时时间的方法
2020/02/20 Python
Python 下载Bing壁纸的示例
2020/09/29 Python
css3实现wifi信号逐渐增强效果实例
2017/08/09 HTML / CSS
德国大型箱包和皮具商店:Koffer
2019/10/01 全球购物
恶搞卫生巾广告词
2014/03/18 职场文书
小学生我的梦想演讲稿
2014/08/21 职场文书
2015年师德师风自我评价范文
2015/03/05 职场文书
公司表扬信格式
2015/05/04 职场文书
2015年三好一满意工作总结
2015/07/24 职场文书
教你怎么用PyCharm为同一服务器配置多个python解释器
2021/05/31 Python
你喜欢篮球吗?Python实现篮球游戏
2021/06/11 Python
SpringBoot整合Minio文件存储
2022/04/03 Java/Android