以下是 jQuery图像碎片切换效果插件FragmentFly特效代码 的示例演示效果:
部分效果截图1:
部分效果截图2:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!-->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<!--<![endif]-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery图像碎片切换效果插件FragmentFly</title>
<script src="./js/libs/shCore.js" type="text/javascript"></script>
<script src="./js/libs/shBrushCss.js" type="text/javascript"></script>
<script src="./js/libs/shBrushJScript.js" type="text/javascript"></script>
<script src="./js/libs/shBrushCSharp.js" type="text/javascript"></script>
<script src="./js/libs/shBrushXml.js" type="text/javascript"></script>
<script type="text/javascript">
SyntaxHighlighter.config.clipboardSwf = './js/libs/clipboard.swf';
SyntaxHighlighter.all();
</script>
<link rel="stylesheet" type="text/css" href="./js/libs/shCore.css" />
<link rel="stylesheet" type="text/css" href="./js/libs/shThemeDefault.css" />
<link href="./css/demo.css" rel="stylesheet" type="text/css" />
<!-- <link href="./css/style.css" rel="stylesheet" type="text/css" /> -->
<!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
<div class="all_wrap">
<div class="wrap_head">
<!-- 对fragment_title使用fragmenFly插件 -->
<div id="fragment_title">
</div>
</div>
<div class="wrap_middle">
<div class="wrap_middle_head">
<ul class="nav_ul">
<li>
<a href="#">使用说明</a>
</li>
<li>
<a href="#">配置说明</a>
</li>
<li>
<a href="#">动画模拟</a>
</li>
<li>
<a href="#">author <span class="dot">:</span><span class="ahkari"> Ahkari</span></a>
</li>
<div class="clearFloat"></div>
</ul>
</div>
<div class="wrap_middle_body">
<div class="warp_middle_body_wrap">
<div class="parm_info">
<div class="parm_info_title" id="useInformation">
<p>使用说明</p>
</div>
<div class="infoArea">
<P class="heigher">步骤一：html</P>
<p>创建运用背景图片的元素</p>
<div class="codeArea">
<pre class="brush: html;">
<!-- 对fragment_title使用fragmenFly插件 -->
<div id="fragment_title">
</div>
</pre>
</div>
<p class="heigher">步骤二：css</p>
<p> 1. 该元素设为相对定位，便于分割后的子元素进行定位。</p>
<p> 2. 宽高设为与被分割的图片一致，可确保精准分割。</p>
<div class="codeArea">
<pre class="brush: css;">
#fragment_title{
/*必须设为relative*/
position: relative;
/*宽高与被分割的背景图片一致*/
width: 424px;
height:150px;
}
</pre>
</div>
<p class="heigher">步骤三：javascript</p>
<p> 1. 通过jquery实现，需要导入所需文件。</p>
<div class="codeArea">
<pre class="brush: html;">
<!-- 导入jquery或有jquery环境 -->
<script src="../libs/jquery.js" type="text/javascript"></script>
<!-- 导入插件 -->
<script src="../jquery.fragmentFly.js" type="text/javascript"></script>
</pre>
</div>
<p> 2. 对元素运用插件，参数设置除了图片目录都有默认值。</p>
<div class="codeArea">
<pre class="brush: javascript;">
/*对背景元素使用插件方法*/
$("#fragment_title").fragmentFly({
image_url:"./img/title.png", //背景图路径，当前目录为元素所在的html目录
cut_dir:"x", //可选"x"或"y"，默认均分x方向
ave_part:12, //均分cut_dir方向，默认切割成12份
rm_part:[2,3] //非cut_dir方向上随机切割，默认最小2份，最多3份
},{
anime_dir:"down", //切割子元素动画运行方向，可选"up","down","left","right"，默认为down
path:[500,800], //切割子元素动画路长，默认路径最短500px，最长800px
time:[1000,1300], //切割子元素动画时长，默认时长最短1000ms，最长1300ms
opacity:[1,1] //切割子元素透明度变化，默认初始为1，结束为1(即无渐变)
});
</pre>
</div>
<p> 快速配置如下。</p>
<div class="codeArea">
<pre class="brush: javascript;">
/*快速配置*/
$("#fragment_title").fragmentFly({image_url:"./img/title.png"},{});
</pre>
</div>
</div>
<br/>
<br/>
<div class="parm_info_title" id="quickSetting">
<p>配置说明</p>
</div>
<div class="Info_img_Wrap">
<div class="Info_img_wrap_info">
<br/>
<p class="wordSet">切割方向cut_dir</p>
<p class="wordSetShin">接受参数:"x"或"y"</p>
<br/>
<p>为了模拟出碎片的随机效果，先选择一个方向均匀分割，另一个方向则可以赋给随机值，随机分割。</p>
<br/>
<hr style="border:0;background-color:#cccccc;height:1px;">
<br/>
<p class="wordSet">均分值ave_part</p>
<p class="wordSetShin">接受参数:整数值，如4</p>
<br/>
<p>均分cut_dir方向</p>
<br/>
<hr style="border:0;background-color:#cccccc;height:1px;">
<br/>
<p class="wordSet">随机分割值rm_part</p>
<p class="wordSetShin">接受参数:长度为2的整数数组，如[3,8]</p>
<br/>
<p>非均分方向上，随机分割。参数是分割份数的取值区间。</p>
</div>
<div class="Info_img_wrap_img">
<div class="img_demo">
<div class="demo1"></div>
<div class="demo1_1"></div>
</div>
<div class="img_demo">
<div class="demo2"></div>
<div class="demo2_1"></div>
</div>
<!-- <img id="demo1" src="./img/demo1.png" />
<img id="demo2" src="./img/demo2.png" /> -->
</div>
<div class="clearFloat"></div>
</div>
<br/>
<br/>
<div class="parm_info_title" id="animeModifi">
<p>动画模拟</p>
</div>
<div class="infoArea">
<table class="demo_anime_config" border="0">
<tr class="line1">
<td></td>
<td>
<div class="td_2">
</div>
</td>
<td></td>
</tr>
<tr class="line2">
<td>
<div class="td_4">
</div>
</td>
<td>
<!-- 对demoAnime使用fragmenFly插件 -->
<div id="demoAnime_img"></div>
</td>
<td>
<div class="td_6">
</div>
</td>
</tr>
<tr class="line3">
<td></td>
<td>
<div class="td_8">
</div>
</td>
<td></td>
</tr>
<tr class="line4">
<td>
<p>
最短路径(px)
</p>
</td>
<td>
<!-- <section class="container_line4">
<input type="radio" class="radio" name="progress1" value="50" id="five">
<label for="five" class="label">50</label>
<input type="radio" class="radio" name="progress1" value="250" id="twentyfive" checked>
<label for="twentyfive" class="label">250</label>
<input type="radio" class="radio" name="progress1" value="500" id="fifty">
<label for="fifty" class="label">500</label>
<input type="radio" class="radio" name="progress1" value="750" id="seventyfive">
<label for="seventyfive" class="label">750</label>
<input type="radio" class="radio" name="progress1" value="1000" id="onehundred">
<label for="onehundred" class="label">1000</label>
</section> -->
<p>
运动路径的可能的最小值
</p>
</td>
<td>
<input type="text" style="width:80px" class="input1" value="500"></input>
</td>
</tr>
<tr class="line5">
<td>
<p>
最长路径(px)
</p>
</td>
<td>
<!-- <section class="container_line5">
<input type="radio" class="radio" name="progress2" value="100" id="five">
<label for="five" class="label">100</label>
<input type="radio" class="radio" name="progress2" value="500" id="twentyfive" checked>
<label for="twentyfive" class="label">500</label>
<input type="radio" class="radio" name="progress2" value="1000" id="fifty">
<label for="fifty" class="label">1000</label>
<input type="radio" class="radio" name="progress2" value="1500" id="seventyfive">
<label for="seventyfive" class="label">1500</label>
<input type="radio" class="radio" name="progress2" value="2000" id="onehundred">
<label for="onehundred" class="label">2000</label>
</section> -->
<p>
运动路径的可能的最大值
</p>
</td>
<td><input type="text" style="width:80px" class="input2" value="800"></input></td>
</tr>
<tr class="line6">
<td>
<p>
最短时间(ms)
</p>
</td>
<td>
<!-- <section class="container_line6">
<input type="radio" class="radio" name="progress3" value="200" id="five">
<label for="five" class="label">200</label>
<input type="radio" class="radio" name="progress3" value="500" id="twentyfive" checked>
<label for="twentyfive" class="label">500</label>
<input type="radio" class="radio" name="progress3" value="800" id="fifty">
<label for="fifty" class="label">800</label>
<input type="radio" class="radio" name="progress3" value="1500" id="seventyfive">
<label for="seventyfive" class="label">1500</label>
<input type="radio" class="radio" name="progress3" value="2500" id="onehundred">
<label for="onehundred" class="label">2500</label>
</section> -->
<p>
运动时间的可能的最小值
</p>
</td>
<td><input type="text" style="width:80px" class="input3" value="1000"></input></td>
</tr>
<tr class="line7">
<td>
<p>
最长时间(ms)
</p>
</td>
<td>
<!-- <section class="container_line7">
<input type="radio" class="radio" name="progress4" value="400" id="five">
<label for="five" class="label">400</label>
<input type="radio" class="radio" name="progress4" value="1000" id="twentyfive" checked>
<label for="twentyfive" class="label">1000</label>
<input type="radio" class="radio" name="progress4" value="1600" id="fifty">
<label for="fifty" class="label">1600</label>
<input type="radio" class="radio" name="progress4" value="3000" id="seventyfive">
<label for="seventyfive" class="label">3000</label>
<input type="radio" class="radio" name="progress4" value="5000" id="onehundred">
<label for="onehundred" class="label">5000</label>
</section> -->
<p>
运动时间的可能的最大值
</p>
</td>
<td><input type="text" style="width:80px" class="input4" value="1300"></input></td>
</tr>
<tr class="line8">
<td>
<p>
初始透明度
</p>
</td>
<td>
<!-- <section class="container_line8">
<input type="radio" class="radio" name="progress5" value="0" id="five">
<label for="five" class="label">0</label>
<input type="radio" class="radio" name="progress5" value="0.25" id="twentyfive" checked>
<label for="twentyfive" class="label">0.25</label>
<input type="radio" class="radio" name="progress5" value="0.5" id="fifty">
<label for="fifty" class="label">0.5</label>
<input type="radio" class="radio" name="progress5" value="0.75" id="seventyfive">
<label for="seventyfive" class="label">0.75</label>
<input type="radio" class="radio" name="progress5" value="1" id="onehundred">
<label for="onehundred" class="label">1</label>
</section> -->
<p>
元素运动时的起始透明度
</p>
</td>
<td><input type="text" style="width:80px" class="input5" value="1"></input></td>
</tr>
<tr class="line9">
<td>
<p>
结束透明度
</p>
</td>
<td>
<!-- <section class="container_line9">
<input type="radio" class="radio" name="progress6" value="0" id="five_test">
<label for="five" class="label">0</label>
<input type="radio" class="radio" name="progress6" value="0.25" id="twentyfive" checked>
<label for="twentyfive" class="label">0.25</label>
<input type="radio" class="radio" name="progress6" value="0.5" id="fifty">
<label for="fifty" class="label">0.5</label>
<input type="radio" class="radio" name="progress6" value="0.75" id="seventyfive">
<label for="seventyfive" class="label">0.75</label>
<input type="radio" class="radio" name="progress6" value="1" id="onehundred">
<label for="onehundred" class="label">1</label>
</section> -->
<p>
元素运动完成后的透明度
</p>
</td>
<td><input type="text" style="width:80px" class="input6" value="1"></input></td>
</tr>
</table>
</div>
</div>
<div class="demo_opeation">
</div>
</div>
</div>
</div>
<div class="wrap_bottom" id="last_nav"><div class="wrap_bottom_fixed"></div></div>
</div>
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.fragmentFly.js" type="text/javascript"></script>
<script src="./js/demo.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
});
</script>
</body>
</html>
JS代码(demo.js):
$(function(){
/** * [fragment 碎片视差动画插件] * * @param{
[divisionSetting]}
* 分割设置，{
* image_url:url,* cut_dir:"x","y",* ave_part:ave_part,* rm_part:rm_part *}
* @param{
[animeSetting]}
* 动画设置，{
* anime_dir:"down","up","left","right" * path:[100,200] * time:[2000,3000] * opacity:[0,1] *}
* @return null */
$("#fragment_title").fragmentFly({
image_url:"./img/title.png",cut_dir:"x",ave_part:8,rm_part:[3,6]}
,{
anime_dir:"up",path:[100,200],time:[600,1000],opacity:[0,1]}
);
$(".nav_ul>li:first-child").on("click",function(){
$("html,body").animate({
scrollTop:$("#useInformation").offset().top}
,300);
}
);
$(".nav_ul>li:nth-child(2)").on("click",function(){
$("html,body").animate({
scrollTop:$("#quickSetting").offset().top}
,600);
}
);
$(".nav_ul>li:nth-child(3)").on("click",function(){
$("html,body").animate({
scrollTop:$("#animeModifi").offset().top}
,800);
}
);
$(".nav_ul>li:nth-child(4)").on("click",function(){
$("html,body").animate({
scrollTop:$(".wrap_bottom").offset().top}
,900);
}
);
//让动画模拟处的按钮初始化芹况满足预期，并绑定焦点切换事件。 // for (var i=0;
i<6;
i++){
// var che=$("input[name=progress"+(i+1)+"]:checked");
// console.log(che.val());
// $(".input"+(i+1)).val(parseInt(che.val()));
//}
//for (var i=0;
i<6;
i++) // $("input[name=progress1]").change(function(){
// var che1=$("input[name=progress1]:checked");
// $(".input1").val((che1.val()));
//}
);
for(var i=0;
i<6;
i++){
$(".input"+(i+1)).css("color","gray");
}
$(".td_2").mouseenter(function(){
fragmentGetValueEnter("up");
}
).mouseleave(function(){
}
);
$(".td_4").mouseenter(function(){
fragmentGetValueEnter("left");
}
).mouseleave(function(){
}
);
$(".td_6").mouseenter(function(){
fragmentGetValueEnter("right");
}
).mouseleave(function(){
}
);
$(".td_8").mouseenter(function(){
fragmentGetValueEnter("down");
}
).mouseleave(function(){
}
);
function fragmentGetValueEnter(dir){
if($("#demoAnime_img>div").is(":animated")){
return false;
}
else{
bindFragmentPlugin(dir,$(".input1").val(),$(".input2").val(),$(".input3").val(),$(".input4").val(),$(".input5").val(),$(".input6").val());
}
}
//动画区 function bindFragmentPlugin(dir,val1,val2,val3,val4,val5,val6){
console.log(dir,val1,val2,val3,val4,val5,val6);
$("#demoAnime_img").fragmentFly({
image_url:"./img/demoAnime.png",cut_dir:"x",ave_part:10,rm_part:[4,7]}
,{
anime_dir:dir,path:[val1,val2],time:[val3,val4],opacity:[val5,val6]}
);
}
}
);
JS代码(jquery.fragmentFly.js):
;
(function($){
// 这里写代码了啦$.fn.extend({
/** * [fragmentFly 碎片视差动画插件] * @写于15/3/18 * @最后修改15/3/21 * @author：Ahkari * * @param{
[divisionSetting]}
* 分割设置，{
* image_url:url,* cut_dir:"x","y",* ave_part:12,* rm_part:[2,3] *}
* @param{
[animeSetting]}
* 动画设置，{
* anime_dir:"down","up","left","right" * path:[500,800] * time:[1000,1300] * opacity:[1,1] *}
* @return null */
"fragmentFly":function(divisionSetting,animeSetting){
// jQuery对象的方法扩展，所以用jQuery.fn.extend()来编写 cardDom=$(this);
//绑定的图像的宽高，以此作为切割标准 var cardHeight=cardDom.height();
var cardWidth=cardDom.width();
//获取ID，作为生成元素的主标识 var cardDomName=cardDom.attr("id");
var url=divisionSetting.image_url;
var cardCopyObjects;
// 获取divisionSetting内的数值。完成分割。 //指定参数为空时自动使用默认值。横向均分为12份，纵向随机分成2,3份。 var cut_dir=divisionSetting.cut_dir?divisionSetting.cut_dir:"x";
//平均切割的方向 var ave_part=divisionSetting.ave_part?divisionSetting.ave_part:12;
//平均切割份数 var rm_part=divisionSetting.rm_part?divisionSetting.rm_part:[2,3];
//随机切割份数，最小份数与最大份数 var rm_part_min;
//随机方向上最小可能值 var rm_part_max;
//随机方向上最大可能值 ave_part=Number(ave_part);
if (rm_part.length==1){
rm_part_min=Number(rm_part[0]);
rm_part_max=Number(rm_part[0]);
}
else{
rm_part_min=Number(rm_part[0]);
rm_part_max=Number(rm_part[1]);
}
var unitX;
//X方向上切割单位宽度 var unitY;
//Y方向上切割单位宽度 // var unitY1;
// var unitY2;
// 随机数生成函数，n为生成1-n的数 var getRandom=function(n){
return Math.floor(Math.random()*n+1)}
if (cut_dir=="x"){
unitX=cardWidth/ave_part;
//X方向均分的单位长度 // unitY1=cardHeight/2;
// UnitY2=cardHeight/3;
}
else{
unitY=cardHeight/ave_part;
}
var creatTitleCopy="";
//被html进去的全部元素字符串 var eachTitle;
//单个元素，一个个添加进creatTitleCopy中 var randomPart;
//随机方向上份数 var randomArr=[];
//记录每个随机数，便于之后动画绑定同样的份数 var opacity=animeSetting.opacity?animeSetting.opacity:[1,1];
var opacity_start;
var opacity_end;
if (opacity.length==1){
opacity_start=Number(opacity[0]);
opacity_end=Number(opacity[0]);
}
else{
opacity_start=Number(opacity[0]);
opacity_end=Number(opacity[1]);
}
//分割操作。外层是均等分割，内层是随机分割。 for (var i=0;
i<ave_part;
i++){
// var isRandom=(i%2==0)?2:3;
randomPart=getRandom((rm_part_max-rm_part_min)+1)+rm_part_min-1;
//此为满足[min,max]的随机值 // unitY=(i%2==0)?unitY1:unitY2;
if (cut_dir=="x"){
unitY=cardHeight/randomPart;
}
else{
unitX=cardWidth/randomPart;
}
randomArr.push(randomPart);
for (var j=0;
j<randomPart;
j++){
var left;
var top;
var width;
var height;
if (cut_dir=="x"){
left=i*unitX;
top=j*unitY;
width=unitX;
height=unitY;
}
else{
left=j*unitX;
top=i*unitY;
width=unitX;
height=unitY;
}
var styleStr="style=\"position:absolute;
z-index:10;
opacity:"+opacity_start+";
left:"+left+"px;
top:"+top+"px;
width:"+width+"px;
height:"+height+"px;
background:url("+url+") no-repeat -"+left+"px -"+top+"px;
\"";
eachTitle="<div id=\""+cardDomName+"_cardCopy"+i+"_"+j+"\" "+styleStr+"></div>";
creatTitleCopy+=eachTitle;
}
//for (var j=0;
j<isRandom;
j++)}
//for (var i=0;
i<12;
i++) cardDom.html(creatTitleCopy);
//元素添加进入cardDom //获取动画setting的值 // @param{
[animeSetting]}
// * 动画设置，{
// * anime_dir,// * path:[100 50],// * time:[2000 500] // *}
// * @return null // */
//有默认动画设置，默认是向下，最短路长500，最长路长800，最短时间1000ms，最长时间1300ms. var anime_dir=animeSetting.anime_dir?animeSetting.anime_dir:"down";
//动画的方向 var path=animeSetting.path?animeSetting.path:[500,800];
var time=animeSetting.path?animeSetting.time:[1000,1300];
// 绑动画 var anime_dir_parm;
var animeDirFlag;
//动画方向标识 //模式选择 switch(anime_dir){
case "down":anime_dir_parm="top";
animeDirFlag=1;
break;
case "up":anime_dir_parm="top";
animeDirFlag=0;
break;
case "left":anime_dir_parm="left";
animeDirFlag=0;
break;
case "right":anime_dir_parm="left";
animeDirFlag=1;
break;
}
var path_min;
var path_max;
var time_min;
var time_max;
//路径参数 if (path.length==1){
path_min=Number(path[0]);
path_max=Number(path[0]);
}
else{
path_min=Number(path[0]);
path_max=Number(path[1]);
}
//时间参数 if (time.length==1){
time_min=Number(time[0]);
time_max=Number(time[0]);
}
else{
time_min=Number(time[0]);
time_max=Number(time[1]);
}
//动画绑定。外层是均分层，内层是随机方向。随机值取自之前分割时的随机值数组。 for (var i=0;
i<ave_part;
i++){
// var isRandom=(i%2==0)?2:3;
var randomPartShift=randomArr.shift();
for (var j=0;
j<randomPartShift;
j++){
var randomY=getRandom(path_max-path_min+1)+path_min-1;
var title_y_path="+="+randomY.toString()+"px";
var title_y_path_ready="-="+randomY.toString()+"px";
var time=getRandom(time_max-time_min+1)+time_min-1;
if (anime_dir_parm=="top"){
if (animeDirFlag==1){
$("#"+cardDomName+"_cardCopy"+i+"_"+j).css("opacity",opacity_end).css("transition","opacity "+time/1000+"s");
$("#"+cardDomName+"_cardCopy"+i+"_"+j) .animate({
top:(title_y_path_ready)}
,0) .animate({
top:title_y_path}
,time,"swing");
}
else if(animeDirFlag==0){
$("#"+cardDomName+"_cardCopy"+i+"_"+j).css("opacity",opacity_end).css("transition","opacity "+time/1000+"s");
$("#"+cardDomName+"_cardCopy"+i+"_"+j) .animate({
top:title_y_path}
,0) .animate({
top:title_y_path_ready}
,time,"swing");
}
}
//if (anime_dir_parm=="top") else if(anime_dir_parm=="left"){
if (animeDirFlag==1){
$("#"+cardDomName+"_cardCopy"+i+"_"+j).css("opacity",opacity_end).css("transition","opacity "+time/1000+"s");
$("#"+cardDomName+"_cardCopy"+i+"_"+j) .animate({
left:(title_y_path_ready)}
,0) .animate({
left:title_y_path}
,time,"swing");
}
else if(animeDirFlag==0){
$("#"+cardDomName+"_cardCopy"+i+"_"+j).css("opacity",opacity_end).css("transition","opacity "+time/1000+"s");
$("#"+cardDomName+"_cardCopy"+i+"_"+j) .animate({
left:title_y_path}
,0) .animate({
left:title_y_path_ready}
,time,"swing");
}
}
//else if(anime_dir_parm=="left")}
// for (var j=0;
j<isRandom;
j++)}
//for (var i=0;
i<12;
i++)}
//"fragmentFly":function(objectArray,camera,callBack)}
);
}
)(jQuery);
CSS代码(demo.css):
/*webIcon字体声明*/
@font-face{font-family:'iconfont';src:url('../font/iconfont.eot');/* IE9*/
src:url('../font/iconfont.eot?#iefix') format('embedded-opentype'),/* IE6-IE8 */
url('../font/iconfont.woff') format('woff'),/* chrome、firefox */
url('../font/iconfont.ttf') format('truetype'),/* chrome、firefox、opera、Safari,Android,iOS 4.2+*/
url('../font/iconfont.svg#iconfont') format('svg');/* iOS 4.1- */
}
/*定义要使用字体的样式*/
.iconfont{font-family:"iconfont" !important;font-size:16px;font-style:normal;-webkit-font-smoothing:antialiased;-webkit-text-stroke-width:0.2px;-moz-osx-font-smoothing:grayscale;}
*{padding:0px;margin:0px;}
body{background-color:#0769ad;transition:all 2s;}
.all_wrap{margin:0px auto;width:900px;background-color:#ffffff;/*box-shadow:5px 5px 3px #888888;*/
}
.wrap_head{margin:0px auto;width:100%;height:150px;background-color:#0769ad;}
.wrap_middle{margin:0px auto;width:100%;height:100%;/*border-top-left-radius:10px;border-top-right-radius:10px;border-bottom-right-radius:10em;border-bottom-left-radius:10em;*/
}
.wrap_bottom{position:relative;z-index:1;top:-20px;margin:0px auto;width:100%;height:125px;background:#272727;}
.wrap_bottom_fixed{position:absolute;top:125px;width:100%;height:20px;background:#272727;}
#fragment_title{/*必须设为relative*/
position:relative;/*宽高与被分割的背景图片一致*/
width:424px;height:150px;}
.wrap_middle_head{background-color:#06568e;height:56px;width:100%;/*border-top-left-radius:10px;border-top-right-radius:10px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;*/
}
ul.nav_ul{padding:5px 0px 5px 30px;height:0px;}
ul.nav_ul>li{/*margin:0px 30px 0px 30px;*/
margin-right:2px;padding:10px 30px 10px 30px;float:left;font-size:18px;list-style-type:none;font-family:"微软雅黑","klavika-web","Helvetica Neue",Helvetica,Arial,Geneva,sans-serif !important;/*margin:0px 20px*/
;line-height:150%;color:#ffffff;}
ul.nav_ul>li:nth-child(4){margin-left:280px;padding:10px 30px 10px 30px;float:left;font-size:17px;list-style-type:none;font-family:"微软雅黑","klavika-web","Helvetica Neue",Helvetica,Arial,Geneva,sans-serif !important;/*margin:0px 20px*/
;line-height:150%;/*color:#7acef4;*/
color:#111111;}
.ahkari{color:#E5777E;}
.dot{color:#ffffff;}
ul.nav_ul>li:nth-child(4) a{color:#7acef4;}
ul.nav_ul>li:hover{background:none repeat scroll 0 0 rgba(0,0,0,0);border:0px solid rgba(0,0,0,0.25);border-radius:4px;box-shadow:0px 0px 10px rgba(0,0,0,0.4) inset,0 1px 0 rgba(255,255,255,0.1);color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,0.796),0 0 10px rgba(255,255,255,0.298);}
a,a:hover,a:link,a:active,a:visited{text-decoration:none;color:#ffffff}
.wrap_middle_body{background-color:#ffffff;height:100%;width:100%;}
.warp_middle_body_wrap{background-color:#eeeeee;position:relative;z-index:2;margin:2% 3% 0% 3%;height:2350px;width:94%;border-radius:0px 0px 10px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:20px;border-bottom-left-radius:20px;box-shadow:1px 5px 5px #111111;}
.parm_info_title{background-color:#D0D0D0;height:40px;width:100%;}
p{font-family:"微软雅黑","klavika-web","Helvetica Neue",Helvetica,Arial,Geneva,sans-serif !important;margin:0px 20px;line-height:150%;color:#555555;}
p.heigher{font-family:"微软雅黑","klavika-web","Helvetica Neue",Helvetica,Arial,Geneva,sans-serif !important;margin:0px 20px;line-height:250%;/*color:#333333;*/
}
.parm_info_title p{font-family:"微软雅黑","klavika-web","Helvetica Neue",Helvetica,Arial,Geneva,sans-serif !important;font-weight:700;text-align:center center;line-height:250%;margin:0px 20px;color:#222222;}
.codeArea{margin:0px 20px;}
.Info_img_wrap_info{float:left;height:450px;width:40%;text-align:left;}
.Info_img_wrap_img{float:right;height:450px;width:60%;text-align:center;}
.Info_img_wrap_img img{margin:35px;position:relative;/* margin:25px 40px;*/
}
.wordSet{font-weight:900;color:#444444;}
.wordSetShin{font-style:italic;}
hr{color:#eeeeee;}
.img_demo{margin:35px;/*position:relative;*/
height:200px;position:relative;/*background-color:#999;*/
}
.demo1{position:absolute;top:10px;left:5px;width:424px;height:150px;background:url("../img/demo1.png") no-repeat}
.demo1_1{position:absolute;top:10px;left:5px;width:424px;height:150px;background:url("../img/demo1info.png") no-repeat;opacity:0;transition:opacity 0.6s;-moz-transition:opacity 0.6s;-webkit-transition:opacity 0.6s;-o-transition:opacity 0.6s;}
.demo1_1:hover{opacity:1;}
.demo2{position:absolute;top:10px;left:5px;width:424px;height:150px;background:url("../img/demo2.png") no-repeat}
.demo2_1{position:absolute;top:10px;left:5px;width:424px;height:150px;background:url("../img/demo2info.png") no-repeat;opacity:0;transition:opacity 0.6s;-moz-transition:opacity 0.6s;-webkit-transition:opacity 0.6s;-o-transition:opacity 0.6s;}
.demo2_1:hover{opacity:1;}
.clearFloat{clear:both;}
/*动画配置部分的css样式*/
.demo_anime_config{margin:20px auto;width:650px;background-color:#f4f4f4;}
.line1{height:50px;}
.line1>td:first-child{width:150px;}
.line1>td:nth-child(2){text-align:center;width:350px;}
td div.td_2{border-radius:15px;margin:0px auto;height:50px;width:50px;background:url("../img/arrIconUp.png") no-repeat 0px 0px;transition:all 0.3s;-moz-transition:all 0.3s;/* Firefox 4 */
-webkit-transition:all 0.3s;/* Safari 和 Chrome */
-o-transition:all 0.3s;/* Opera */
}
td div.td_2:hover{background:url("../img/arrIconUp.png") no-repeat 0px -50px;}
.line1>td:nth-child(3){width:150px;}
.line2{height:180px;}
.line2>td:first-child{}
td div.td_4{border-radius:15px;margin:65px 0px 65px 100px;height:50px;width:50px;background:url("../img/arrIconLeft.png") no-repeat 0px 0px;transition:all 0.3s;-moz-transition:all 0.3s;/* Firefox 4 */
-webkit-transition:all 0.3s;/* Safari 和 Chrome */
-o-transition:all 0.3s;/* Opera */
}
td div.td_4:hover{background:url("../img/arrIconLeft.png") no-repeat -50px 0px;}
td div.td_6{border-radius:15px;margin:65px 100px 65px 0px;height:50px;width:50px;background:url("../img/arrIconRight.png") no-repeat -50px 0px;transition:all 0.3s;-moz-transition:all 0.3s;/* Firefox 4 */
-webkit-transition:all 0.3s;/* Safari 和 Chrome */
-o-transition:all 0.3s;/* Opera */
}
td div.td_6:hover{background:url("../img/arrIconRight.png") no-repeat 0px 0px;}
.line3{height:50px;}
td div.td_8{border-radius:15px;margin:0px auto;height:50px;width:50px;background:url("../img/arrIconDown.png") no-repeat 0px -50px;transition:all 0.3s;-moz-transition:all 0.3s;/* Firefox 4 */
-webkit-transition:all 0.3s;/* Safari 和 Chrome */
-o-transition:all 0.3s;/* Opera */
}
td div.td_8:hover{background:url("../img/arrIconDown.png") no-repeat 0px 0px;}
.line4{height:40px;}
.line5{height:40px;}
.line6{height:40px;}
.line7{height:40px;}
.line8{height:40px;}
.line9{height:40px;}
.line4>td:first-child,.line5>td:first-child,.line6>td:first-child,.line7>td:first-child,.line8>td:first-child,.line9>td:first-child{text-align:right;}
.line4>td:nth-child(2),.line5>td:nth-child(2),.line6>td:nth-child(2),.line7>td:nth-child(2),.line8>td:nth-child(2),.line9>td:nth-child(2){text-align:center;}
#demoAnime_img{/*必须设为relative*/
position:relative;/*宽高与被分割的背景图片一致*/
width:350px;height:180px;}
.wrap_bottom_inside{width:500px;margin:0px auto;padding:60px 0px 0px 0px;text-align:center;background-color:;}
.wrap_bottom_inside i{position:relative;z-index:3;margin:0px 20px 0px 20px;color:#ffffff;font-size:30px;}
.wrap_bottom_inside>a:nth-child(1) i:hover{color:#676767;opacity:1;}
.wrap_bottom_inside>a:nth-child(2) i:hover{color:#E6162D;}
.wrap_bottom_inside>a:nth-child(3) i:hover{color:#9038AA;}
.wrap_bottom_inside>a:nth-child(1) i:hover span.qqInfo{opacity:1;color:#dddddd;left:-100px;}
.qqInfo{/*display:none;*/
position:absolute;font-family:"微软雅黑","klavika-web","Helvetica Neue",Helvetica,Arial,Geneva,sans-serif !important;font-size:15px;color:#272727;top:5px;left:0px;z-index:-1;transition:all 0.6s;}
CSS代码(style.css):
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
body{line-height:1;}
ol,ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
table{border-collapse:collapse;border-spacing:0;}
.about{margin:70px auto 40px;padding:8px;width:260px;font:10px/18px 'Lucida Grande',Arial,sans-serif;color:#666;text-align:center;text-shadow:0 1px rgba(255,255,255,0.25);background:#eee;background:rgba(250,250,250,0.8);border-radius:4px;background-image:-webkit-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.1));background-image:-moz-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.1));background-image:-o-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.1));background-image:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,0.1));-webkit-box-shadow:inset 0 1px rgba(255,255,255,0.3),inset 0 0 0 1px rgba(255,255,255,0.1),0 0 6px rgba(0,0,0,0.2);box-shadow:inset 0 1px rgba(255,255,255,0.3),inset 0 0 0 1px rgba(255,255,255,0.1),0 0 6px rgba(0,0,0,0.2);}
.about a{color:#333;text-decoration:none;border-radius:2px;-webkit-transition:background 0.1s;-moz-transition:background 0.1s;-o-transition:background 0.1s;transition:background 0.1s;}
.about a:hover{text-decoration:none;background:#fafafa;background:rgba(255,255,255,0.7);}
.about-links{height:30px;}
.about-links > a{float:left;width:50%;line-height:30px;font-size:12px;}
.about-author{margin-top:5px;}
.about-author > a{padding:1px 3px;margin:0 -1px;}
/* * Copyright (c) 2012-2013 Thibaut Courouble * http://www.cssflow.com * * Licensed under the MIT License:* http://www.opensource.org/licenses/mit-license.php */
body{font:13px/20px 'Lucida Grande',Tahoma,Verdana,sans-serif;color:#404040;background:#2a2a2a url("../img/bg.png") 0 0 repeat;}
.container{margin:80px auto;width:640px;text-align:center;}
.container .progress{margin:0 auto;width:400px;}
.progress{padding:4px;background:rgba(0,0,0,0.25);border-radius:6px;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,0.25),0 1px rgba(255,255,255,0.08);box-shadow:inset 0 1px 2px rgba(0,0,0,0.25),0 1px rgba(255,255,255,0.08);}
.progress-bar{position:relative;height:16px;border-radius:4px;-webkit-transition:0.4s linear;-moz-transition:0.4s linear;-o-transition:0.4s linear;transition:0.4s linear;-webkit-transition-property:width,background-color;-moz-transition-property:width,background-color;-o-transition-property:width,background-color;transition-property:width,background-color;-webkit-box-shadow:0 0 1px 1px rgba(0,0,0,0.25),inset 0 1px rgba(255,255,255,0.1);box-shadow:0 0 1px 1px rgba(0,0,0,0.25),inset 0 1px rgba(255,255,255,0.1);}
.progress-bar:before,.progress-bar:after{content:'';position:absolute;top:0;left:0;right:0;}
.progress-bar:before{bottom:0;background:url("../img/stripes.png") 0 0 repeat;border-radius:4px 4px 0 0;}
.progress-bar:after{z-index:2;bottom:45%;border-radius:4px;background-image:-webkit-linear-gradient(top,rgba(255,255,255,0.3),rgba(255,255,255,0.05));background-image:-moz-linear-gradient(top,rgba(255,255,255,0.3),rgba(255,255,255,0.05));background-image:-o-linear-gradient(top,rgba(255,255,255,0.3),rgba(255,255,255,0.05));background-image:linear-gradient(to bottom,rgba(255,255,255,0.3),rgba(255,255,255,0.05));}
/* * Note:using adjacent or general sibling selectors combined with * pseudo classes doesn't work in Safari 5.0 and Chrome 12. * See this article for more info and a potential fix:* http://css-tricks.com/webkit-sibling-bug/ */
#five:checked ~ .progress > .progress-bar{width:5%;background-color:#f63a0f;}
#twentyfive:checked ~ .progress > .progress-bar{width:25%;background-color:#f27011;}
#fifty:checked ~ .progress > .progress-bar{width:50%;background-color:#f2b01e;}
#seventyfive:checked ~ .progress > .progress-bar{width:75%;background-color:#f2d31b;}
#onehundred:checked ~ .progress > .progress-bar{width:100%;background-color:#86e01e;}
.radio{display:none;}
.label{display:inline-block;margin:0 5px 20px;padding:3px 8px;color:#aaa;text-shadow:0 1px black;border-radius:3px;cursor:pointer;}
.radio:checked + .label{color:white;background:rgba(0,0,0,0.25);}
分享到QQ
分享到微博
微信扫一扫
