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 相关文章推荐
javascript event 事件解析
Jan 31 Javascript
jquery validate和jquery form 插件组合实现验证表单后AJAX提交
Aug 26 Javascript
JS日期加减,日期运算代码
Nov 05 Javascript
prototype框架中美元符号$用法分析
Jan 22 Javascript
ros::spin() 和 ros::spinOnce()函数的区别及详解
Oct 01 Javascript
jQuery插件fullPage.js实现全屏滚动效果
Dec 02 Javascript
关于Javascript中document.cookie的使用
Mar 08 Javascript
js实现数字递增特效【仿支付宝我的财富】
May 05 Javascript
使用MUI框架模拟手机端的下拉刷新和上拉加载功能
Sep 04 Javascript
基于dataset的使用和图片延时加载的实现方法
Dec 11 Javascript
vue cli2.0单页面title修改方法
Jun 07 Javascript
JS实现电脑虚拟键盘的操作
Jun 24 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
Optimizer与Debugger兼容性问题的解决方法
2008/12/01 PHP
php中强制下载文件的代码(解决了IE下中文文件名乱码问题)
2011/05/09 PHP
PHP实现图片压缩的两则实例
2014/07/19 PHP
分享最受欢迎的5款PHP框架
2014/11/27 PHP
Laravel最佳分割路由文件(routes.php)的方式
2016/08/04 PHP
PHP实现原生态图片上传封装类方法
2016/11/08 PHP
thinkPHP框架可添加js事件的分页类customPage.class.php完整实例
2017/03/16 PHP
用js实现键盘方向键翻页功能的代码
2007/06/03 Javascript
写js时遇到的一些小问题
2010/12/06 Javascript
全面解析Bootstrap图片轮播效果
2015/12/03 Javascript
在原生不支持的旧环境中添加兼容的Object.keys实现方法
2017/09/11 Javascript
js对象实例详解(JavaScript对象深度剖析,深度理解js对象)
2017/09/21 Javascript
Vue的watch和computed方法的使用及区别介绍
2018/09/06 Javascript
Vue.directive 实现元素scroll逻辑复用
2019/11/29 Javascript
VUE 实现element upload上传图片到阿里云
2020/08/12 Javascript
Python ORM框架SQLAlchemy学习笔记之数据查询实例
2014/06/10 Python
python中global与nonlocal比较
2014/11/21 Python
Python中使用装饰器时需要注意的一些问题
2015/05/11 Python
python常见排序算法基础教程
2017/04/13 Python
Python下实现的RSA加密/解密及签名/验证功能示例
2017/07/17 Python
使用 Python 实现微信公众号粉丝迁移流程
2018/01/03 Python
python的re模块使用方法详解
2019/07/26 Python
django-初始配置(纯手写)详解
2019/07/30 Python
利用python-docx模块写批量生日邀请函
2019/08/26 Python
Python列表list常用内建函数实例小结
2019/10/22 Python
pygame实现弹球游戏
2020/04/14 Python
Python捕获异常堆栈信息的几种方法(小结)
2020/05/18 Python
html5中地理位置定位api接口开发应用小结
2013/01/04 HTML / CSS
HTML5 Canvas绘制圆点虚线实例
2015/01/01 HTML / CSS
村创先争优活动总结
2014/08/28 职场文书
2014领导干部四风问题查摆思想汇报
2014/09/13 职场文书
教师工作表现评语
2014/12/31 职场文书
节约用电通知
2015/04/25 职场文书
解决mysql模糊查询索引失效问题的几种方法
2021/06/18 MySQL
sql server偶发出现死锁的解决方法
2022/04/10 SQL Server
MySQL如何修改字段类型和字段长度
2022/06/10 MySQL