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 处理Iframe自适应高度(同或不同域名下)
Mar 29 Javascript
JS+CSS实现仿触屏手机拨号盘界面及功能模拟完整实例
May 16 Javascript
JavaScript程序开发之JS代码放置的位置
Jan 15 Javascript
jQuery实现滚动鼠标放大缩小图片的方法(附demo源码下载)
Mar 05 Javascript
从零开始学习Node.js系列教程之基于connect和express框架的多页面实现数学运算示例
Apr 13 Javascript
backbone简介_动力节点Java学院整理
Jul 14 Javascript
React 项目迁移 Webpack Babel7的实现
Sep 12 Javascript
js实现图片局部放大效果详解
Mar 18 Javascript
layui 中select下拉change事件失效的解决方法
Sep 20 Javascript
JS常用正则表达式超全集(密码强度校验,金额校验,IE版本,IPv4,IPv6校验)
Feb 03 Javascript
JavaScript 判断数据类型的4种方法
Sep 11 Javascript
vue 避免变量赋值后双向绑定的操作
Nov 07 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
DOTA2 6.87版本后新眼位详解攻略
2020/04/20 DOTA
thinkPHP实现MemCache分布式缓存功能
2016/03/23 PHP
Yii实现复选框批量操作实例代码
2017/03/15 PHP
javascript事件模型代码
2007/07/01 Javascript
一个可以随意添加多个序列的tag函数
2009/07/21 Javascript
Javascript控制页面链接在新窗口打开具体方法
2013/08/16 Javascript
window.location.href = window.location.href 跳转无反应 a超链接onclick事件写法
2013/08/21 Javascript
JQuery对class属性的操作实现按钮开关效果
2013/10/11 Javascript
JS获取各种浏览器窗口大小的方法
2014/01/14 Javascript
js监听滚动条滚动事件使得某个标签内容始终位于同一位置
2014/01/24 Javascript
jQuery 过滤方法filter()选择具有特殊属性的元素
2014/06/15 Javascript
JavaScript中判断两个字符串是否相等的方法
2015/07/07 Javascript
微信小程序 Button 组件详解及简单实例
2017/01/10 Javascript
详解nodejs操作mongodb数据库封装DB类
2017/04/10 NodeJs
Vue学习笔记之表单输入控件绑定
2017/09/05 Javascript
SeaJS中use函数用法实例分析
2017/10/10 Javascript
jQuery实现鼠标移入移出事件切换功能示例
2018/09/06 jQuery
vue多级复杂列表展开/折叠及全选/分组全选实现
2018/11/05 Javascript
js图片无缝滚动插件使用详解
2020/05/26 Javascript
vue-router两种模式区别及使用注意事项详解
2019/08/01 Javascript
微信小程序如何连接Java后台
2019/08/08 Javascript
详解利用nodejs对本地json文件进行增删改查
2019/09/20 NodeJs
js判断浏览器的环境(pc端,移动端,还是微信浏览器)
2020/12/24 Javascript
nodejs制作小爬虫功能示例
2020/02/24 NodeJs
vue中defineProperty和Proxy的区别详解
2020/11/30 Vue.js
python中的计时器timeit的使用方法
2017/10/20 Python
python ansible服务及剧本编写
2017/12/29 Python
python使用锁访问共享变量实例解析
2018/02/08 Python
python进行TCP端口扫描的实现
2018/12/21 Python
PyQt5笔记之弹出窗口大全
2019/06/20 Python
python使用pandas处理excel文件转为csv文件的方法示例
2019/07/18 Python
Emporio Armani腕表天猫官方旗舰店:乔治·阿玛尼为年轻人设计的副线品牌
2017/07/02 全球购物
斯德哥尔摩通票:Stockholm Pass
2018/01/09 全球购物
电子商务专业毕业生自荐书
2014/06/22 职场文书
送温暖献爱心活动总结
2014/07/08 职场文书
伏羲庙导游词
2015/02/09 职场文书