<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="VihChina资源网 www.vihchina.net"/>
<meta name="description" content="VihChina资源网 www.vihchina.net"/>
<title>VihChina资源网 www.vihchina.net</title>
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<style type="text/css">
*{margin:0;padding:0;list-style:none}
body{background:#B2BDC4; font-size:12px}
.mbox{margin:100px auto 0 auto;width:958px;height:574px;background:#AAB9C1;padding:3px; position:relative}
.mbox_inner{width:956px;height:572px;background:#D0D9DD;padding:1px; position:relative}
.mbg{ width:956px; height:512px; position:absolute; display:none}
.box{ width:956px; height:512px;}
.s_box{position:absolute;z-index:9999px; width:38px;height:38px;border:1px #000 solid;-moz-opacity:0.6;opacity:0.6;filter:alpha(opacity=60);}
.s_box span{display:block;width:36px;height:36px;margin:1px;background:#000;}
.b_box{position:absolute;padding:1px;width:196px;height: auto; overflow:hidden;border:1px #000 solid;-moz-opacity:0.6;opacity:0.6;filter:alpha(opacity=60); display:none}
.b_box div{width:192px;height:72px;background:#000; padding:2px}
.b_box div a{font-size:13px; color:#FFFFFF; line-height:20px; text-decoration:none}
.tbox{width:956px;height:60px; position:absolute; bottom:0; left:1px; font-size:12px}
.tbox div{border-right:1px #d8dfe3 solid;float:left;padding:0 15px;margin:9px 0;width:20%;color:#737373}
.tbox div h3{font-size:medium;font-weight:200;margin:0 0 6px;}
.tbox .ps{_height:100%;border:0;float:none;width:auto}
.tbox .ps a{ display:block; float:left; width:50%; height:25px;font-size:13px; line-height:25px;overflow:hidden;color:#000; text-decoration:none; }
.tbox div a{ display:block; float:left; width:100%; height:25px;font-size:13px; line-height:25px;overflow:hidden;color:#000; text-decoration:none; font-size:13px}
.op{width:auto; height:30px; position:absolute; right:10px; bottom:70px; z-index:9999}
.op a{display: block;cursor:default;position:relative;}
.op a span{padding:5px;background:#fff;position:absolute;white-space:nowrap;color:#150417; font-size:13px;border:1px solid #555; visibility:hidden;bottom:1px;right:1px;}
.op a:hover span{visibility:visible}
.bt_txt{float:left; width:18px; height:18px; text-align:center; line-height:18px; color:#fff; border:1px solid #fff; margin:2px; font-size:12px}
.coptxt{float:left; width:19px; height:19px; line-height:25px; text-align:center; color:#fff; margin:2px; font-size:20px; overflow:hidden}
.fcopy{ width:860px; height:80px; clear:both; margin:20px auto;}
.fcopy p{ text-align:center; line-height:30px; color:#666; font-size:12px;}
.fcopy p a{ color:#c92215; text-decoration:none;}
.fcopy p a:hover{ color:#f00;}
</style>
</head>
<body>
<div class="itop">
</div>
<div class="mbox" id="mbox">
<div class="mbox_inner" id="mbox_inner">
<div class="tbox" id="tbox">
<div>
<h3></h3><a href="http://www.vihchina.net" target="_blank"></a>
</div>
<div>
<h3></h3><a href="http://www.vihchina.net" target="_blank"></a>
</div>
<div class="ps">
<h3></h3><a href="http://www.vihchina.net" target="_blank"></a>
</div>
</div>
</div>
<div class="op" id="op">
<div><a id="bt_l"><div class="bt_txt">◄</div><span><p>上一幅图片</p></span></a></div>
<div><a id="bt_r"><div class="bt_txt">►</div><span><p>下一幅图片</p></span></a></div>
<div><a id="bt_c"><div class="coptxt">© </div><span><p></p></span></a> </div>
</div>
</div>
<div class="fcopy">
<p>CopyRight © 2008-2010 VihChina资源网 邮箱:306521617@qq.com QQ:306521617 网址:<a href="http://www.vihchina.net" target="_blank" title="VihChina资源网">VihChina资源网</a></p>
</div>
</body>
</html>
<script language="javascript">
//设置图片数
var len = 7;
//定义数据字典
var data = {
"0":{
"img":"images/1.jpg",
"copyt":"图瓦卢的首都富纳富提岛 -- George Steinmetz/Corbis",
"div":{
"0":{"h3":"今日图片故事","a_url":"http://www.vihchina.net","a_txt":"图瓦卢的首都富纳富提岛"},
"1":{"h3":"喜欢这张图片吗?","a_url":"http://www.vihchina.net","a_txt":"喜欢,寻找更多"},
"2":{"h3":"cosset vs. pamper","a_url":"http://www.vihchina.net","a_txt":"同样是“消失”的意思吗?"}
},
"tbox":{
"0":{"a_txt":"图瓦卢的首都富纳富提岛1","a_url":"http://www.vihchina.net","s_box_l":720,"s_box_t":90,"b_box_l":760,"b_box_t":90},
"1":{"a_txt":"图瓦卢的首都富纳富提岛2","a_url":"http://www.vihchina.net","s_box_l":200,"s_box_t":290,"b_box_l":240,"b_box_t":290},
"2":{"a_txt":"图瓦卢的首都富纳富提岛3","a_url":"http://www.vihchina.net","s_box_l":460,"s_box_t":160,"b_box_l":500,"b_box_t":160},
"3":{"a_txt":"图瓦卢的首都富纳富提岛4","a_url":"http://www.vihchina.net","s_box_l":500,"s_box_t":320,"b_box_l":540,"b_box_t":320}
}
},
"1":{
"img":"images/2.jpg",
"copyt":"加拿大班夫公园的兔鼠 -- George Steinmetz/Corbis",
"div":{
"0":{"h3":"今日图片故事","a_url":"http://www.vihchina.net","a_txt":"家有小宠:可爱的宠物鼠"},
"1":{"h3":"喜欢这张图片吗?","a_url":"http://www.vihchina.net","a_txt":"喜欢,寻找更多"},
"2":{"h3":"cosset vs. pamper","a_url":"http://www.vihchina.net","a_txt":"同样是“机智”的意思?"}
},
"tbox":{
"0":{"a_txt":"图瓦卢的首都富纳富提岛1","a_url":"http://www.vihchina.net","s_box_l":720,"s_box_t":90,"b_box_l":760,"b_box_t":90},
"1":{"a_txt":"图瓦卢的首都富纳富提岛2","a_url":"http://www.vihchina.net","s_box_l":220,"s_box_t":290,"b_box_l":260,"b_box_t":290},
"2":{"a_txt":"图瓦卢的首都富纳富提岛3","a_url":"http://www.vihchina.net","s_box_l":400,"s_box_t":160,"b_box_l":440,"b_box_t":160},
"3":{"a_txt":"图瓦卢的首都富纳富提岛4","a_url":"http://www.vihchina.net","s_box_l":420,"s_box_t":320,"b_box_l":460,"b_box_t":320}
}
},
"2":{
"img":"images/3.jpg",
"copyt":"阿拉斯加的小猪赛跑 -- George Steinmetz/Corbis",
"div":{
"0":{"h3":"今日图片故事","a_url":"http://www.vihchina.net","a_txt":"家有小宠:迷你宠物猪"},
"1":{"h3":"喜欢这张图片吗?","a_url":"http://www.vihchina.net","a_txt":"喜欢,寻找更多"},
"2":{"h3":"cosset vs. pamper","a_url":"http://www.vihchina.net","a_txt":"同样是“宠爱”的意思?"}
},
"tbox":{
"0":{"a_txt":"图瓦卢的首都富纳富提岛1","a_url":"http://www.vihchina.net","s_box_l":720,"s_box_t":90,"b_box_l":760,"b_box_t":90},
"1":{"a_txt":"图瓦卢的首都富纳富提岛2","a_url":"http://www.vihchina.net","s_box_l":280,"s_box_t":290,"b_box_l":320,"b_box_t":290},
"2":{"a_txt":"图瓦卢的首都富纳富提岛3","a_url":"http://www.vihchina.net","s_box_l":400,"s_box_t":160,"b_box_l":440,"b_box_t":160},
"3":{"a_txt":"图瓦卢的首都富纳富提岛4","a_url":"http://www.vihchina.net","s_box_l":720,"s_box_t":320,"b_box_l":760,"b_box_t":320}
}
},
"3":{
"img":"images/4.jpg",
"copyt":"张着大嘴做鬼脸的小狮子 -- George Steinmetz/Corbis",
"div":{
"0":{"h3":"今日图片故事","a_url":"http://www.vihchina.net","a_txt":"家有小宠:打哈欠的小狮子"},
"1":{"h3":"喜欢这张图片吗?","a_url":"http://www.vihchina.net","a_txt":"喜欢,寻找更多"},
"2":{"h3":"cosset vs. pamper","a_url":"http://www.vihchina.net","a_txt":"同样是“令人望而生畏”的意?"}
},
"tbox":{
"0":{"a_txt":"图瓦卢的首都富纳富提岛1","a_url":"http://www.vihchina.net","s_box_l":660,"s_box_t":90,"b_box_l":700,"b_box_t":90},
"1":{"a_txt":"图瓦卢的首都富纳富提岛2","a_url":"http://www.vihchina.net","s_box_l":220,"s_box_t":290,"b_box_l":260,"b_box_t":290},
"2":{"a_txt":"图瓦卢的首都富纳富提岛3","a_url":"http://www.vihchina.net","s_box_l":400,"s_box_t":160,"b_box_l":440,"b_box_t":160},
"3":{"a_txt":"图瓦卢的首都富纳富提岛4","a_url":"http://www.vihchina.net","s_box_l":560,"s_box_t":320,"b_box_l":600,"b_box_t":320}
}
},
"4":{
"img":"images/5.jpg",
"copyt":"泡温泉的日本猕猴昏昏欲睡 -- George Steinmetz/Corbis",
"div":{
"0":{"h3":"今日图片故事","a_url":"http://www.vihchina.net","a_txt":"家有小宠:滑稽的猴子"},
"1":{"h3":"喜欢这张图片吗?","a_url":"http://www.vihchina.net","a_txt":"喜欢,寻找更多"},
"2":{"h3":"cosset vs. pamper","a_url":"http://www.vihchina.net","a_txt":"同样是“滑稽”的意思?"}
},
"tbox":{
"0":{"a_txt":"图瓦卢的首都富纳富提岛1","a_url":"http://www.vihchina.net","s_box_l":140,"s_box_t":100,"b_box_l":180,"b_box_t":100},
"1":{"a_txt":"图瓦卢的首都富纳富提岛2","a_url":"http://www.vihchina.net","s_box_l":200,"s_box_t":310,"b_box_l":240,"b_box_t":310},
"2":{"a_txt":"图瓦卢的首都富纳富提岛3","a_url":"http://www.vihchina.net","s_box_l":460,"s_box_t":160,"b_box_l":500,"b_box_t":160},
"3":{"a_txt":"图瓦卢的首都富纳富提岛4","a_url":"http://www.vihchina.net","s_box_l":700,"s_box_t":290,"b_box_l":740,"b_box_t":290}
}
},
"5":{
"img":"images/6.jpg",
"copyt":"可爱的宠物狗在沙滩上玩耍 -- George Steinmetz/Corbis",
"div":{
"0":{"h3":"今日图片故事","a_url":"http://www.vihchina.net","a_txt":"家有小宠:可爱的小狗"},
"1":{"h3":"喜欢这张图片吗?","a_url":"http://www.vihchina.net","a_txt":"喜欢,寻找更多"},
"2":{"h3":"cosset vs. pamper","a_url":"http://www.vihchina.net","a_txt":"同样是“温顺”的意思?"}
},
"tbox":{
"0":{"a_txt":"图瓦卢的首都富纳富提岛1","a_url":"http://www.vihchina.net","s_box_l":230,"s_box_t":100,"b_box_l":270,"b_box_t":100},
"1":{"a_txt":"图瓦卢的首都富纳富提岛2","a_url":"http://www.vihchina.net","s_box_l":160,"s_box_t":300,"b_box_l":200,"b_box_t":300},
"2":{"a_txt":"图瓦卢的首都富纳富提岛3","a_url":"http://www.vihchina.net","s_box_l":580,"s_box_t":260,"b_box_l":620,"b_box_t":260},
"3":{"a_txt":"图瓦卢的首都富纳富提岛4","a_url":"http://www.vihchina.net","s_box_l":620,"s_box_t":420,"b_box_l":660,"b_box_t":420}
}
},
"6":{
"img":"images/7.jpg",
"copyt":"本月世博之最:最不堪重负的展馆墨西哥管 -- George Steinmetz/Corbis",
"div":{
"0":{"h3":"今日图片故事","a_url":"http://www.vihchina.net","a_txt":"本月世博之最:最不堪重负的展馆墨西哥管最不堪重负的展馆墨西哥管最不堪重负的展馆墨西哥管"},
"1":{"h3":"喜欢这张图片吗?","a_url":"http://www.vihchina.net","a_txt":"喜欢,寻找更多寻找更多寻找更多"},
"2":{"h3":"cosset vs. pamper","a_url":"http://www.vihchina.net","a_txt":"同样是“场馆”的意思?同样是“场馆”的意思?同样是“场馆”的意思?同样是“场馆”的意思?"}
},
"tbox":{
"0":{"a_txt":"图瓦卢的首都富纳富提岛1","a_url":"http://www.vihchina.net","s_box_l":260,"s_box_t":100,"b_box_l":300,"b_box_t":100},
"1":{"a_txt":"图瓦卢的首都富纳富提岛2","a_url":"http://www.vihchina.net","s_box_l":180,"s_box_t":280,"b_box_l":220,"b_box_t":280},
"2":{"a_txt":"图瓦卢的首都富纳富提岛3","a_url":"http://www.vihchina.net","s_box_l":540,"s_box_t":160,"b_box_l":580,"b_box_t":160},
"3":{"a_txt":"图瓦卢的首都富纳富提岛4","a_url":"http://www.vihchina.net","s_box_l":580,"s_box_t":300,"b_box_l":620,"b_box_t":300}
}
}
};
var msr=100; //范围半径
var sqr=20; //小矩形半径
var acboxs=[]; //保存活动点信息
var msflag=false; //标志是否执行#box的mousemove绑定函数
//显示数据
function showimg(p){
var speed=1300;
$(".mbg").fadeOut(speed);
$("#mbg_"+p).fadeIn(speed);
$("#bt_c span p").html(data[p].copyt);
$("#mbg_"+p).css('display','block');
$(".tbox div").each(function(k){
$(this).find("h3").html(data[p].div[k].h3);
$(this).find("a").html(data[p].div[k].a_txt);
$(this).find("a").attr('href',data[p].div[k].a_url);
});
init(p);
MouseMove(p);
}
//数据初始化函数
function inital(){
for(i=0;i<=len-1;i++){
var obj = "<div class='mbg' id='mbg_"+i+"' style='background:url("+data[i].img+")'></div>";
$(obj).prependTo("#mbox_inner");
if (i==len-1){
$("#bt_c span p").html(data[i].copyt);
$("#mbg_"+i).css('display','block');
$(".tbox div").each(function(k){
$(this).find("h3").html(data[i].div[k].h3);
$(this).find("a").html(data[i].div[k].a_txt);
$(this).find("a").attr('href',data[i].div[k].a_url);
});
init(i);
MouseMove(i);
}
}
}
//初始化按钮事件
var init=function(k){
$(".mbg").empty();
function delay(count){
window.setTimeout(function(){
count--;
if(count>0){
delay(count);
}else{
var i_obj;
$.each(data[k].tbox,function(n,val){
i_obj = "<span class='s_box' id='s_box_"+n+"' style='left:"+val.s_box_l+"px;top:"+val.s_box_t+"px'><span></span></span><div class='b_box' id='b_box_"+n+"' style='left:"+val.b_box_l+"px;top:"+val.b_box_t+"px'><div><a href='"+val.a_url+"' target='_blank'>"+val.a_txt+"</a></div></div>";
$(i_obj).appendTo("#mbg_"+k);
});
var obj;
$("#mbg_"+k+" .s_box").each(function(){
obj = new Object();
obj.sq = $(this);
obj.x = $(this).position().left+sqr;
obj.y = $(this).position().top+sqr;
acboxs.push(obj);
bindS_box_Hover(obj.sq);
bindB_box_Hover(obj.sq);
});
}
},1000);
}
delay(2);
setTimeout('$(".mbg .s_box").animate({opacity: "0"},50)',2500);
}
//绑定鼠标移动事件
var MouseMove=function(h){
$("#mbg_"+h).bind("mousemove",function(e){
var e = e||event;
var x = e.clientX-($(this).offset().left);
var y = e.clientY-($(this).offset().top);
if (!msflag){
for (var i=0;i<acboxs.length;i++){
if(ishow(x,y,acboxs[i])){
acboxs[i].sq.stop().fadeTo(30,0.6);
}else{
acboxs[i].sq.stop().animate({opacity: '0'},50);
}
}
}
})/*.bind("mouseout",function(){
$(".mbg .s_box").animate({opacity: '0.2'},50)
})*/;
}
var ishow = function(x,y,vobj){
var r1 = Math.abs(x-vobj.x);
var r2 = Math.abs(y-vobj.y);
if (r1<msr&&r2<msr){
return true;
}else{
return false;
}
}
//小区域的hover事件
function bindS_box_Hover(obj){
obj.hover(function(){
obj.next().stop().fadeTo(50,0.6);
},function(){
obj.next().stop().fadeOut(50);
});
}
//内容区域的hover事件
function bindB_box_Hover(obj){
obj.next().hover(function(){
msflag=true;
obj.next().stop();
},function(){
msflag = false;
obj.next().stop().fadeOut(50);
obj.stop().fadeOut(50);
});
}
//切换图片
$(function(){
//调用数据初始化
inital();
var index = len-1;
//设置第一个显示
//点击上一幅图片
$("#bt_l").mouseover(function(){
$(this).css('cursor','pointer');
$("#bt_l span").css('right','50px');
}).click(function(){
index--;
if (index>=0){
showimg(index);
}else{
index=0;
}
});
//点击下一幅图片
$("#bt_r").mouseover(function(){
$(this).css('cursor','pointer');
$("#bt_r span").css('right','26px');
}).click(function(){
index++;
if (index<=len-1){
showimg(index);
}else{
index = len-1;
}
});
})
</script>
来源 VihChina资源网 网址:http://www.vihchina.net