用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>标签又重新不可见了。

安卓开发学习小结

首先展示一下我做的成果,你可以在这里下载然后安装到自己的手机:https://blog.yeskn.com/uploads/LoveScript.apk

这只是一个很简单很简单的app,界面如下(别吐槽我的手机,我的确很穷的。。。):

bee

 

helloandroid

安卓虚拟设备界面

 

为什么想起要学习安卓开发呢?这或许只是自己一时跟风移动热潮吧,看着移动互联网的星期,身边的人都在谈论着手机啊移动端的app体验。于是也不知道是哪根神经驱动了我,或者我的双手,来动手做这些东西,在我还是一个对安卓一窍不通的小伙伴的时候。

如果你问我我为什么不搞IOS开发,很简单,我没有苹果手机,目前以及目前的很长一段时间估计也买不起,到如果真的有必要搞IOS开发的时候,我想也不至于用不到苹果吧。

 

audio标签引用的音频如果是绝对路径的话音频名称必须是英文

<audio>标签引用的音频如果是绝对路径的话音频名称必须是英文,比如我在本博客引用《同学》这首歌的时候发现用同学.mp3后再内页不能播放,于是将路径由相对路径改成绝对路径,发现还是不能播放,于是想到可能是中文名字的原因,将之改成tongxue.mp3问题就解决了。

内层div使用float:left导致父层div的background失效

就是在我做这个的时候,我说的这个就是你看这段文字你会发现它没有标题,并且还有背景颜色,重点来了,我在内层的div添加float:left样式的时候,外层定义的背景居然不起作用,于是在网上搜索了一下,原来需要这么处理,就是在内层的最后面再加一个空的<div class="clear"></div>,这样就解决问题了。

指针常量

指针常量是指针所指向的位置不能改变,即指针本身是一个常量。但是指针常量可以通过间接引用修改内存中的数据。
例如:  int a=5,b=7;
int *const p=&amp;a;
*p=b;(正确)//指针常量指向的内容可以修改
p=&amp;b(错误)//指针常量是指针所指向的位置不能改变
定义指针常量的语句格式为:
指针类型 *const 指针常量名=&amp;变量名;