可用于 企业网站中的 赞助商、 合作伙伴、 公司产品、 招聘计划等等模块
主要运用的技术有 php +CSS + Jquery插件 flip http://lab.smashup.it/flip/
实现步骤可以大致这样来讲
我们可以看到某个翻牌的div 的源码如下
<div title="Click to flip" class="sponsor">
<div class="sponsorFlip">
<img alt="More about google" src="img/sponsors/google.png">
</div>
<div class="sponsorData">
<div class="sponsorDescription">
The company that redefined web search.
</div>
<div class="sponsorURL">
<a href="http://www.google.com/">http://www.google.com/ </a>
</div>
</div>
</div>
Step 1 我们会首先建立一个 $Sponsor的数组 数组内 含有以下信息 包括logo 网址等内容
// Each sponsor is an element of the $sponsors array:
$sponsors = array(
array('facebook','The biggest social..','http://www.facebook.com/'),
array('adobe','The leading software de..','http://www.adobe.com/'),
array('microsoft','One of the top software c..','http://www.microsoft.com/'),
array('sony','A global multibillion electronics..','http://www.sony.com/'),
array('dell','One of the biggest computer develo..','http://www.dell.com/'),
array('ebay','The biggest online auction and..','http://www.ebay.com/'),
array('digg','One of the most popular web 2.0..','http://www.digg.com/'),
array('google','The company that redefined w..','http://www.google.com/'),
array('ea','The biggest computer game manufacturer.','http://www.ea.com/'),
array('mysql','The most popular open source dat..','http://www.mysql.com/'),
array('hp','One of the biggest computer manufacturers.','http://www.hp.com/'),
array('yahoo','The most popular network of so..','http://www.yahoo.com/'),
array('cisco','The biggest networking and co..','http://www.cisco.com/'),
array('vimeo','A popular video-centric social n..','http://www.vimeo.com/'),
array('canon','Imaging and optical technology ma..','http://www.canon.com/')
);
// Randomizing the order of sponsors:
shuffle($sponsors);
Step2 然后我们会通过遍历整个数组在页面中展示出来
// Looping through the array:
foreach($sponsors as $company)
{
echo'
<div class="sponsor" title="Click to flip">
<div class="sponsorFlip">
<img src="img/sponsors/'.$company[0].'.png" alt="More about '.$company[0].'" />
</div>
<div class="sponsorData">
<div class="sponsorDescription">
'.$company[1].'
</div>
<div class="sponsorURL">
<a href="'.$company[2].'">'.$company[2].'</a>
</div>
</div>
</div>
';
}
Step 3用到的css 样式如下
body{
/* Setting default text color, background and a font stack */
font-size:0.825em;
color:#666;
background-color:#fff;
font-family:Arial, Helvetica, sans-serif;
}
.sponsorListHolder{
margin-bottom:30px;
}
.sponsor{
width:180px;
height:180px;
float:left;
margin:4px;
/* Giving the sponsor div a relative positioning: */
position:relative;
cursor:pointer;
}
.sponsorFlip{
/* The sponsor div will be positioned absolutely with respect
to its parent .sponsor div and fill it in entirely */
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
border:1px solid #ddd;
background:url("img/background.jpg") no-repeat center center #f9f9f9;
}
.sponsorFlip:hover{
border:1px solid #999;
/* CSS3 inset shadow: */
-moz-box-shadow:0 0 30px #999 inset;
-webkit-box-shadow:0 0 30px #999 inset;
box-shadow:0 0 30px #999 inset;
}
/////////////////////////////////////////////////////////////////
.sponsorFlip img{
/* Centering the logo image in the middle of the .sponsorFlip div */
position:absolute;
top:50%;
left:50%;
margin:-70px 0 0 -70px;
}
.sponsorData{
/* Hiding the .sponsorData div */
display:none;
}
.sponsorDescription{
font-size:11px;
padding:50px 10px 20px 20px;
font-style:italic;
}
.sponsorURL{
font-size:10px;
font-weight:bold;
padding-left:20px;
}
.clear{
/* This class clears the floats */
clear:both;
}
Step4 主要运用的jquey 方法如下
$(document).ready(function(){
/* The following code is executed once the DOM is loaded */
$('.sponsorFlip').bind("click",function(){
// $(this) point to the clicked .sponsorFlip element (caching it in elem for speed):
var elem = $(this);
// data('flipped') is a flag we set when we flip the element:
if(elem.data('flipped'))
{
// If the element has already been flipped, use the revertFlip method
// defined by the plug-in to revert to the default state automatically:
elem.revertFlip();
// Unsetting the flag:
elem.data('flipped',false)
}
else
{
// Using the flip method defined by the plugin:
elem.flip({
direction:'lr',
speed: 350,
onBefore: function(){
// Insert the contents of the .sponsorData div (hidden
// from view with display:none) into the clicked
// .sponsorFlip div before the flipping animation starts:
elem.html(elem.siblings('.sponsorData').html());
}
});
// Setting the flag:
elem.data('flipped',true);
}
});
});
详细 见 源码
更多内容 请参考我的个人博客 http://ismartstudio.com/
相关推荐
在本文中,我们将深入探讨如何实现一个基于jQuery的翻牌倒计时效果。这个效果通常用于网站或应用中,以创建吸引用户注意力的倒计时计时器,比如促销活动的截止时间显示或者赛事倒计时等。我们将讨论jQuery库的基础...
本篇文章将深入解析这款基于jQuery和CSS3属性构建的手机端翻牌抽奖游戏的实现原理和关键代码。 首先,jQuery库是JavaScript的一个轻量级框架,它简化了DOM操作、事件处理和动画效果,使得开发者能更高效地创建动态...
**jQuery版相片墙**是一种常见的网页交互设计,它通过JavaScript库jQuery实现了一种动态的图片展示效果。这种效果能够吸引用户的注意力,提供更丰富的用户体验。在这个设计中,用户可以点击小图片,使其放大并聚合...
jQuery是一款广泛应用于网页交互与动态效果开发的JavaScript库,它简化了HTML文档遍历、事件处理、动画设计和Ajax交互。本压缩包“jQuery各类炫酷效果demo”包含了一系列使用jQuery实现的精彩示例,旨在帮助开发者更...
本资源"jQuery图片翻牌品牌翻转切换效果"提供了一种利用JavaScript库jQuery实现的独特图片展示方式,尤其适用于品牌展示或产品介绍。不同于通常依赖CSS3来实现的翻转效果,此解决方案保证了对所有浏览器的良好兼容性...
总结起来,这款“又一款很酷的jQuery相册浏览”提供了独特的图片展示体验,利用jQuery库的强大功能,创造出引人入胜的视觉效果。对于网页设计师和开发者来说,它是一个有价值的工具,可以提升网站的用户体验和互动性...
本文将重点介绍如何利用jQuery实现一个有趣的“Filp翻牌效果”。翻牌效果通常用于卡片游戏或者展示信息的翻转动画,给人一种立体感和互动性。这种效果可以增加用户界面的趣味性和吸引力。 首先,让我们了解jQuery的...
jQuery是一款强大的JavaScript库,它极大地简化了JavaScript编程,使得网页动态效果的实现变得更加便捷。在这个项目中,重点是利用jQuery实现两种常见的动画效果:翻牌和百叶窗效果。 翻牌效果是一种视觉上类似卡片...
在本文中,我们将深入探讨如何使用jQuery来实现一个股票数据翻牌效果。这个效果通常用于显示实时更新的股票价格,让信息更新更加直观且吸引用户的注意力。jQuery是一种广泛使用的JavaScript库,它简化了HTML文档遍历...
"图片滑动翻牌效果"是一种常见且吸引人的交互设计,常用于展示产品、图片轮播或卡片式布局中。本教程将详细介绍如何利用jQuery实现这一效果,代码简洁有序,便于理解和修改。 首先,jQuery是一个强大的JavaScript库...
"jQuery图片滑动翻牌效果"是一种常见且吸引人的交互方式,常用于展示产品、图片轮播或卡片翻转等场景。本文将深入探讨如何利用jQuery库来实现这一效果。 1. jQuery基础 首先,我们需要了解jQuery库的基本用法。...
本教程将详细讲解如何利用jQuery实现一个图片翻牌品牌翻转切换的效果,这是一种常见的网页动态展示手法,尤其适用于品牌展示或产品介绍。 首先,我们需要理解jQuery的基本使用。jQuery的核心理念是“Write Less, Do...
jQuery马赛克图片拼接3d翻牌效果
《简单的jQuery翻牌去重小游戏》是一款基于JavaScript库jQuery实现的趣味性小应用,它将经典的翻牌记忆游戏与消除元素结合,旨在提高用户的记忆力和观察力。游戏以多关卡的形式进行,从2*2的简单布局到10*10的复杂...
【jQuery图片卡片翻牌动画特效】是一个利用jQuery和CSS3技术构建的动态视觉效果,它在网页中模拟了真实的卡片翻转,为用户提供了一种新颖的展示方式,常见于产品展示、图片轮播或者信息卡片设计中。这个特效能够吸引...
**jQuery复古翻牌时钟效果详解** 在前端开发中,为用户提供吸引人的视觉效果是提升用户体验的重要手段之一。本文将详细介绍基于jQuery实现的三种复古翻牌时钟效果,包括普通时钟显示、倒计时以及10秒倒计时并带有回...
【jQuery+CSS3翻牌抽奖游戏代码】是一种利用前端技术实现的互动抽奖程序,它结合了JavaScript库jQuery的高效操作DOM能力和CSS3的新特性,为用户提供了一种视觉效果丰富的3D翻牌体验。这款抽奖游戏设计的目标是兼顾...