html+css+js
晨夕_love
地球上一个超级渺小的前端码农,希望能够学到更多的知识,请大家多多指点。
展开
-
瀑布流布局
很早以前我就想自己学写一下瀑布流布局,可是由于懒神来找我聊天咯,所以推迟咯很久直到今天我才来写瀑布流布局。由于鄙人的js还有很大的提升空间,所以我是先看咯一下那些大神的具体讲解和分析,然后才开始着手写的,收获那是杠杠的。原创 2016-07-13 15:09:08 · 609 阅读 · 1 评论 -
jQuery自己编写插件()
引言: 在项目中不同页面经常要用到已经写好的交互,比如弹窗,比如下拉菜单,比如选项卡,比如删除...此时如果每次都把代码copy一份无疑是一件比较麻烦并且无趣的事情,而且个人认为有些low了,我们可是要追寻高大上的90后有为青年呢~可是该如何高大上呢?这时jQuery自定义插件开发来了,第一次听到插件开发觉得如此happy,遂动手网上查找资料进行学习,如下,我用自己的语言转载 2016-08-16 16:19:19 · 9209 阅读 · 2 评论 -
模拟支付宝支付
以前在我没有编写设置支付密码的时候,以为这种效果(js)很好实现,结果当我做的时候布局到时很简单,可是在用js的时候弄的我一个头是两个大。第一次我是用一个input框,然后设置input的最大长度为6,然后用letter-space设置间距,和设计图例的样式完全不对不说,每一次输入到最后一个的时候,input框文字始终要往前面退一格。第二次写的时候我是设置6个input密码框,忽略到咯手机原创 2017-02-14 15:29:20 · 2649 阅读 · 0 评论 -
推广一个良好的拼接带格式字符串的方法
带格式是指,像普通的HTML文档一样,有缩进,有换行,有空格,这种字符串更便于阅读。大家拼innerHTML的时候,巴不得越容易阅读越好。JS拼字符串,一般喜欢用+。如果想要很多行拼在一起,且方便阅读,一般的做法是:123456789101112var s = '' + '' +''转载 2017-02-08 16:42:20 · 576 阅读 · 0 评论 -
loading css3动画
现在很多的网站网页在加载的时候都有一个加载的动画标识,有些事用gif动画图片,有些使用存css3写的,还有一些是使用js实现的,今天我就来用存css3来写一个加载的动画效果。该效果使用咯css3的transform 里面的scale(缩放)、rotate(旋转)、translate(位移),还使用了css3的动画keframes animation。思路:1.定义一个大盒子,来装原创 2017-01-05 17:15:43 · 539 阅读 · 0 评论 -
插件封装(banner)
这个插件是在上一个的基础是进行封装的,这个插件支持水平切换和垂直切换.这里是插件结构;(function(){ //定义插件名称。方便后面调用 $.fn.pluginName = function(options){//options 经常用这个表示有许多个参数。 var defaults = {};//设置一些默认值 //这里就是把原创 2017-01-03 15:42:28 · 1573 阅读 · 0 评论 -
倒计时、计算时间
哈哈,最近我们公司在做双十一的优惠活动项目,现在距离双十一还有几天,所以我们需要做一个倒计时的功能,很荣幸的我完成咯这项艰巨而伟大的任务,以前我在做Date()的时候老是把getDay( )(一周中的某一天)、getTime()(返回1970年1月1日至今的毫秒数)、getDate()(返回一个月(0-31)之间的某一天)记混淆,但是自从我把这个做咯以后,我就已经明确知道他们之间的意义咯,再也不会原创 2016-11-09 15:45:20 · 2893 阅读 · 0 评论 -
canvas绘制可爱猫咪
有没有萌到你呢?转载 2016-11-09 15:22:20 · 2130 阅读 · 0 评论 -
Less学习收获
LESS 做为 CSS 的一种形式的扩展,它并没有阉割 CSS 的功能,而是在现有的 CSS 语法上,添加了很多额外的功能,所以学习 LESS 是一件轻而易举的事情,果断学习之!变量很容易理解:@nice-blue: #5B83AD;@light-blue: @nice-blue + #111;#header { color: @light-blue; }输出:转载 2016-10-10 15:07:25 · 432 阅读 · 1 评论 -
js拖拽效果
平时遇见过很多页面上的某一些元素可以跟随鼠标的移动而移动,我觉这个效果特别的好玩,然后我就自己试着写咯一下这个效果,我写的效果页面是一个很简单的,我就定义咯一个div元素,然后鼠标按下去的时候 拖动鼠标,物体就会跟随我鼠标移动而移动,当鼠标放开的时候,物体就停止移动。首先我们在一个页面上添加一个div ,然后给他加上一些修饰的样式。原创 2016-09-12 15:56:36 · 677 阅读 · 1 评论 -
微信网页添加分享到朋友圈、发送好友JS代码
微信公众平台开始支持前端网页,大家可能看到很多网页上都有分享到朋友圈,关注微信等按钮,点击它们都会弹出一个窗口让你分享和关注,这个是怎么实现的呢?今天就给大家讲解下如何在微信公众平台前端网页上添加分享到朋友圈,关注微信号等按钮。 微信内嵌浏览器通过 Mac 远程调试 iPhone 上微信自己的网页,我们可以发现微信内嵌浏览器定义了一个私有 JavaScript 对象:WeixinJ转载 2016-08-09 14:04:53 · 3539 阅读 · 0 评论 -
canvas (smile)
今天我在学习html5新增加的标签——canvas 画布,他像所有的dom对象一样它有自己本身的属性、方法和事件,其中就有绘图的方法,js能够调用它来进行绘图 ,最近在研读《html5与css3权威指南》下面对其中最好玩的canvas的学习做下读书笔记与实验。 context:一直觉得这个翻译成“上下文”真够蛋疼的,context是一个封装了很多绘图功能的对象,获取这个对象的方法原创 2016-08-29 16:16:47 · 472 阅读 · 0 评论 -
JS正则表达式总结
正则需要传参时,必须使用new RegExp();var re = new RegExp('\\b'+sClass+'\\b');-------------------------------------------------------------量词,转义字符:\s : 空格\S : 非空格\d : 数字\D : 非数字\w : 字符(字母转载 2016-08-17 15:02:48 · 455 阅读 · 0 评论 -
干货满满,绝不错过,DOM、BOM 操作超级集合
本章内容:定义节点类型节点关系 选择器样式操作方法style表格操作方法表单操作方法元素节点ELEMENT属性节点attributes文本节点TEXT文档节点 Document位置操作方法定时器弹出框location其它事件操作实例 定义文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口。 节点转载 2016-07-20 16:55:21 · 1512 阅读 · 1 评论 -
轮播图
以后我觉得那些封装轮播的大神很牛逼,所以为咯节约时间和成本,我们大多用都是别人已经封装好的,但是里面包含咯许多我们不需要的代码,这样就会产生代码冗余,所以今天我也试着自己来写一个,当我写完之后,我发觉原来轮播图也不是那么的难的,写的时候一定要先分析,然后才开始着手,这样的话思路才会清晰明了。要点分析:1、首先要在父容器里设置相对定位,图片的容器设置绝对定位。2、除了第一张外的图片都隐藏原创 2016-07-15 10:53:26 · 773 阅读 · 0 评论 -
封装轮播插件
以前写网页遇到轮播的时候,要么是引用别人已经封装好的插件(但是别人分装好的存在在很多大量的代码冗余),要么就是慢吞吞的自己写js,有时候写的布局不一样又要从新写一个js,自从我学习咯写封装的juqery方法之后,我就在自己尝试着封装js,这样以后写的时候我直接把他拉过来,然后修改初始默认值就行。 扩展jQuery插件和方法的作用是非常强大的,它可以节省大量开发时间。;(function($原创 2016-12-26 20:05:30 · 3204 阅读 · 1 评论