当前的文章分类为: 前端开发

微信小程序:在线电影票网站(入门示例)

微信小程序:在线电影票网站(入门示例)

15

December

2016

微信小程序,可以说是近半年来开发和运营者们讨论最多的话题之一。

自己也尝试入坑玩了一把,感觉还挺有意思,非常适合生活服务和阅读类项目。

对于微信小程序的一些理解 :

小程序正如其名,小/轻,是一套独立封闭程序。

和以往开的发有2个最大不同:无法使用DOM,不基于window、document。所以<div>等HTML标签,都需通过<view><text>等组件来实现,常用的jQuery、Zepto等JS框架也都无法使用。
[ 查看全文... ]

Step by Step 一步步了解SVG

Step by Step 一步步了解SVG

15

July

2016

最近看到篇文章很有同感,很多时候想学习一些东西,会被一堆堆的代码所困扰,很难去读懂和理解。而用一个个小Demo的形式了解起来就更为直观,产生兴趣之后学起东西就自然相对轻松。

Demo1:创建基本形状

SVG 预定义了7个基本元素:circle 创建圆形rect 创建矩形ellipse 创建椭圆line 创建线条polyline 创建折线polygon 创建多边形path 创建路径
其中 path 可进行填充、勾划(沿着路径绘制直线),也可用作剪切路径(其他形状的图样),是所有绘图元素中最复杂的。
[ 查看全文... ]

ublue-ContactsList.js(模拟IOS通讯录列表)

ublue-ContactsList.js(模拟IOS通讯录列表)

12

January

2016

先祝大家新年快乐!作为2016年的开篇,再祝各位单身狗早日托单,已托单的早日生猴子!

前年接触到个移动端项目,需要把相关门店信息以类似IOS(iPhone)联系人列表的形式呈现。左侧是城市列表,右侧是滑动首字母快速查找。
先是去网上搜了下,发现相关资料少之又少,无法满足项目需求。以我性格,改一个差距甚远的代码,不如在条件范围内动手写一个,也利于后期调试、扩展。

可在项目结束之后,感觉这形式的交互效果今后试用范围和需求会不少,便拎出来改为一个独立的插件。 [ 查看全文... ]

Gulp构建前端自动化工作流之:常用插件介绍及使用

Gulp构建前端自动化工作流之:常用插件介绍及使用

26

August

2015

在对Gulp有了一个初步的了解之后,我们开始构建一个较为完整的Gulp开发环境。

本文主要分为6个段落:

  • 1. 构建项目目录结构(Directory Structure Build)
  • 2. 插件介绍及使用方法(Tasks and dependencies)
  • 3. 扩展优化(Extend & Optimize Task)
  • 4. 其他插件介绍(Other plug-ins)
  • 5. 匹配规则(Match Files)
  • 6. 注意事项(Attention)

关于Gulp的入门介绍及安装方法,可先去《Gulp构建前端自动化工作流之:入门介绍及LiveReload的使用》 这篇文章查看。对其有个初步认识后,便于后文的理解。 [ 查看全文... ]

Gulp构建前端自动化工作流之:入门介绍及LiveReload的使用

Gulp构建前端自动化工作流之:入门介绍及LiveReload的使用

23

July

2015

其实这篇内容已躺在我的Evernote里许久,但一直搁置着,今天算是正式见光。

本文主要介绍如何使用Gulp.js,来帮助你构建一个自动化的前端开发流程。总结并归类自身使用中所遇到的方法、问题,便于新人上手和理解,同时也作为一份Gulp参考文档来使用,让你对Gulp有个更深入的了解。

最后,在正文开始前给新人提个醒:随着Gulp版本更新,API已发生了细小变化,目前网上很多文章,都是基于早期版本所写,当你查阅资料时一定要留意一下,否则会给你带来不少麻烦。

注:
本文所使用的工具版本为:Node.js(v0.10.21)、 Ruby(v2.2.1p85)、Gulp(v3.8.11)。
如有疑问欢迎在本文下方留言,或关注我的个人微信号:bluesdream_com
[ 查看全文... ]

优酷视频自动播放代码

优酷视频自动播放代码

24

January

2014

首先获取视频的ID:
youku-video-autoplay-code_img1

添加自动播放代码(方法1):

<embed src="http://player.youku.com/player.php/sid/填写视频ID处/v.swf?VideoIDS=填写视频ID处&embedid=&isAutoPlay=true&embedid" allowFullScreen="true" quality="high" width="426" height="341" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>

[ 查看全文... ]

无觅相关文章插件,快速提升流量