|
|
马上注册，结交更多好友，享用更多功能^_^
您需要 登录 才可以下载或查看，没有账号？立即注册
x
其实，东西并不难做，只是懒啊懒...有现成的，干嘛要做呢。。于是呼，操起Chrome杀向鱼C。。
1.打开Chrome。。打开鱼C首页 。。68个请求。
翻到首页代码。发现鱼C的首页竟然还有老外的注释（偷笑，原来鱼哥也是扒的）。
我习惯从上往下看，好吧。除了注释 ，直接第一行代码<link rel="stylesheet" type="text/css" href="lib/style.css">
之后继续扒。除了JQuery和他的插件，继续向下看。。
看到Source.js,顿时又尿了，哇靠，面向对象啊。。俺刚学到面向对象。。
不过大牛写的东西就是容易，简单易懂啊。。var hoverEffect = true; // set true for hover effect, set false for no hover effect
var searchEngine = 'google'; // default search engine - set google for google search, bing for bing search, yahoo for yahoo search
var numberOfScreens = 3; // set number of screens (1 or 2 or 3)
var blockName = new Array(); // set names of blocks
blockName[1] = '鱼C工作室';
blockName[2] = '常用导航';
blockName[3] = '娱乐导航';
var bookmark = new Array();
bookmark[0] = new Array();
bookmark[1] = new Array();
bookmark[2] = new Array();
// set your bookmarks here: (If you do not fill 'thumb' for thumbnail will be used title)
// FIRST BLOCK
bookmark[0][0] = {
'title':'天气预报',
'url':'http://www.thinkpage.cn',
'thumb':'../lib/1.png'
};
看到script.js中是网页加载完毕之后运行的...忽略，先看网页。。看完之后再分析这个JS。
看了看网页，实在是简单的没话写了。。好吧。唯一可说的，就是每个图片都是png透明的。每一个DIV都有一个颜色。。
最后藏了一个百度的统计。
话说，背景图片真是大，嘿嘿。
最后，开始分析script.js$(document).ready(function(){
var num = numberOfScreens;//拿到当前所有的页数
for(var i=1;i<=num;i++){
$('#name'+i).html(blockName[i]);//把所有的标题给初始化
}
//下面的代码是给head标签中加一个<style>，本机测试，没什么作用，删了也没负画影响。。
if(hoverEffect){
for(i=1;i<=num;i++){
$('<style>#wrapper'+i+' div:hover{border: 1px #fff solid;box-shadow: 0px 0px 5px #fff;margin-left:4px;margin-top:4px;}</style>').appendTo('head');
};
};
//这就不用说了吧。搜索引擎。
if(searchEngine=='google'){
search='http://www.google.com/search';
}
else if(searchEngine=='bing'){
search='http://www.bing.com/search';
}
else if(searchEngine=='yahoo'){
search='http://search.yahoo.com/bin/search';
}
else{
search='http://www.google.com/search';
searchEngine='google';
};
给from表彰加个action属性...跳到search。。给输入框加一个引擎标签，说实话，CSS我不行。。
$('form').attr('action',search);
$('input:text').css('background','#fff url(lib/'+searchEngine+'-back.png) center right no-repeat');
//算屏幕的宽和高。。用选择器没啥必要吧？
var windowWidth = $(window).width();
var windowHeight = $(window).height();
var left1 = Math.floor((windowWidth - 975)/2);
var left2 = left1 - 1045;
var left3 = left1 - 2090;
var wrapperTop = Math.floor((windowHeight - 480)/2)-80;
//输入框获取焦点
$('#place').css({'left':left1,'top':15});
var wrapperPos = 1;
$('#wrapper1 input:text').focus();
var animDone = true;//暂时不懂啥意思
//界面1到界面2的时候，第一个框推动焦点，第二个框获取焦点
function anim1to2(){
$('#wrapper1 input:text').focusout();
animDone = false;//这是干啥的？
$('#place').animate({
left: left2
},1000,'circEaseOut',function() {
$('#wrapper2 input:text').focus();
animDone = true;//这是干啥的？好像没鸟用啊
wrapperPos = 2;//位置2
});
$('#button1to2').hide();
$('#button2to1').show();
if(num>2){
$('#button2to3').show();
$('#button3to2').hide();
};
};
function anim2to1(){
$('#wrapper2 input:text').focusout();
animDone = false;
$('#place').animate({
left: left1
},1000,'circEaseOut',function() {
$('#wrapper1 input:text').focus();
animDone = true;
wrapperPos = 1;
});
$('#button1to2').show();
$('#button2to1').hide();
if(num>2){
$('#button2to3').hide();
$('#button3to2').hide();
};
};
function anim2to3(){
$('#wrapper2 input:text').focusout();
animDone = false;
$('#place').animate({
left: left3
},1000,'circEaseOut',function() {
$('#wrapper3 input:text').focus();
animDone = true;
wrapperPos = 3;
});
$('#button1to2').hide();
$('#button3to2').show();
$('#button2to1').hide();
$('#button2to3').hide();
};
function anim3to2(){
$('#wrapper3 input:text').focusout();
animDone = false;
$('#place').animate({
left: left2
},1000,'circEaseOut',function() {
$('#wrapper2 input:text').focus();
animDone = true;
wrapperPos = 2;
});
$('#button1to2').hide();
$('#button3to2').hide();
$('#button2to1').show();
$('#button2to3').show();
};
//不多说了，都一样。。
if(num>1){
$('#button1to2').click(function(){
anim1to2();
});
$('#button2to1').click(function(){
anim2to1();
});
if(num>2){
$('#button2to3').click(function(){
anim2to3();
});
$('#button3to2').click(function(){
anim3to2();
});
};
};
//绑定事件键盘抬起的时候..如果等于左或者右
$(document).bind('keydown',function(event){
if(event.keyCode == '39' || event.keyCode == '37'){
event.preventDefault();
}
if(event.which=='39' && animDone){//终于明白后面的标志量是干啥的了。
if(wrapperPos==1 && num>1){
anim1to2();
};
if(wrapperPos==2 && num>2){
anim2to3();
};
};
if(event.which=='37' && animDone){
if(wrapperPos==3){
anim3to2();
};
if(wrapperPos==2){
anim2to1();
};
};
});
//绑定鼠标滚轮事件
$(document).mousewheel(function(event, delta) {
if (delta > 0 && animDone){
if(wrapperPos==3){
anim3to2();
};
if(wrapperPos==2){
anim2to1();
};
}
else if (delta < 0 && animDone){
if(wrapperPos==1 && num>1){
anim1to2();
};
if(wrapperPos==2 && num>2){
anim2to3();
};
};
event.preventDefault();
});
//给每个DIV赋值...
var j=0;
for (j=0; j <= (num-1); j++) {
for(i=0;i<=11;i++){
var title = bookmark[j][i]['title'];
var url = bookmark[j][i]['url'];
var thumb = bookmark[j][i]['thumb'];
if(thumb==''){
$('#thumb'+(j+1)+'-'+(i+1)).html('<img id="net" src="lib/net-back.png" /><a href="'+url+'" target="_blank"><div class="title">'+title+'</div></a>');
}
else{
$('#thumb'+(j+1)+'-'+(i+1)).html('<a href="'+url+'" target="_blank"><img src="thumbs/'+thumb+'" /></a>');
}
};
};
//看到这时，顿悟上面CSS的作用。偏移一下，把按钮重叠到input上，下面是绑定按钮单击事件
$('#search-engine1').click(function() {
$('#engines1').fadeToggle('fast','circEaseOut');
$('#wrapper1 input:text').css('background','#fff');
});
$('#google1').click(function() {
$('#wrapper1 form').attr('action','http://www.google.com/search');
$('#engines1').fadeToggle('fast','circEaseOut');
$('#wrapper1 input:text').css('background','#fff url(lib/google-back.png) center right no-repeat');
$('#wrapper1 input:hidden').detach();
$('#wrapper1 input:first').attr('name','q');
$('#wrapper1 input:text').focus();
});
$('#bing1').click(function() {
$('#wrapper1 form').attr('action','http://www.bing.com/search');
$('#engines1').fadeToggle('fast','circEaseOut');
$('#wrapper1 input:text').css('background','#fff url(lib/bing-back.png) center right no-repeat');
$('#wrapper1 input:hidden').detach();
$('#wrapper1 input:first').attr('name','q');
$('#wrapper1 input:text').focus();
});
$('#yahoo1').click(function() {
$('#wrapper1 form').attr('action','http://search.yahoo.com/bin/search');
$('#engines1').fadeToggle('fast','circEaseOut');
$('#wrapper1 input:text').css('background','#fff url(lib/yahoo-back.png) center right no-repeat');
$('#wrapper1 input:hidden').detach();
$('#wrapper1 input:first').attr('name','q');
$('#wrapper1 input:text').focus();
});
$('#wikipedia1').click(function() {
$('#wrapper1 form').attr('action','http://www.wikipedia.org/search-redirect.php');
$('#wrapper1 input:first').attr('name','search');
$('<input type="hidden" name="language" value="en" />').appendTo('#wrapper1 form');
$('#engines1').fadeToggle('fast','circEaseOut');
$('#wrapper1 input:text').css('background','#fff url(lib/wikipedia-back.png) center right no-repeat');
$('#wrapper1 input:text').focus();
});
if(num>1){
$('#search-engine2').click(function() {
$('#engines2').fadeToggle('fast','circEaseOut');
$('#wrapper2 input:text').css('background','#fff');
});
$('#google2').click(function() {
$('#wrapper2 form').attr('action','http://www.google.com/search');
$('#engines2').fadeToggle('fast','circEaseOut');
$('#wrapper2 input:text').css('background','#fff url(lib/google-back.png) center right no-repeat');
$('#wrapper2 input:hidden').detach();
$('#wrapper2 input:first').attr('name','q');
$('#wrapper2 input:text').focus();
});
$('#bing2').click(function() {
$('#wrapper2 form').attr('action','http://www.bing.com/search');
$('#engines2').fadeToggle('fast','circEaseOut');
$('#wrapper2 input:text').css('background','#fff url(lib/bing-back.png) center right no-repeat');
$('#wrapper2 input:hidden').detach();
$('#wrapper2 input:first').attr('name','q');
$('#wrapper2 input:text').focus();
});
$('#yahoo2').click(function() {
$('#wrapper2 form').attr('action','http://search.yahoo.com/bin/search');
$('#engines2').fadeToggle('fast','circEaseOut');
$('#wrapper2 input:text').css('background','#fff url(lib/yahoo-back.png) center right no-repeat');
$('#wrapper2 input:hidden').detach();
$('#wrapper2 input:first').attr('name','q');
$('#wrapper2 input:text').focus();
});
$('#wikipedia2').click(function() {
$('#wrapper2 form').attr('action','http://www.wikipedia.org/search-redirect.php');
$('#wrapper2 input:first').attr('name','search');
$('<input type="hidden" name="language" value="en" />').appendTo('#wrapper2 form');
$('#engines2').fadeToggle('fast','circEaseOut');
$('#wrapper2 input:text').css('background','#fff url(lib/wikipedia-back.png) center right no-repeat');
$('#wrapper2 input:text').focus();
});
};
if(num>2){
$('#search-engine3').click(function() {
$('#engines3').fadeToggle('fast','circEaseOut');
$('#wrapper3 input:text').css('background','#fff');
});
$('#google3').click(function() {
$('#wrapper3 form').attr('action','http://www.google.com/search');
$('#engines3').fadeToggle('fast','circEaseOut');
$('#wrapper3 input:text').css('background','#fff url(lib/google-back.png) center right no-repeat');
$('#wrapper3 input:hidden').detach();
$('#wrapper3 input:first').attr('name','q');
$('#wrapper3 input:text').focus();
});
$('#bing3').click(function() {
$('#wrapper3 form').attr('action','http://www.bing.com/search');
$('#engines3').fadeToggle('fast','circEaseOut');
$('#wrapper3 input:text').css('background','#fff url(lib/bing-back.png) center right no-repeat');
$('#wrapper3 input:hidden').detach();
$('#wrapper3 input:first').attr('name','q');
$('#wrapper3 input:text').focus();
});
$('#yahoo3').click(function() {
$('#wrapper3 form').attr('action','http://search.yahoo.com/bin/search');
$('#engines3').fadeToggle('fast','circEaseOut');
$('#wrapper3 input:text').css('background','#fff url(lib/yahoo-back.png) center right no-repeat');
$('#wrapper3 input:hidden').detach();
$('#wrapper3 input:first').attr('name','q');
$('#wrapper3 input:text').focus();
});
//哇，还有唯基...
$('#wikipedia3').click(function() {
$('#wrapper3 form').attr('action','http://www.wikipedia.org/search-redirect.php');
$('input:first').attr('name','search');
$('<input type="hidden" name="language" value="en" />').appendTo('#wrapper3 form');
$('#engines3').fadeToggle('fast','circEaseOut');
$('#wrapper3 input:text').css('background','#fff url(lib/wikipedia-back.png) center right no-repeat');
$('#wrapper3 input:text').focus();
});
};
//控制隐藏
if(num<3){
$('#name3').detach();
$('#wrapper3').detach();
$('#button2to3').detach();
$('#button3to2').detach();
};
if(num<2){
$('#name2').detach();
$('#wrapper2').detach();
$('#button1to2').detach();
$('#button2to1').detach();
};
});
晚上蛋疼，没想到扒个代码也有这收获，嘿嘿。。学习到自己不足了。。{:1_1:}
文笔烂，凑合着看吧。。前几天有个求鱼C导航的，其实so easy。。
打看，看有多少个请求，之后copy all link到迅雷里。
|
评分
-
查看全部评分
|
( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)
狗仔卡
发表于 2012-11-25 05:35:16
置顶卡
千斤顶
显身卡
发表于 2012-11-25 09:00:41
楼主
发表于 2015-4-18 17:43:03