年轻时如果还没想好要干什么或是不确定自己适合干什么,又不想浪费光阴的话,要么努力多赚点钱,要么用心多读点书,想要让自己更自由,这二者都是必不可少的。

最近在学习jQuery,

又对HTML5产生了很大的兴趣,想买一个移动端方面的书看看,

Appcan这个网站真实太厉害了,以后想简单做一个app的话在到这个网站上面来看看,

本来据说也有可以将wordpress网站改成安卓app的方法的,但是没有试过,我想现在不去随便试这些东西了,当自己下定决定,我想一定要学好自己想学的,而不是学到中途却还是一知半解。

钱用的太快了。

正在努力忘却感情的羁绊,生活没必要想那么多。

导数之中,dy/dx代表的意义是什么?

搞清两个概念就能理解d的含义了。

1、增量的概念:
   Δx = x2 - x1,Δy = y2 - y1
      这里的Δ就是增量的意思,只要是后面的量减前面的量,无论正负都叫增量。

2、无限小的概念:
   当一个变量x,越来越趋向于一个数值a时,这个趋向的过程无止境的进行,
   x与a的差值无限趋向于0,我们就说a是x的极限。
   这个差值,我们称它为“无穷小”,它是一个越来越小的过程,一个无限趋
   向于0的过程,它不是一个很小的数,而是一个趋向于0的过程。

3、Δ一方面表示增量的概念,如果x1与x2差距很小,这个小是有限的小。只要
   写得出来,无论多少位小数点,只要你写得出,只要你的笔一停,都是有限的小。
   当x1与x2的差距在无止境的减小,无止境的靠近,在靠近的过程中,x1与x2
     的差距无止境的趋近于0。这时我们写成dx,也就是说,Δx是有限小的量,
   dx是无限小的量。

4、d的来源,本来是 difference = 差距。当此差距无止境的趋向于0时,演变
   为 differentiation, 就变成了无限小的意思,称为“微分”。
   “微分”是一个过程,是无止境的“分割”,无止境的“区分”的过程。

5、Δy/Δx 表示的一条割线的斜率,也可以表示一条切线的斜率;
   dy/dx 表示的是当Δx趋近于0时的Δy/Δx,记为dy/dx,是曲线上任意一点的切线
   的斜率。

用javascript制作返回顶部按钮

以前一直想实现的返回顶部按钮现在终于算是实现了,其实还是用到了JS里的setTimeout()方法,另一篇关于setTimeout()方法的介绍的文章可以点击这里:

https://blog.yeskn.com/archives/536.html

我的这个返回顶部的按钮做的比较简单,因为需要符合网站一致的风格,所以只添加了“返回顶部”这四个字当做按钮,并且我看到似乎豆瓣也是这样么做的。你可以在我的首页的右下角看到他,或许你已经发现了吧。

这个效果是模仿极客公园的效果做的,原始的效果可以点http://geekpark.net 查看。

主要的效果是点击返回顶部按钮的时候,出现一个小火箭,然后网页动态的返回顶部,当到达顶部的时候,小火箭就往上飞,直到消失。

点击此处查看DEMO:https://blog.yeskn.com/uploads/back-to-up.html

我写的代码如下:

<script>
var ptt=0;
function pageScroll() {
document.getElementById('flypig').style.display='block';
window.scrollBy(0,-10); //每次上升10px
scrolldelay = setTimeout('pageScroll()',2); //2毫秒重复执行一次
if(document.body.scrollTop==0) {
  document.getElementById('flypig').style.marginBottom=ptt;
  ptt=ptt+10;
}//火箭向上飞的效果

if(ptt>=1000){
  ptt=0;
  document.getElementById('flypig').style.marginBottom=20;
  document.getElementById('flypig').style.display='none';
  clearTimeout(scrolldelay);
}//返回原始状态
//pageScroll ends
}

</script>

html部分代码:

<div style="display:none;float:left;position:fixed;
    bottom:20;margin-left:75%;cursor:pointer;" 
    id="flypig">
    <img src="<?php bloginfo('template_directory'); ?>/images/flypig.gif" /> 
</div>

<div style="float:left;position:fixed;
    bottom:10;margin-left:75%;cursor:pointer;" 
    id="go" onclick="pageScroll()">返回顶部
</div>

详解:首先想看到效果的话请滚动窗口滚动条向下一定的距离,然胡,点击‘返回顶部’这个div,然后id为flypig的div的display属性从none变为block,即就将小火箭显示出来,然后开始10px的速度返回顶部,当小火箭与底部的距离(ppt)大于1000px的时候,就停止setTimeout,并将ppt置零,然后再将小火箭向下的距离设为20(这是我自己定的距离,),然后再次隐藏它,使一切回到初始状态。

用javascript使div自由移动

作为javascript小白,经常看到别人的网页有图片匀速移动,或者其他比较炫的效果,比如说幻灯片等网页元素可以自由移动的效果,网页返回顶部,当鼠标点击某个元素,元素就自动跑动等等。羡慕不已,可是自己只会一些简单的JS,为了学习之,于是自己摸索了一番,首先是W3C上的HTML DOM setTimeout()让我完成了这个效果,我制作的效果可以点击这里:

https://blog.yeskn.com/uploads/js-to-move.html

代码摘录如下:

<html>
<head>
    <meta charset=utf8 />
    <script>
        var mt=0,opc=0,mr=0,tr;
        var time;
        function move(){
            if(mt<=500){
                document.getElementById('cube').style.marginLeft=mt+'px';
                document.getElementById('cube').style.opacity=opc;
                if(opc<1) opc=opc+0.01;
                mt=mt+5;
                tr=mt;
            }
            else if(mr<=400){
                document.getElementById('cube').style.marginTop=mr+'px';
                mr=mr+5;
                tt=mr;
            }
            else if(tr>=5){
                document.getElementById('cube').style.marginLeft=tr+'px';
                tr=tr-5;
            }
            else if(tt>=5){
            document.getElementById('cube').style.marginTop=tt+'px';
                tt=tt-5;

            }
            time=setTimeout("move()",10);

        }
    </script>
</head>
<body onload="move()">
    <div style="position:absolute;width:300px;height:300px;background:pink;opacity=0;border-radius:10px;" id="cube" onclick="clearTimeout(time);"></div>
</body>
</html>

其中最重要的是使用了setTimeOut()这个JS里的函数,然后求元素的左边距是style.marginLeft,对应的还有style.marginRight等其余的三个,而不是style.margin-left,这一点要特别注意,并且还有一个有点坑的是,

document.getElementById('cube').style.marginLeft

这个方法求得的不是一个纯粹的数,因为这个长度是有单位的,所以,他的数据类型应该是一个字符串,赋值时需要使用数字+’px’这样的方式。
进阶教程可以查看W3C关于setInterval()方法的说明:http://www.w3school.com.cn/htmldom/met_win_setinterval.asp

CSS打造下拉菜单的小箭头(border-color的利用)

昨天学会了怎么用CSS打造下拉菜单,今天于是想想怎么通过CSS制作下拉菜单的箭头,在网站上随便找了个网站查看其代码,还是不甚其解,百度一番无果后转战google,果然还是google强大,直接搜索到了自己想要的结果,CSS制作下拉菜单也解决了顺便学习了一下一个不起眼的css样式,那就是border-color.

 

首先我直接把代码贴在这里,下面做详细解释:

 

.site {
    width:auto;
    height:auto;
    background-color:#fff;
    position:relative;
}
.site b {
    border-color: #666 #fff #fff;
    border-style: solid;
    border-width: 4px;
    position:absolute;
    top:7px;
}
<div> 这就是下拉的小三角形 <b> </b> </div>

这里面通过border-color实现了一个三角形,经过自己的实践,border-color可以有四个颜色值,他们分别对应上,右,下、左三个角。以前都只有见到只有一个值的,那就是整个的都是这个颜色,你还可以只写三个值,或者两个值都是可以的,效果自己试了一下就知道了。

用CSS制作下拉菜单

昨天和大瓶子一起学html,看到有个讲下拉菜单的视频,这让我第一印象是以为这个必须得用JS做,可是看到最后他竟然是这样做的,

CSS代码如下:

#menu dd{

display:none;

}

#menu li:hover dd{

display:block;

}

HTML代码:

<div id="menu"><ul><li>

<dt>项目一</dt>

<dd>子项目一</dd>

<dd>子项目二</dd>

<dd>子项目三</dd>

</li></ul></div>

解析:首先<dd>标签都是不可见的,当鼠标放在<li>标签上时(此时li可见的部分只有<dt>),<dd>标签就会出现,当鼠标移出 <li>所在的范围(此时已经是dt和dd所在的部分了)的时候,<dd>标签又重新不可见了。