扒鱼C首页全过程，鱼哥莫怪，嘿嘿

菜得要自杀 · 发表于 2012-11-25 05:35:16

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

其实，东西并不难做，只是懒啊懒...有现成的，干嘛要做呢。。于是呼，操起Chrome杀向鱼C。。

1.打开Chrome。。打开鱼C首页。。68个请求。
翻到首页代码。发现鱼C的首页竟然还有老外的注释（偷笑，原来鱼哥也是扒的）。

我习惯从上往下看，好吧。除了注释，直接第一行代码

<link rel="stylesheet" type="text/css" href="lib/style.css">

复制代码

嗯。CSS，加上鱼C的URL，访问瞧瞧是啥。看完傻了，哇靠，老外的代码风格写的真漂亮。羡慕一翻。

之后继续扒。除了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();
};
});

复制代码

看了上面的代码，顿时五体投地。看来我的JS和CSS果然不是一般的烂.....
晚上蛋疼，没想到扒个代码也有这收获，嘿嘿。。学习到自己不足了。。{:1_1:}

文笔烂，凑合着看吧。。前几天有个求鱼C导航的，其实so easy。。

打看，看有多少个请求，之后copy all link到迅雷里。

s0512 · 发表于 2012-11-25 09:00:41

字真多~~~~~
累吧！

新雨花石 · 发表于 2012-11-25 10:02:43

新手表示看不懂。鸭梨:L

237236867 · 发表于 2012-11-25 10:33:09

哥哥，这是什么东西！求教育！！！！

゛゛不过如此. · 发表于 2012-11-25 15:07:18

m貌似很牛比的样子。

属専色灰 · 发表于 2012-11-26 04:19:11

大家不要羡慕啦每个人学习的路都不一样，它喜欢网页所以对网页方面比较清楚啊

237236867 · 发表于 2012-11-26 09:14:19

237236867 发表于 2012-11-25 10:33

登录/注册后可看大图

哥哥，这是什么东西！求教育！！！！

很多东西都不是很难，只要自己去攻克就好，我也想搞个自己的论坛玩玩，不知道该从哪里入手？求哥哥教育哈！

237236867 · 发表于 2012-11-27 09:10:12

237236867 发表于 2012-11-26 09:14

登录/注册后可看大图

很多东西都不是很难，只要自己去攻克就好，我也想搞个自己的论坛玩玩，不知道该从哪里入手？求哥哥教育哈 ...

谢谢哈，这东西没摸过就感觉很难入手！哥哥主攻哪个方面，求指导！

菜得要自杀 · 发表于 2012-11-27 09:37:39

从一门后台语言开始

之后数据库...

html css javascript ajax jquery(当然也可以自己手动写js不过能写疯你.)

至于服务器的话,不考虑调优,随便找一个就好了.

0c那似暮霭 · 发表于 2013-2-10 04:22:12

这个没有猜错的话就是php 写的我不会告诉你我真的不会 php ;P

浪漫狙击手 · 发表于 2013-2-10 08:07:07

牛逼啊。敬仰一下。啥也么看懂。:lol

如意老郎 · 发表于 2013-2-10 09:44:30

厉害啊~~~~

□为 · 发表于 2013-2-11 19:14:06

姐姐~！！！！！

Lafrer · 发表于 2013-2-12 12:12:56

强大我也慢慢要学

CRoot · 发表于 2013-2-12 12:39:21

话说我已经山寨过了，PS+代码修改且发布了、、在此跟帖向鱼哥道歉哈~ 目前网站已经关闭

灬执着de心 · 发表于 2013-2-12 13:19:58

我就是那个求导航的

chenhongtao · 发表于 2013-6-10 16:36:23

CRoot 发表于 2013-2-12 12:39

登录/注册后可看大图

话说我已经山寨过了，PS+代码修改且发布了、、在此跟帖向鱼哥道歉哈~ 目前网站已经关闭

我也要扒下来

～风介～ · 发表于 2015-4-18 17:43:03

强烈支持楼主ing……

账号		自动登录	找回密码
密码			立即注册

[吹水] 扒鱼C首页全过程，鱼哥莫怪，嘿嘿

马上注册，结交更多好友，享用更多功能^_^

评分

点评

点评

点评

浏览过的版块