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 相关文章推荐
对google个性主页的拖拽效果的js的完整注释[转]
Apr 10 Javascript
JavaScript中通过闭包解决只能取得包含函数中任何变量最后一个值的问题
Aug 12 Javascript
js用Date对象处理时间实现思路及代码
Jan 31 Javascript
Jquery 例外被抛出且未被接住原因介绍
Sep 04 Javascript
关闭浏览器时提示onbeforeunload事件
Dec 25 Javascript
兼容主流浏览器的iframe自适应高度js脚本
Jan 10 Javascript
jquery实现的判断倒计时是否结束代码
Feb 05 Javascript
jQuery简单实现列表隐藏和显示效果示例
Sep 12 Javascript
jQuery操作复选框(CheckBox)的取值赋值实现代码
Jan 10 Javascript
详解vue-cli 3.0 build包太大导致首屏过长的解决方案
Nov 10 Javascript
详解vuex中action何时完成以及如何正确调用dispatch的思考
Jan 21 Javascript
JavaScript中ES6规范中let和const的用法和区别
Aug 06 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使用递归方式列出当前目录下所有文件的方法
2015/06/02 PHP
Symfony模板的快捷变量用法实例
2016/03/17 PHP
thinkPHP5.0框架环境变量配置方法
2017/03/17 PHP
Centos7 Yum安装PHP7.2流程教程详解
2019/07/02 PHP
最好用的省市二级联动 原生js实现你值得拥有
2013/09/22 Javascript
div浮层,滚动条移动,位置保持不变的4种方法汇总
2013/12/11 Javascript
JavaScript实现瀑布流布局
2020/06/28 Javascript
ECharts仪表盘实例代码(附源码下载)
2016/02/18 Javascript
使用原生js封装的ajax实例(兼容jsonp)
2017/10/12 Javascript
javaScript产生随机数的用法小结
2018/04/21 Javascript
Layer弹出层动态获取数据的方法
2018/08/20 Javascript
JavaScript使用prototype原型实现的封装继承多态示例
2018/08/31 Javascript
Vue2.0+Vux搭建一个完整的移动webApp项目的示例
2019/03/19 Javascript
django js 实现表格动态标序号的实例代码
2019/07/12 Javascript
node express使用HTML模板的方法示例
2019/08/22 Javascript
Vue SPA 初次进入加载动画实现代码
2019/11/14 Javascript
微信小程序实现点击按钮后修改颜色
2019/12/05 Javascript
[01:11]steam端dota2实名认证操作流程视频
2021/03/11 DOTA
python解析xml文件操作实例
2014/10/05 Python
Python实现采用进度条实时显示处理进度的方法
2017/12/19 Python
Python利用ORM控制MongoDB(MongoEngine)的步骤全纪录
2018/09/13 Python
Python GUI编程学习笔记之tkinter控件的介绍及基本使用方法详解
2020/03/30 Python
python中tkinter窗口位置\坐标\大小等实现示例
2020/07/09 Python
波兰珠宝品牌:YES
2019/08/09 全球购物
NOTINO英国:在线购买美容和香水
2020/02/25 全球购物
应届护士推荐信
2013/11/16 职场文书
竞职演讲稿范文
2014/01/11 职场文书
车辆安全检查制度
2014/01/12 职场文书
煤矿安全承诺书
2014/05/22 职场文书
英语教师求职信
2014/06/16 职场文书
领导干部群众路线教育实践活动剖析材料
2014/10/10 职场文书
学校纪律作风整改措施思想汇报
2014/10/11 职场文书
自我检讨书范文
2015/01/28 职场文书
创卫工作总结2015
2015/04/22 职场文书
竞聘书的秘诀
2019/04/02 职场文书
受欢迎的自荐信,就这么写!
2019/04/19 职场文书