`
txbhcml
  • 浏览: 1997 次
  • 性别: Icon_minigender_1
  • 来自: 上海
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

google首页效果 js特效 全注释 记得当时分析了好长时间

阅读更多
最近将以前分析的google首页效果 拿了出来,发现挺有意思  拿来和大家分享一下

index.js


(//匿名函数,不需要被调用直接运行
  function()
  {
   //浏览器类型
    var e=navigator.userAgent.toLowerCase();
    //是否是下面各种浏览器(opera,ie,safari)
    google.isOpera = e.indexOf("opera")!=-1;
    google.isIE = document.all&&e.indexOf("msie")!=-1&&!google.isOpera;
    google.isSafari = e.indexOf("safari")!=-1;
    /*
    * obj-- 对象
    * b--mouseover,mouseout
    * evet--onmouseover,onmouseout
    * fuc--为事件响应调用的方法
    */
    //为邦定事件,onmouseover,onmouseout  
    window.google.bind = function(obj,evet,func)
    {
        var onevet = "on"+evet;/*onevet=onmouseover,onmouseout之类的事件*/
        if (obj.addEventListener)
            obj.addEventListener(evet,func,false);
        else
        {
            if(obj.attachEvent)
                obj.attachEvent(onevet,func);
            else
            {
                var h = obj[onevet];
                obj[evet] = function()
                {
                    var f = h.apply(this,arguments);
                    var g = callFunc.apply(this,arguments);
                    return (f == undefined)?g:(g == undefined?f:g&&f);
                }
            }
        }
     };
  }
)();

(
  function()
  {
    var PIC = "tool.png";
    //return all the onmouseover,onmouseout,onclick info
    //a:color
    //b:tooltip鼠标放上去的文字
    //c:name网站上显示的名字
    //d:url鼠标点击之后的超连接
    //e:yAdjust 显示图片的位置调整
    function p(d,c,b,a,e)
    {
      return {url:d,name:c,message:b,color:a,yAdjust:e}
    }
    var qutos= [
p("http://www.***.com/","<font size=-1>博客</font>","I","#54a70d",[2,5]),
p("http://www.***.com/","<font size=-1>工作室</font>","LOVE","#3b79e7",[2,5]),
p("http://www.***.com/","<font size=-1>资源</font>","YOU","#96cfec",[3,7]),
p("http://www.***.com/","<font size=-1>成功案例</font>","SO","#e8d40f",[4,9]),
p("http://www.***.com/","<font size=-1>资源共享</font>","MUCH!","#ea504c",[3,7])
   ];
     /*{icon:obj,element:this.element}*/
     var cacheObjs = [];
    /*
    *
    */
    function isac(url,name)
    {
    while (name&&url != name)
    {
    name = name.parentNode;
    }
    return name==url;
    }

    /*
    * 这个是bind方法中的参数,产生事件后调用的方法
    * param:d--mouseover
    */
    var DURATION1 = 100;
    function callFunc(evet,count)
    {
        return function(eventA)
        { 
          eventA = eventA || window.event;
            var cacheObj = cacheObjs[count];
            var isMouseOver = (evet == "mouseover");
            var element = eventA.target || eventA.srcElement;//event.srcElement触发事件的元素
            var currObj = eventA.relatedTarget || (isMouseOver?eventA.fromElement:eventA.toElement);
            var h =!currObj || isac(cacheObj.element,currObj);
            var i = isac(cacheObj.element,element);
            if (isMouseOver&&!h||!isMouseOver&&(!currObj||i&&!h))
            {
                var icon = cacheObj.icon;
                icon.mouseTimeout = window.clearTimeout(icon.mouseTimeout);
                var flag = isMouseOver?1:-1;
                if(icon.flag != flag)
                {   /*这个导致active只执行一次,鼠标移入移出每一次动作切换调用一次*/
                    icon.mouseTimeout = window.setTimeout(icon.active(flag,undefined),isMouseOver?DURATION1/3:DURATION1)
                }
            }
        }
    }
    /*
    * obj 对象
    * evet 事件
    * count 长度
    */
    function bindEvent(obj,evet,count)
    {
        google.bind(obj,evet,callFunc(evet,count));
    }
    /*  页面元素的提示信息
    *   param:obj:setDivObj;Ourl:超链接;Otext:显示提示;
    */
    function show(obj,Ourl,Otext)
    {
      this.obj = obj;
      var divObj = document.createElement("div");
      var color = obj.color;
      var bgcolor = "background-color:" + color;
      var f = "width:1px;height:1px;" + "background-color:" + color + ";float:";
      var h = '<div style="height:1px;overflow:hidden">'+'<div style="'+f+'left"></div>'+'<div style="'+f+'right"></div></div>';
      var i = "margin:0 1px;height:1px;overflow:hidden;" + bgcolor;
      divObj.innerHTML = '<div style="display:none;position:absolute;top:0;left:0;z-index:2;background:#fff;cursor:pointer;cursor:hand">'
                            + '<a href="'+Ourl+'" style="color:#444;text-decoration:none" target=_blank>'/*提示信息的超链接*/
                                + '<div style="' + i + '"></div>'/*提示信息上边框*/
                                + '<div style="text-align:center;border-left:1px solid;border-right:1px solid;border-color:'+color+'">'/*提示信息左右边框*/
                                    + ''
                                    + '<div style="margin:0 auto;white-space:nowrap;padding:.2em 0 0"><font size=-1><span>'+Otext+"</span></font></div>"/*提示信息*/
                                    + h +'</div>'
                                + '<div style="'+i+'"></div>'/*提示信息下边框*/
                                + '<div style="height:4px" align="center">'
                                    + '<div style="position:relative;top:-1px;z-index:3;width:8px;overflow:hidden;margin:0 auto;height:4px;background:no-repeat -260px '+-obj.coordinates[0].y+'px"></div></div></a></div>';/*提示信息的边框下箭头*/
      this.ObjSpan = divObj.getElementsByTagName("span")[0];
      document.body.appendChild(divObj);//直接将元素的提示信息放在body下
      divObj.firstChild.firstChild.lastChild.firstChild.style.backgroundImage = "url("+PIC+")";
      this.tagA = divObj.firstChild;//提示信息的超链接
      var count = cacheObjs.length;
      cacheObjs.push({icon:obj,element:this.tagA});
      bindEvent(this.tagA,"mouseover",count);   //给超链接绑定事件
      bindEvent(this.tagA,"mouseout",count);
    }
    show.prototype.play = function(num)
    {
        var divObj = this.obj.tagA.firstChild;
        var positionA = {left:-divObj.offsetLeft,top:0};
        while (divObj)
        {
            positionA.left += divObj.offsetLeft;
            positionA.top += divObj.offsetTop;
            divObj = divObj.offsetParent;
        }
        var styleA = this.tagA.style;//这里变量styleA指向this.tagA.style,相当于缩写
        if(styleA.display == "none")
        {
            styleA.visibility = "hidden";
            styleA.display = "block";
        }
        var heightA = this.tagA.offsetHeight;
        var widthA = this.ObjSpan.offsetWidth+14;
        if (styleA.visibility == "hidden")
        {
            styleA.display = "none";
            styleA.visibility ="visible";
        }
        styleA.width = widthA + "px";
        positionA.left -= (widthA - this.obj.tagA.parentNode.offsetWidth)/2;
        positionA.top -= heightA - 3;
        positionA.top += 20*Math.pow(1 - num/this.obj.countA,3);
        styleA.left = positionA.left + "px";
        styleA.top = positionA.top + "px";
        //d--[0,1,2]
        if (num == 0||this.obj.positionA < 0)
            styleA.display = "none";
        else
        {
            styleA.display = "";
            var f = num/this.obj.countA;
            //设置提示信息的透明度,有一个渐变过程
            if("opacity" in styleA)
                styleA.opacity = f;
            else
            {
                if("MozOpacity" in styleA)
                    styleA.MozOpacity = f;
                else
                {
                    if("KhtmlOpacity" in styleA)
                        styleA.KhtmlOpacity = f;
                    else
                    {
                        if("filter" in styleA)
                            styleA.filter = "alpha(opacity=" + f*100 + ")";
                    }
                }
            }
        }
    };

//第三步:设置图片坐标和绑定事件
/*
*   param:Ocolor:颜色;tagA:超链接元素,coordinates:坐标;Ourl:超链接指向地址,Otext:页面显示的文本
*/
    function setDivObj(tagA,coordinates,Ocolor,Ourl,Otext)
    {
      this.tagA = tagA;//页面元素最外面套的超链接
      this.mouseTimeout = null;
      this.countA = coordinates.length-1;//显示的每个元素动作次数
      this.coordinates = coordinates;
      this.color = Ocolor;//颜色
      this.PicDiv = tagA.getElementsByTagName("div")[1];//页面元素的动态图片
      this.ObjShow = new show(this,Ourl,Otext);/*计算坐标和显示图片*/
      this.flag = -1;//元素的状态(-1:mouseover效果;1:mouseout效果)
      this.num = 1;//元素的动作的步骤数目
      var count = cacheObjs.length;
      /*将来要通过cacheObjs[count]找到{icon:this,element:tagA}这个对象*/
      cacheObjs.push({icon:this,element:tagA});
      bindEvent(tagA,"mouseover",count);//绑定mouseover事件
      bindEvent(tagA,"mouseout",count);//绑定mouseout事件
    }

    setDivObj.prototype.active= function(flag,num)  //使用闭包,为其他函数中settimeout反复调用产生动态效果
    {
       var obj = this;
       return function(){obj.func(flag,num)}
    };

    setDivObj.prototype.func = function(flag,num)
    {
        if (flag)     
        {
          this.flag = flag;
          this.mouseTimeout = window.clearTimeout(this.mouseTimeout);
          this.timeOut = window.clearTimeout(this.timeOut)
        }
        (typeof num != "undefined")&&(this.num = num);
        var coordinate = this.coordinates[this.num];
        /*动态图片的动态效果,变换*/
        this.PicDiv.style.backgroundPosition = -coordinate.x + "px " + -coordinate.y + "px";
        /*提示信息的动态效果,渐变*/
        this.ObjShow.play(this.num);
        /*网站名字的动态效果,变色*/
        var styleB = this.tagA.getElementsByTagName("font")[0].style;
        if (this.flag < 0)//鼠标移出,设置网站名字字体的属性
        {
            styleB.color = "black";        
            styleB.textDecoration = "none";
        }
        else//鼠标移入状态的
        {
          styleB.color = this.color;
          styleB.textDecoration = "underline";
        }
        this.num += this.flag;   
        if (this.num > this.countA)
        {
          this.num = this.countA - 1;
        }
        else if (this.num < 0)
        {
            this.num = 1;
        }
        else
        {/*这个settimetou导致active执行多次产生动态效果*/
            this.timeOut = window.setTimeout(this.active(undefined,undefined),DURATION);
        }
    };

    var WIDTH=52;
    var HEIGHT=37;
    var DURATION=75;
    /*第二步:画出静态页面,并绑定元素的事件*/
    google.index.first.push( /*first内传入函数,该函数绘制初始化页面*/
        function()
        {
            var str = '<table style="margin:2em auto;border-collapse:collapse;line-height:1.4em" cellpadding="3" cellspacing="2" border="0"><tr>';
    for (var j = 0;j < qutos.length;++j)//循环页面的5个元素
    {
    var coordinates = [];//坐标,里面放的是left和top的值
    var topA = HEIGHT*j;
    for (var i = 0;i < 7; ++i)/*七个步骤构成一个元素的动态效果*/
    {
    if (i < 5)
        coordinates.push({x:WIDTH*i,y:topA});/*push进的为left和top*/
    else
    {  
        coordinates.push({x:WIDTH*4,y:topA-qutos[j].yAdjust[i-5]});
    }
        /*left不变了,top变化,成为最后一个效果的抖动*/
        }
    qutos[j].coordinates = coordinates;
    str +=  '<td valign=bottom style="text-align:center;padding:0 .35em 0 .4em;margin:0;cursor:pointer;cursor:hand;">'
                +'<a style="color:#444;text-decoration:none;vertical-align:bottom;" href="'+ qutos[j].url + '" target=_blank>'
                    +'<div>'
                        +'<div style="width:52px;height:37px;margin:.5em auto;cursor:pointer;cursor:hand;background:no-repeat 0 '+ -topA + 'px"></div>'
                        +'<span style="white-space:nowrap">' + qutos[j].name+"</span></div></a></td>";
    };
    str += "</tr></table>";
            var ObjDiv = document.getElementById("tb");
            ObjDiv.innerHTML = str;//添加一个动态图片
            var tagsA = ObjDiv.getElementsByTagName("a");//获取超链接标签
            for(var i = 0;i < tagsA.length; ++i)
            {
              tagsA[i].firstChild.firstChild.style.backgroundImage = "url("+PIC+")";//PIC是图片的路径,全局变量
              new setDivObj(tagsA[i],qutos[i].coordinates,qutos[i].color,qutos[i].url,qutos[i].message);//设置页面元素的响应事件
            }
        }
    );
  }
)();
/*第一步:*/
google.doFirst = function()
{
  if(!google.xjs_ready)
    window.setTimeout(google.doFirst,10);
  else//如果页面的js文件加载完成了
  {
    if(google.index.first)
    /*查看first phsh操作有未完成,如果完成了就执行其内部绘图函数,该函数绘制初始化静态页面*/
    {
        for(var i = 0,draw;draw = google.index.first[i];++i)
            draw();
        delete google.index.first;//静态页面绘制完成,删除绘图缓存
    }
  }
};
google.doFirst();
分享到:
评论

相关推荐

    程序天下:JavaScript实例自学手册

    第1章 页面特效 ...1.2 页面自动最大化 1.3 页面自动刷新 ...22.10 用JavaScript调用Google AdSense 22.11 Ajax效果:可拖拽的表格 22.12 JavaScript调用Web Service 22.13 用JavaScript实现编码解码 22.14 创建带属性...

    《程序天下:JavaScript实例自学手册》光盘源码

    22.10 用JavaScript调用Google AdSense 22.11 Ajax效果:可拖拽的表格 22.12 JavaScript调用Web Service 22.13 用JavaScript实现编码解码 22.14 创建带属性的对象 22.15 用prototype实现JavaScript的继承 22.16 ...

    计算机硬件控制_驱动级键盘鼠标同步_PS2接口UDP协议多机协同_基于rabirdwinio和pynput的跨设备输入共享系统_实现多台Windows电脑的键盘鼠标同步操作_支持.zip

    计算机硬件控制_驱动级键盘鼠标同步_PS2接口UDP协议多机协同_基于rabirdwinio和pynput的跨设备输入共享系统_实现多台Windows电脑的键盘鼠标同步操作_支持

    嵌入式八股文面试题库资料知识宝典-TCPIP协议栈.zip

    嵌入式八股文面试题库资料知识宝典-TCPIP协议栈.zip

    少儿编程scratch项目源代码文件案例素材-开膛手杰克.zip

    少儿编程scratch项目源代码文件案例素材-开膛手杰克.zip

    基于深度学习CNN网络+pytorch框架实现遥感图像滑坡识别源码+数据集+训练好的模型

    基于深度学习CNN网络+pytorch框架实现遥感图像滑坡识别源码+数据集+训练好的模型,个人经导师指导并认可通过的高分设计项目,评审分99分,代码完整确保可以运行,小白也可以亲自搞定,主要针对计算机相关专业的正在做大作业的学生和需要项目实战练习的学习者,可作为毕业设计、课程设计、期末大作业,代码资料完整,下载可用。 基于深度学习CNN网络+pytorch框架实现遥感图像滑坡识别源码+数据集+训练好的模型基于深度学习CNN网络+pytorch框架实现遥感图像滑坡识别源码+数据集+训练好的模型基于深度学习CNN网络+pytorch框架实现遥感图像滑坡识别源码+数据集+训练好的模型基于深度学习CNN网络+pytorch框架实现遥感图像滑坡识别源码+数据集+训练好的模型基于深度学习CNN网络+pytorch框架实现遥感图像滑坡识别源码+数据集+训练好的模型基于深度学习CNN网络+pytorch框架实现遥感图像滑坡识别源码+数据集+训练好的模型基于深度学习CNN网络+pytorch框架实现遥感图像滑坡识别源码+数据集+训练好的模型基于深度学习CNN网络+pytorch框架实现遥感图像滑坡识别源码+数据集+训练好的模型基于深度学习CNN网络+pytorch框架实现遥感图像滑坡识别源码+数据集+训练好的模型基于深度学习CNN网络+pytorch框架实现遥感图像滑坡识别源码+数据集+训练好的模型基于深度学习CNN网络+pytorch框架实现遥感图像滑坡识别源码+数据集+训练好的模型基于深度学习CNN网络+pytorch框架实现遥感图像滑坡识别源码+数据集+训练好的模型基于深度学习CNN网络+pytorch框架实现遥感图像滑坡识别源码+数据集+训练好的模型基于深度学习CNN网络+pytorch框架实现遥感图像滑坡识别源码+数据集+训练好的模型基于深度学习CNN网络+pytorch框架实现

    电力弹簧技术在主动配电网规划与运行优化调度中的应用研究

    内容概要:本文详细探讨了电力弹簧技术在主动配电网规划及运行优化调度中的应用。首先介绍了电力弹簧技术作为智能电网调控手段的优势,如自适应性强、响应速度快、节能环保等。接着阐述了主动配电网规划的目标和策略,包括优化电网结构、提高能源利用效率和降低故障风险。随后讨论了运行优化调度的原则和方法,强调了实时监测、智能调度策略以及优化调度模型的重要性。最后通过实际案例分析展示了电力弹簧技术在提升电网稳定性、可靠性和能效方面的显著效果,展望了其广阔的应用前景。 适合人群:从事电力系统规划、运行管理的研究人员和技术人员,以及对智能电网感兴趣的学者和学生。 使用场景及目标:适用于希望深入了解电力弹簧技术及其在主动配电网规划和运行优化调度中具体应用的专业人士。目标是掌握电力弹簧技术的工作原理、优势及其在实际项目中的实施方法。 其他说明:本文不仅提供了理论分析,还有具体的案例支持,有助于读者全面理解电力弹簧技术的实际应用价值。

    嵌入式八股文面试题库资料知识宝典-C语言思维导图.zip

    嵌入式八股文面试题库资料知识宝典-C语言思维导图.zip

    电路教学与科研案例的结合—以最大功率传输定理为例.pdf

    电路教学与科研案例的结合—以最大功率传输定理为例.pdf

    【HarmonyOS文件系统】分布式架构下的多设备协同与文件管理:构建万物互联新生态

    内容概要:本文深入介绍了HarmonyOS文件系统及其在万物互联时代的重要性。HarmonyOS自2019年发布以来,逐步覆盖多种智能设备,构建了庞大的鸿蒙生态。文件系统作为其中的“数字管家”,不仅管理存储资源,还实现多设备间的数据协同。文章详细介绍了常见的文件系统类型,如FAT、NTFS、UFS、EXT3和ReiserFS,各自特点和适用场景。特别强调了HarmonyOS的分布式文件系统(hmdfs),它通过分布式软总线技术,打破了设备界限,实现了跨设备文件的无缝访问。此外,文章对比了HarmonyOS与Android、iOS文件系统的差异,突出了其在架构、跨设备能力和安全性方面的优势。最后,从开发者视角讲解了开发工具、关键API及注意事项,并展望了未来的技术发展趋势和对鸿蒙生态的影响。 适合人群:对操作系统底层技术感兴趣的开发者和技术爱好者,尤其是关注物联网和多设备协同的用户。 使用场景及目标:①理解HarmonyOS文件系统的工作原理及其在多设备协同中的作用;②掌握不同文件系统的特性和应用场景;③学习如何利用HarmonyOS文件系统进行应用开发,提升跨设备协同和数据安全。 阅读建议:本文内容详实,涵盖了从基础概念到高级开发技巧的多个层次,建议读者结合自身需求,重点关注感兴趣的部分,并通过实践加深理解。特别是开发者可参考提供的API示例和开发技巧,尝试构建基于HarmonyOS的应用。

    嵌入式八股文面试题库资料知识宝典-海康嵌入式笔试题.zip

    嵌入式八股文面试题库资料知识宝典-海康嵌入式笔试题.zip

    三电平有源电力滤波器仿真:基于瞬时无功功率理论的双闭环控制与SVPWM调制技术

    内容概要:本文详细介绍了基于瞬时无功功率理论的三电平有源电力滤波器(APF)仿真研究。主要内容涵盖并联型APF的工作原理、三相三电平NPC结构、谐波检测方法(ipiq)、双闭环控制策略(电压外环+电流内环PI控制)以及SVPWM矢量调制技术。仿真结果显示,在APF投入前后,电网电流THD从21.9%降至3.77%,显著提高了电能质量。 适用人群:从事电力系统研究、电力电子技术开发的专业人士,尤其是对有源电力滤波器及其仿真感兴趣的工程师和技术人员。 使用场景及目标:适用于需要解决电力系统中谐波污染和无功补偿问题的研究项目。目标是通过仿真验证APF的有效性和可行性,优化电力系统的电能质量。 其他说明:文中提到的仿真模型涉及多个关键模块,如三相交流电压模块、非线性负载、信号采集模块、LC滤波器模块等,这些模块的设计和协同工作对于实现良好的谐波抑制和无功补偿至关重要。

    基于环比增长的销售统计分析——2019年中青杯全国数学建模竞赛C题.pdf

    基于环比增长的销售统计分析——2019年中青杯全国数学建模竞赛C题.pdf

    嵌入式八股文面试题库资料知识宝典-linux面试题.zip

    嵌入式八股文面试题库资料知识宝典-linux面试题.zip

    嵌入式八股文面试题库资料知识宝典-linux常见面试题.zip

    嵌入式八股文面试题库资料知识宝典-linux常见面试题.zip

    基于Matlab的小电流接地系统单相故障仿真分析及其应对策略研究

    内容概要:本文探讨了小电流接地系统在配电网络中的应用,特别是在单相故障情况下的仿真分析。文中介绍了小电流接地系统的背景和发展现状,重点讨论了两种常见的接地方式——中性点不接地和中性点经消弧线圈接地。利用Matlab作为仿真工具,作者构建了详细的电路模型,模拟了单相故障的发生过程,并通过多个结果图表展示了故障电流、电压波形及系统运行状态。此外,文章还包括了详细的设计说明书和PPT介绍,帮助读者全面理解仿真过程和技术细节。 适合人群:从事电力系统研究、维护的技术人员,尤其是关注配电网络安全和稳定的工程师。 使用场景及目标:适用于希望深入了解小电流接地系统的工作原理和故障处理机制的专业人士。通过本研究,读者可以掌握如何使用Matlab进行电力系统仿真,评估不同接地方式的效果,优化配电网络的安全性能。 其他说明:随文附带完整的仿真工程文件、结果图、设计说明书及PPT介绍,便于读者进一步探索和实践。

    少儿编程scratch项目源代码文件案例素材-激烈的殴斗.zip

    少儿编程scratch项目源代码文件案例素材-激烈的殴斗.zip

    嵌入式八股文面试题库资料知识宝典-小米嵌入式软件工程师笔试题目解析.zip

    嵌入式八股文面试题库资料知识宝典-小米嵌入式软件工程师笔试题目解析.zip

    车辆主动避撞技术:紧急制动与紧急转向策略及其临界安全距离分析

    内容概要:本文详细探讨了车辆主动避撞技术中的两种常见策略——纵向紧急制动避撞和横向紧急转向避撞。首先介绍了这两种避撞策略的基本概念,接着深入分析了临界纵向安全距离的概念及其对避撞模式选择的影响。文中特别强调了五次多项式换道轨迹模型在计算横向紧急转向避撞安全距离中的应用。最后,通过一个简化的程序实现了避撞策略的模拟和可视化展示,帮助读者更好地理解不同避撞方式的应用场景和技术细节。 适合人群:汽车工程技术人员、交通安全研究人员、自动驾驶开发者。 使用场景及目标:适用于研究和开发车辆主动避撞系统的专业人士,旨在提高对避撞策略的理解,优化避撞算法的设计,提升行车安全性。 其他说明:文章不仅提供了理论分析,还结合了具体的数学模型和程序实现,使读者能够从多个角度全面掌握车辆避撞技术的关键要素。

Global site tag (gtag.js) - Google Analytics