请js大神帮我注释,想自学,详细点,谢谢!代码如下

JavaScript05

请js大神帮我注释,想自学,详细点,谢谢!代码如下,第1张

很抱歉,图中的try catch我研究了一下,是有意义的,我已更改文中内容

如果看不清图片,就右键保存查看

话说你是从哪找的,这代码可以称得上是工业级的了ヽ(ー_ー)ノ

如果图片看不清,这是源代码:

/*函数后的(window, document)表示要执行这个函数。所以要求(window, document)前面必须是一个表达式,而 !正是这个作用。也就意味着这是自调用函数*/

! function (e, t, a) {//这的参数a可能已被弃用

function n() {

c(".love{width: 20pxheight: 20pxposition: fixedbackground: #f00transform: rotate(45deg)-webkit-transform: rotate(45deg)-moz-transform: rotate(45deg)}.love:after,.love:before{content: ''width: inheritheight: inheritbackground: inheritborder-radius: 50%-webkit-border-radius: 50%-moz-border-radius: 50%position: fixed}.love:after{top: -10px}.love:before{left: -10px}"), o(), r()

//上面是调用c()并传入了一串css样式与过渡动画,并一起调用o()r()

}

function r() {

/*下面这个for就是遍历整个d,因为与执行代码写在了一行,所以省略{},后面的 ? : 为三元运算符  而后面大意为:判断绘画的图像是否透明,如果是,将其移除,如果不是再传入参数绘画*/

for (var e = 0 e < d.length e++) d[e].alpha <= 0 ? (t.body.removeChild(d[e].el), d.splice(e, 1)) : (d[e].y--, d[e].scale += .004, d[e].alpha -= .013, d[e].el.style.cssText = "left:" + d[e].x + "pxtop:" + d[e].y + "pxopacity:" + d[e].alpha + "transform:scale(" + d[e].scale + "," + d[e].scale + ") rotate(45deg)background:" + d[e].color + "z-index:99999")

requestAnimationFrame(r)

//requestAnimationFrame()是一个请求动画的API,而其中的 r 就是指调用r()

}

function o() {

//这里的=是赋值,==是判断,而&&是逻辑运算符,而typeof返回的是数据类型 注:这的e应指window对象

var t = "function" == typeof e.onclick && e.onclick

e.onclick = function (e) {

t && t(), i(e)

}

}

//创建div并添加class为love,再向d中添加一串对象(用于r()的绘画)

function i(e) {

var a = t.createElement("div")

a.className = "love", d.push({

el: a,

x: e.clientX - 5,//注:这的e应指window对象

y: e.clientY - 5,

scale: 1,

alpha: 1,

color: s()

}), t.body.appendChild(a)//添加了a这个子节点

}

function c(e) {

var a = t.createElement("style")//简化代码

a.type = "text/css"

try {

a.appendChild(t.createTextNode(e)/*添加了一个内容为e的文本节点*/)//并作为a的子节点

} catch (t) {//这里的t纯属需要,无实意

a.styleSheet.cssText = e

}

//这的try catch语句意义为如果上文的e无法添加,则会将a.styleSheet.cssText赋值为e

t.getElementsByTagName("head")[0].appendChild(a)

//getElementsByTagName("head")[0].appendChild(a) 表在第一个head处添加子节点a

}

function s() {

return "#cc2a5d"//这只返回一个颜色=>RGB(204,42,93)

}

var d = []

//下面这个是对requestAnimationFrame方法进行了一个全面兼容 ||也是个逻辑运算符

e.requestAnimationFrame = function () {

return e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame || function (e) {

setTimeout(e, 1e3 / 60)//这的e应指是window对象

}

}(), n()

}(window, document)//这的window对应参数e,document对应参数t

// rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")

//顺便说一下上面应是生成随机颜色

function systole() {

        if (!$(".history").length) { //判断$(".history")文本对象的长度,不存在的话执行里面return语句

            return

        }

        var $warpEle = $(".history-date"),//获得类名为history-date的对象

      $targetA = $warpEle.find("h2 a,ul li dl dt a"),//获取当前匹配的元素集合中每个元素的后代

      parentH,

      eleTop = []  //声明数组

        parentH = $warpEle.parent().height() //获取类名为history-date的父级元素的height

        $warpEle.parent().css({//类名为history-date的父级元素设置css样式

            "height": 59

        })

        setTimeout(function () {//设置一个定时事件即每隔2600s调用一次里面的这个函数

            $warpEle.find("ul").children(":not('h2:first')").each(function (idx) {

                eleTop.push($(this).position().top)//向该数组添加艺元素

                $(this).css({

                    "margin-top": -eleTop[idx]

                }).children().hide()

            }).animate({//设置动画

                "margin-top": 0

            }, 1600).children().fadeIn()

            $warpEle.parent().animate({

                "height": parentH

            }, 2600)

            $warpEle.find("ul").children(":not('h2:first')").addClass("bounceInDown").css({

                "-webkit-animation-duration": "2s",

                "-webkit-animation-delay": "0",

                "-webkit-animation-timing-function": "ease",

                "-webkit-animation-fill-mode": "both"

            }).end().children("h2").css({

                "position": "relative"

            })

        }, 600)

        $targetA.click(function () {//在上面获得后代元素里绑定点击事件

            $(this).parent().css({

                "position": "relative"

            })

            $(this).parent().siblings().slideToggle()

            $warpEle.parent().removeAttr("style")//为类名为history-date的父级元素移除所以style属性

            return false

        })

你好,由于代码太繁琐,只翻译了大部分重要的代码,其余的如有不明白,我在这给你一个关于JQuery 的中文API 希望可以帮助你理解,一下是API链接:

http://www.css88.com/jqapi-1.9/

第一个JS应该放在下面或者使用window.onload来执行代码,在页面没加载完的时候那些DOM节点是没有的。

第二个逻辑有点混乱。

修改结果:

<html>

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />

<title>测试</title>

</head>

<body>

<ul id="news_box">

<li>测试新闻测试新闻测试新闻测试新闻测试新闻</li>

<li>测试新闻测试新闻测试新闻测试新闻测试新闻</li>

<li>测试新闻测试新闻测试新闻测试新闻测试新闻</li>

<li>测试新闻测试新闻测试新闻测试新闻测试新闻</li>

<li>测试新闻测试新闻测试新闻测试新闻测试新闻</li>

<li>测试新闻测试新闻测试新闻测试新闻测试新闻</li>

<li>测试新闻测试新闻测试新闻测试新闻测试新闻</li>

<li>测试新闻测试新闻测试新闻测试新闻测试新闻</li>

<li>测试新闻测试新闻测试新闻测试新闻测试新闻</li>

</ul>

<script type="text/javascript">

function setbg()

{

var abc=document.getElementById("news_box").getElementsByTagName("li")

var abcLen=abc.length

for(var i=0i<abcLeni++)

{

//if(abc[i].getElementsByTagName("ul")[0]!=undefined)

//{

abc[i].onmouseover=function(){this.style.background="#FF0000"}

abc[i].onmouseout=function(){this.style.background="#ffffff"}

//}

}

}

setbg()

</script>

</body>

</html>