JavaScript
许你一城个人博客
这个作者很懒,什么都没留下…
展开
-
小游戏——抢红包
突发奇想写一个抢红包的小游戏,采用原生JavaScript代码编写,代码还是比较简单的,我们一起学习交流一下吧。友情提示:文章底部有游戏下载链接哦,下载下来研究一下吧。更多详情请点击 这里 查看许你一城个人博客...原创 2018-03-08 19:09:56 · 574 阅读 · 0 评论 -
鼠标拖拽div元素
上图中绿色箭头指向的分别是3个事件,大概的意思是:鼠标单击div#box元素后,激活了document.onmousemove鼠标移动事件,在移动鼠标时,会改变div#box的left、top值,从而达到div#box元素随着鼠标移动。单鼠标放开时触发了document.onmouseup鼠标松开事件,在鼠标松开事件里把document.onmousemove事件设为null,这时div#box就...原创 2018-03-20 10:50:27 · 239 阅读 · 0 评论 -
小游戏——飞机大战
原生JavaScript写的小游戏——打飞机。游戏有“简单难度”、“中等难度”、“困难难度”、“神附体”四个难度等级。采用都是js的基本语法进行编写,快来玩一玩,玩完了记得学习一下代码哦。下面是游戏截图:快来玩一玩吧点击这里查看源代码下载链接许你一城个人博客...原创 2018-03-06 09:54:37 · 262 阅读 · 0 评论 -
无缝轮播——改ul的marginLeft
轮播图几乎存在于每个网站的主页。轮播图的实现方法有很多种,比如改变img的display、img的opacity或者改变ul的marginLeft达到无缝轮播等等。今天给大家介绍最后那种方法——无缝轮播。如下两张图是无缝轮播的实现原理。通过定位把li中的图片拼成一长条,div#pic设置了overflow:hidden;致使只有一张图片显示,JS控制ul的marginLeft来移动ul,从而显示不...原创 2018-03-08 19:51:02 · 353 阅读 · 0 评论 -
轮播——改img的display
轮播图几乎存在于每个网站的主页。轮播图的实现方法有很多种,比如改变img的display、img的opacity或者改变ul的marginLeft达到无缝轮播等等。今天给大家介绍“改变img的display”这种方法。这种方法的实现原理是如此的简单,如下图:把div#pic的定位设置为position:relative;而div#pic中的5个img的定位设置为position:absolute;...原创 2018-03-08 19:47:40 · 654 阅读 · 0 评论 -
JS小数取整以及保留小数点后两位
一、取整 1.丢弃小数部分,保留整数部分 js:parseInt(7/2) 2.向上取整,有小数就整数部分加1 js: Math.ceil(7/2) 3,四舍五入. js: Math.round(7/2) 4,向下取整 js: Math.floor(7/2)二、保留小数点后两位 1、会四舍五入 var num =2.446242342; num = num.toFi...原创 2018-03-08 19:45:52 · 10398 阅读 · 0 评论 -
canvas背景二
完整文章、源代码下载请点击这里许你一城个人博客原创 2018-03-08 19:35:59 · 168 阅读 · 0 评论 -
canvas背景一
完整文章、源代码下载请点击这里许你一城个人博客原创 2018-03-08 19:34:12 · 272 阅读 · 0 评论 -
3D爱心的制作
之前有看到过很多基于HTML5或者CSS3制作的爱心动画,不过基本上都是2D平面的,今天在国外的网站上看到一个基于HTML5 3D的爱心动画,对于HTML5爱好者来说,不免兴奋了一把。下面将分享一下这个3D爱心动画的实现过程,可以一起来看看。如何实现呢?其实3D爱心上的每一根线条就是一个<div class="rib1"></div>,通过设置border相关属性就可以变成...原创 2018-03-08 19:28:39 · 971 阅读 · 0 评论 -
基于时间或速度的JS运动框架
JQuery要实现动画,那是相当的简单啊,现成的函数可以用。那么Javascript如何实现动画呢?哎呀,其实也是so easy啊,也许你没想过如何实现,因为JQuery太给力了、甚至CSS3就可以实现完美动画。今天就教教大家如何实现。实现原理是:动画嘛,不就是一帧一帧的变嘛,打个比方,div元素的width由300px变成400px,那就让它依次变化:305px、310px、315px、320p...原创 2018-03-29 17:14:50 · 300 阅读 · 0 评论