网页前端
文章平均质量分 70
我有颗小粒的痣
stay hungry stay foolish
展开
-
大学生的小乐趣:HTML制作MacOS Dock栏
大学生的小乐趣:HTML制作MacOS Dock栏源代码存放在github上:https://github.com/WYKXLDZ/CollegeJoy/tree/master/MacosDock最终效果:MacOS的Dock栏动画顺畅,结构优美,本文基于此,搭建了一个简易的dock栏。有兴趣的同学可以将此部分放在自己的桌面web上,或者将此放在Web应用的功能切换上。实现细节:首先第一点就MacOS常见的高斯模糊,此处采用的方法为加入css样式:background-color: rgba原创 2021-02-24 12:06:48 · 915 阅读 · 0 评论 -
web audio api 振荡器(Oscillation)
web audio api 是一个有趣的东西,它不同于HTML标签中的,它可以自由的编辑音频;所以代码上:try{ var audioCtx = new ( window.AudioContext || window.webkitAudioContext )();}catch(err){ alert("ERROR");}这里是创建AudioContext对象,为了避免以we原创 2017-11-14 21:55:10 · 415 阅读 · 0 评论 -
ScrollMagic+gsap+Webpack的大坑
ScrollMagic是做鼠标滚轮特效的一个框架,效果很好,但是它需要引入gsap(渲染动画)框架。但是webpack不能简单的引入这两个package。会出现很多问题。这里有一个简单且有效的方法,避免复杂的环境搭建。引入第三方包(scrollmagic-plugin-gsap)进行管理配置import * as ScrollMagic from "scrollmagic"; // Or u...原创 2020-04-13 23:51:28 · 648 阅读 · 0 评论 -
音谱可视化:在canvas上做的手脚
波形图的衍生在了解了web audo API的功能之后,我就开始探究可视化图形有什么可以改进的地方了,比如一开始的波形图: 正如上一篇所讲的那样,这里运用的是canvas里的巴塞尔曲线来描绘的,那么描绘巴塞尔曲线的函数参数是什么呢?ctx.moveTo(20,20); ctx.quadraticCurveTo(20,100,200,20); moveTo()函数表示的是曲线的起始点,而qu原创 2017-12-31 12:51:33 · 1012 阅读 · 0 评论 -
NaN的神奇
前言:在弄音谱可视化的时候遇到一些尴尬的问题,不断调试之后才发现是NaN的问题,于是在下通过参考他人的经验与自己敲代码来了解一下NaN;NaN的官方解说: NaN 属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。可以把 Number 对象设置为该值,来指示其不是数字值。提示:请使用 isNaN() 全局函数来判断一个值是否是 NaN 值。 以上来自w3school当然还有大神的解说原创 2017-12-30 22:51:55 · 196 阅读 · 0 评论 -
大学生的小乐趣:html画布制作贪吃蛇小游戏
最终效果:做贪吃蛇游戏需要Html5,部分Css美化,重要的是JavaScript的应用,因为我们主要是运用Html5的Canvas标签来打造游戏的,所以还是在JavaScript上的笔墨较多首先搭建好框架: snake #canvas_frame{ height:500px; width:500px; margin:auto; backg原创 2017-10-29 18:08:50 · 3925 阅读 · 18 评论 -
QQ头像获取 --嘿嘿
QQ 头像获取QQ user picture acquisitionAPI接口:http://q1.qlogo.cn/g?b=qq&nk=QQ号码&s=640原创 2019-08-05 22:03:23 · 1043 阅读 · 0 评论 -
音谱可视化:Audio API开发
效果展示&介绍 本篇的可视化代码主要是根据MIT的2014年2月15日的开源代码修改而来的 MIT音谱可视化->Github MIT音谱可视化图: 进行修改的音谱可视化图 MIT的音频其实是从通过input标签来获取的,存入缓存中.但是其实我们用的比较多的是html5中的Audio标签,所以将其修改过后,便可对audio的src资源进行读取...原创 2018-02-08 10:49:28 · 2390 阅读 · 0 评论 -
用HTML前端技术做一个登入了界面+一些小技巧
效果图先上:所以进入整体:该登入界面只涉及HTML和CSS,暂时不涉及javascript;首先就是壁纸,要想壁纸不重复,而且大小平铺我们可以创建一个div,使div的背景图为整个页面的壁纸:[html] view plain copy body> div id="wapper">div> body> [css]原创 2017-12-11 21:43:27 · 11788 阅读 · 0 评论 -
Css 中的position属性
position属性这个属性定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。JavaScript 语法:object.style.position="absolute"值描述转载 2017-11-09 22:29:44 · 177 阅读 · 0 评论 -
Jquery的引用
jQuery在js的应用还是比较广阔的,据W3school的介绍来说的话,它是写的更少,但做的更多”的轻量级 JavaScript 库。引用的话有两种方式,1)应用本地的jQuery.js文件。下载地址:http://jquery.com/download/2)应用网络上的jQuery.js文件首先就有Google和Microsoft两个选择:转载 2017-10-21 21:05:23 · 503 阅读 · 0 评论 -
关于一个简易的Html5音乐播放器的制作
关于一个简易的Html5音乐播放器的制作原创 2017-10-20 21:25:45 · 15344 阅读 · 6 评论 -
jquery的选择器
元素选择器$("p")//选取元素$("#p")//选取id="p"的元素$(".p")//选取class="p"的元素$("p.class")//选取所有class="class"的元素$("p#id")//选取所有id="id"的元素属性选择器$("[href]") //选取所有带有 href 属性的元素。$("[href='#']") //选取所有带有 href转载 2017-10-21 21:44:55 · 168 阅读 · 0 评论 -
jQuery的事件方法参考手册
方法描述bind()向匹配元素附加一个或更多事件处理器blur()触发、或将函数绑定到指定元素的 blur 事件change()触发、或将函数绑定到指定元素的 change 事件click()触发、或将函数绑定到指定元素的 click 事件dblclick()触发、或将函数绑定到指定元素的 double click转载 2017-10-21 22:07:37 · 168 阅读 · 0 评论 -
jQuery实现网页特效之拖拽元素
效果:代码: $(document).ready(function(){ $("#drag_box").mousedown(function(){ var x = $("#drag_box").css("left").split("px");/*将drag_box的left进行加工 split()返回一个数组*/ v原创 2017-10-22 00:44:08 · 281 阅读 · 1 评论 -
Html5的拖放功能
Html5的拖放也就是(drag 和 drop)是HTML5 标准的组成部分我们可以用js 来实现这样的功能,其中用到了Html Dom 对象 event 当然也有一些事件句柄和Html属性代码上: function allowDrop(ev){//允许放置元素 ev.preventDefault();//阻止默认的状态(不能放置) }原创 2017-10-28 00:35:25 · 644 阅读 · 0 评论