`
yuruei2000
  • 浏览: 34033 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

QQ空间模板选择特效

 
阅读更多 

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script> 

<style>

*{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; height:200px;}

.good_list{ padding:50px 0 30px 13px; width:870px; background:#f8f8f8; border:1px solid #eaeaea; margin:50px auto 0 auto; overflow:hidden; height:400px;}

.item{ float:left; margin:13px 13px 0 0; position:relative; z-index:0; width:200px; height:120px;}

.good{ padding:8px;width:184px; height:104px;}

.goodOp{ padding:2px; border:1px solid #a8a8a8; width:180px; height:100px; background:#fff; font-size:0}

.goodHover{ padding:0px; position:absolute; z-index:1; top:-40px; left:-4px; width:210px; height:204px; display:none;}

.goodHd{ background:url('http://websalon.cn/miaov/%E4%BB%BFqq%E7%A9%BA%E9%97%B4%E5%9B%BE%E7%89%87%E6%98%BE%E7%A4%BA%E6%95%88%E6%9E%9C/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>

$(function(){



		$("#list>.item").hover(function(){

				$(this).css('z-index','101').find(".goodHover").show().css('z-index','100');

			},function(){

				$(this).css('z-index','0').find(".goodHover").hide().css('z-index','0');

			});

	});

</script>

</head>



<body>

<div id="wrap clearfix">

	<div class="good_list" id="list">

    	<div class="item">

        	<div class="good">

            	<div class="goodOp"><img src="http://websalon.cn/miaov/%E4%BB%BFqq%E7%A9%BA%E9%97%B4%E5%9B%BE%E7%89%87%E6%98%BE%E7%A4%BA%E6%95%88%E6%9E%9C/57710_2.gif"></div>

            </div>

            <div class="goodHover">

            	<div class="goodHd">

                	<h2>西班牙</h2>

                    <p>点击图片预览装扮</p>

                	<div class="img">

                	<div class="goodOp"><img src="http://websalon.cn/miaov/%E4%BB%BFqq%E7%A9%BA%E9%97%B4%E5%9B%BE%E7%89%87%E6%98%BE%E7%A4%BA%E6%95%88%E6%9E%9C/57710_2.gif"></div>

                    </div>

                </div>                

            </div>

        </div>

        <div class="item">

        	<div class="good">

            	<div class="goodOp"><img src="http://websalon.cn/miaov/%E4%BB%BFqq%E7%A9%BA%E9%97%B4%E5%9B%BE%E7%89%87%E6%98%BE%E7%A4%BA%E6%95%88%E6%9E%9C/57710_2.gif"></div>

            </div>

            <div class="goodHover">

            	<div class="goodHd">

                	<h2>西班牙</h2>

                    <p>点击图片预览装扮</p>

                	<div class="img">

                	<div class="goodOp"><img src="http://websalon.cn/miaov/%E4%BB%BFqq%E7%A9%BA%E9%97%B4%E5%9B%BE%E7%89%87%E6%98%BE%E7%A4%BA%E6%95%88%E6%9E%9C/57710_2.gif"></div>

                    </div>

                </div>                

            </div>

        </div>

        <div class="item">

        	<div class="good">

            	<div class="goodOp"><img src="http://websalon.cn/miaov/%E4%BB%BFqq%E7%A9%BA%E9%97%B4%E5%9B%BE%E7%89%87%E6%98%BE%E7%A4%BA%E6%95%88%E6%9E%9C/57710_2.gif"></div>

            </div>

            <div class="goodHover">

            	<div class="goodHd">

                	<h2>西班牙</h2>

                    <p>点击图片预览装扮</p>

                	<div class="img">

                	<div class="goodOp"><img src="http://websalon.cn/miaov/%E4%BB%BFqq%E7%A9%BA%E9%97%B4%E5%9B%BE%E7%89%87%E6%98%BE%E7%A4%BA%E6%95%88%E6%9E%9C/57710_2.gif"></div>

                    </div>

                </div>                

            </div>

        </div>

        <div class="item">

        	<div class="good">

            	<div class="goodOp"><img src="http://websalon.cn/miaov/%E4%BB%BFqq%E7%A9%BA%E9%97%B4%E5%9B%BE%E7%89%87%E6%98%BE%E7%A4%BA%E6%95%88%E6%9E%9C/57710_2.gif"></div>

            </div>

            <div class="goodHover">

            	<div class="goodHd">

                	<h2>西班牙</h2>

                    <p>点击图片预览装扮</p>

                	<div class="img">

                	<div class="goodOp"><img src="http://websalon.cn/miaov/%E4%BB%BFqq%E7%A9%BA%E9%97%B4%E5%9B%BE%E7%89%87%E6%98%BE%E7%A4%BA%E6%95%88%E6%9E%9C/57710_2.gif"></div>

                    </div>

                </div>                

            </div>

        </div>

        <div class="item">

        	<div class="good">

            	<div class="goodOp"><img src="http://websalon.cn/miaov/%E4%BB%BFqq%E7%A9%BA%E9%97%B4%E5%9B%BE%E7%89%87%E6%98%BE%E7%A4%BA%E6%95%88%E6%9E%9C/57710_2.gif"></div>

            </div>

            <div class="goodHover">

            	<div class="goodHd">

                	<h2>西班牙</h2>

                    <p>点击图片预览装扮</p>

                	<div class="img">

                	<div class="goodOp"><img src="http://websalon.cn/miaov/%E4%BB%BFqq%E7%A9%BA%E9%97%B4%E5%9B%BE%E7%89%87%E6%98%BE%E7%A4%BA%E6%95%88%E6%9E%9C/57710_2.gif"></div>

                    </div>

                </div>                

            </div>

        </div>

        <div class="item">

        	<div class="good">

            	<div class="goodOp"><img src="http://websalon.cn/miaov/%E4%BB%BFqq%E7%A9%BA%E9%97%B4%E5%9B%BE%E7%89%87%E6%98%BE%E7%A4%BA%E6%95%88%E6%9E%9C/57710_2.gif"></div>

            </div>

            <div class="goodHover">

            	<div class="goodHd">

                	<h2>西班牙</h2>

                    <p>点击图片预览装扮</p>

                	<div class="img">

                	<div class="goodOp"><img src="http://websalon.cn/miaov/%E4%BB%BFqq%E7%A9%BA%E9%97%B4%E5%9B%BE%E7%89%87%E6%98%BE%E7%A4%BA%E6%95%88%E6%9E%9C/57710_2.gif"></div>

                    </div>

                </div>                

            </div>

        </div>

        <div class="item">

        	<div class="good">

            	<div class="goodOp"><img src="http://websalon.cn/miaov/%E4%BB%BFqq%E7%A9%BA%E9%97%B4%E5%9B%BE%E7%89%87%E6%98%BE%E7%A4%BA%E6%95%88%E6%9E%9C/57710_2.gif"></div>

            </div>

            <div class="goodHover">

            	<div class="goodHd">

                	<h2>西班牙</h2>

                    <p>点击图片预览装扮</p>

                	<div class="img">

                	<div class="goodOp"><img src="http://websalon.cn/miaov/%E4%BB%BFqq%E7%A9%BA%E9%97%B4%E5%9B%BE%E7%89%87%E6%98%BE%E7%A4%BA%E6%95%88%E6%9E%9C/57710_2.gif"></div>

                    </div>

                </div>                

            </div>

        </div>

        <div class="item">

        	<div class="good">

            	<div class="goodOp"><img src="http://websalon.cn/miaov/%E4%BB%BFqq%E7%A9%BA%E9%97%B4%E5%9B%BE%E7%89%87%E6%98%BE%E7%A4%BA%E6%95%88%E6%9E%9C/57710_2.gif"></div>

            </div>

            <div class="goodHover">

            	<div class="goodHd">

                	<h2>西班牙</h2>

                    <p>点击图片预览装扮</p>

                	<div class="img">

                	<div class="goodOp"><img src="http://websalon.cn/miaov/%E4%BB%BFqq%E7%A9%BA%E9%97%B4%E5%9B%BE%E7%89%87%E6%98%BE%E7%A4%BA%E6%95%88%E6%9E%9C/57710_2.gif"></div>

                    </div>

                </div>                

            </div>

        </div>

    </div>

</div>

</body>

</html>
 

 

分享到：
| 百度端午节特效赛龙舟特效
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jQuery仿QQ空间时间轴动画特效特效代码

    【jQuery仿QQ空间时间轴动画特效】是一种利用JavaScript库jQuery和HTML5技术，精心设计的网页元素动画效果，主要用于展示一系列事件或信息，类似于QQ空间中的个人动态展示方式。这种特效能够以美观、动态的形式组织...

    QQ非主流空间代码模板

    在非主流空间模板中，JavaScript的运用可以使空间更加生动有趣。 4. **文章、列表、首页**：这些文件名可能是模板中的主要部分。"文章"可能包含了各种样式的文章展示代码，可以自定义文章的显示方式；"列表"可能是...

    仿QQ空间多文字编辑器特效代码

    "仿QQ空间多文字编辑器特效代码"是一个项目，旨在实现与QQ空间类似的多功能、具有特效的文字编辑功能。这个编辑器可能包括了富文本编辑、图片上传、表情插入、格式化文本等多种特性，以提升用户的在线文字输入体验。...

    基于jQuery实现仿QQ空间时光轴特效源码.zip

    在Web开发中，创建引人入胜的用户体验是至关重要的，而仿QQ空间时光轴特效就是一个很好的例子。这个特效通过模拟真实世界中的时间线，将用户的动态、照片、状态更新等信息以一种有序、美观的方式展示出来。本项目...

    QQ空间代码 免费QQ空间代码

    用户只需选择预设的模板或功能，代码生成器会自动生成相应的代码，用户将其复制粘贴到QQ空间的自定义模块中，即可看到效果。 免费QQ空间代码大全通常包含各种类型的代码资源，比如： 1. **皮肤代码**：用于改变...

    QQ空间趣味图片分享html模板是一款QQ空间穿帮十张图的html趣味分享模板。.zip

    QQ空间趣味图片分享html模板是针对QQ空间设计的一款互动式网页模板，主要用于用户分享和浏览穿帮图片，增加社交互动性。这款模板基于HTML技术，是前端开发中的一个实例，展示了如何利用HTML来构建动态、有趣的用户...

    菜单、后台、网页模板

    非常大气适合QQ空间网站的CSS导航菜单模板 非常美观的jquery鼠标点击下级菜单 国外简单后台模板4 国外简单后台模板5 黑色炫酷个人型网站导航菜单模板推荐 漂亮树形菜单 适合电子商务等网站的CSS二级导航模板版 适合...

    QQ空间魔力日志源码

    QQ空间魔力日志源码是一个专为QQ空间设计的日志模板或插件的源代码，它赋予用户在发布日志时添加各种互动元素和视觉特效的能力，从而提高日志的吸引力和趣味性。这个源码可能包含了HTML、CSS、JavaScript等编程语言...

    微动精灵qq空间克隆

    【微动精灵QQ空间克隆】是一款专门针对QQ空间设计的工具，它的主要功能是允许用户将自己喜欢的QQ空间模板进行复制和应用到自己的空间上。这个过程通常被称为"克隆"，它使得用户能够轻松地获取并使用他人空间的布局、...

    qq空间装扮器qq空间装扮器

    1. **主题模板**：提供各种风格的主题模板，用户可以根据自己的喜好选择，一键应用到QQ空间，快速改变整体布局和视觉效果。 2. **自定义背景**：允许用户上传自己的图片作为空间背景，或者从软件提供的背景库中挑选...

    qq空间魔力日志

    QQ空间魔力日志是一款专为QQ空间用户设计的工具软件，它允许用户们通过个性化的方式展示自己的信息，增加互动性和趣味性。这款工具的核心功能是帮助用户制作出具有魔力效果的日志，吸引他人浏览并参与互动。下面将...

    QQ空间卡片装扮怎么用.docx

    QQ空间卡片装扮是一种个性化的空间展示方式，它允许用户通过选择不同的卡片模板来改变QQ空间的外观和风格，以此表达个人品味和情绪。这个功能只有在更新到QQ空间的最新版本后才能使用，确保你始终拥有最新的功能和...

    flash文字+背景特效制作软件

    “空间”可能是指在网络空间或者社交媒体上分享作品的用途，如QQ空间。“qq”和“个性”可能指的是该软件在中国市场的应用，人们常在QQ等社交平台上用此类动画来展示个性。 在压缩包子文件的文件名称列表中，...

    QQ空间相册效果

    QQ空间相册效果是一种网页应用技术，主要用于提升用户体验，使用户在浏览相册时能够享受到更美观、流畅的视觉效果。这种特效通常涉及到JavaScript库，尤其是jQuery，因为jQuery以其高效、易用的API成为了实现此类...

    26套html5网页响应式模板（第四部分）

    “日志520 qq空间日志大全触屏版自适应手机空间网站模板下载”适合社交网络或个人博客，提供日志发布、浏览和分享功能。 最后，“掌上家庭医生手机wap用户注册登陆网站模板”可能是一个医疗健康咨询平台，用户注册...

    QQ空间DJ喊麦制作软件V1.0

    QQ空间DJ喊麦制作软件V1.0是一款专为爱好音乐制作和喊麦的用户设计的应用程序。在本文中，我们将深入探讨这款软件的功能、用途以及如何使用它来提升你的喊麦技巧。 首先，让我们理解什么是喊麦。喊麦是中国流行的一...

    qq客服收缩特效

    QQ客服收缩特效是一种常见的交互设计，它主要用于提升用户体验，特别是在移动设备上，通过紧凑的界面设计节省屏幕空间。在QQ这款流行的即时通讯软件中，客服功能的收缩特效旨在让用户能够快速、便捷地访问和隐藏客服...

    QQ名片制作工具

    - **分享到QQ**：将制作好的名片上传到QQ空间或发送给好友，展现个人风采。 3. **相关技术** - **图形用户界面**：QQ名片制作工具的界面设计采用GUI（图形用户界面），使用户操作直观易懂。 - **图像处理**：...

    softQQ空间制作软件

    【标题】"softQQ空间制作软件"所涉及的知识点主要集中在如何使用该软件来创建和定制个人的QQ空间。QQ空间是中国腾讯公司推出的个人社交平台，用户可以在这里发布动态、分享照片、写日志，以及进行各种个性化设置，...

    QQ照片墙精美制作工具

    2. **模板选择**：提供多种预设的精美模板，用户可以根据自己的喜好选择合适的模板，一键生成照片墙，省去了自己设计布局的麻烦。 3. **自定义布局**：除了预设模板，工具还可能支持用户自定义照片的排列方式，如...

Magicbox
Global site tag (gtag.js) - Google Analytics