博客园 - Jess_喵
uuid:6cbd1ba2-f883-4c34-aed1-30dde64a3a3e;id=698577
2017-04-30T13:44:48Z
Jess_喵
https://www.cnblogs.com/zhangwenjiajessy/
feed.cnblogs.com
https://www.cnblogs.com/zhangwenjiajessy/p/6476197.html
网页引入特殊字体的几种方案 - Jess_喵
网页使用的字体需要受制于操作系统,如果用户的操作系统没有安装某个字体,网页则会退而求其次的使用系统自带的字体。 因此我们并不能随便使用一些好看的字体,只能选用一些安全字体。比如:Helvetica,Arial,宋体,微软雅黑,如果能在网页上使用好看的字体就好了~ 可是引入字体对于英文来说,是合适的,
2017-02-27T12:48:00Z
2017-02-27T12:48:00Z
Jess_喵
https://www.cnblogs.com/zhangwenjiajessy/
【摘要】网页使用的字体需要受制于操作系统,如果用户的操作系统没有安装某个字体,网页则会退而求其次的使用系统自带的字体。 因此我们并不能随便使用一些好看的字体,只能选用一些安全字体。比如:Helvetica,Arial,宋体,微软雅黑,如果能在网页上使用好看的字体就好了~ 可是引入字体对于英文来说,是合适的, <a href="https://www.cnblogs.com/zhangwenjiajessy/p/6476197.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/zhangwenjiajessy/p/6246021.html
几个有趣的WEB设备API(二) - Jess_喵
web api
2017-01-03T15:58:00Z
2017-01-03T15:58:00Z
Jess_喵
https://www.cnblogs.com/zhangwenjiajessy/
【摘要】web api <a href="https://www.cnblogs.com/zhangwenjiajessy/p/6246021.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/zhangwenjiajessy/p/6240918.html
几个有趣的WEB设备API 前端提高B格必备(一)——电池状态&震动api - Jess_喵
受到同事启发,突然发现了几个有趣又实用的web api,没想到前端还有这么多有趣的东西可以玩~~简直过分。 1.电池状态API navigator.getBattery():这个api返回的是一个promise对象,会给出一个BatteryManager对象,对象中包含了:设备是否在充电,电量,以及
2017-01-03T06:10:00Z
2017-01-03T06:10:00Z
Jess_喵
https://www.cnblogs.com/zhangwenjiajessy/
【摘要】受到同事启发,突然发现了几个有趣又实用的web api,没想到前端还有这么多有趣的东西可以玩~~简直过分。 1.电池状态API navigator.getBattery():这个api返回的是一个promise对象,会给出一个BatteryManager对象,对象中包含了:设备是否在充电,电量,以及 <a href="https://www.cnblogs.com/zhangwenjiajessy/p/6240918.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/zhangwenjiajessy/p/6168420.html
html5 canvas常用api总结(三)--图像变换API - Jess_喵
canvas的图像变换api,可以帮助我们更加方便的绘画出一些酷炫的效果,也可以用来制作动画。接下来将总结一下canvas的变换方法,文末有一个例子来更加深刻的了解和利用这几个api。 1.画布旋转api 这里要先了解另一个api translate(x,y):重新定义画布上(0,0)的位置。 首先
2017-01-02T15:50:00Z
2017-01-02T15:50:00Z
Jess_喵
https://www.cnblogs.com/zhangwenjiajessy/
【摘要】canvas的图像变换api,可以帮助我们更加方便的绘画出一些酷炫的效果,也可以用来制作动画。接下来将总结一下canvas的变换方法,文末有一个例子来更加深刻的了解和利用这几个api。 1.画布旋转api 这里要先了解另一个api translate(x,y):重新定义画布上(0,0)的位置。 首先 <a href="https://www.cnblogs.com/zhangwenjiajessy/p/6168420.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/zhangwenjiajessy/p/6160271.html
html5 canvas常用api总结(二)--绘图API - Jess_喵
canvas可以绘制出很多奇妙的样式和美丽的效果,通过几个简单的api就可以在画布上呈现出千变万化的效果,还可以制作网页游戏,接下来就总结一下和绘图有关的API。 绘画的时候canvas相当于画布,而context相当于画笔。 1.绘制线条 moveTo(x0,y0):把当前画笔(ictx)移动到(
2016-12-11T11:21:00Z
2016-12-11T11:21:00Z
Jess_喵
https://www.cnblogs.com/zhangwenjiajessy/
【摘要】canvas可以绘制出很多奇妙的样式和美丽的效果,通过几个简单的api就可以在画布上呈现出千变万化的效果,还可以制作网页游戏,接下来就总结一下和绘图有关的API。 绘画的时候canvas相当于画布,而context相当于画笔。 1.绘制线条 moveTo(x0,y0):把当前画笔(ictx)移动到( <a href="https://www.cnblogs.com/zhangwenjiajessy/p/6160271.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/zhangwenjiajessy/p/6158131.html
canvas与html5实现视频截图功能 - Jess_喵
这段时间一直在研究canvas,突发奇想想做一个可以截屏视频的功能,然后把图片拉去做表情包,哈哈哈哈哈哈~~ 制作方法: 1.在页面中加载视频 在使用canvas制作这个截图功能时,首先必须保证页面上已经加载完成了这个视频,这样才能够方便的对其操作。如果使用下面直接嵌入<video>标签的方式: 在
2016-12-10T16:06:00Z
2016-12-10T16:06:00Z
Jess_喵
https://www.cnblogs.com/zhangwenjiajessy/
【摘要】这段时间一直在研究canvas,突发奇想想做一个可以截屏视频的功能,然后把图片拉去做表情包,哈哈哈哈哈哈~~ 制作方法: 1.在页面中加载视频 在使用canvas制作这个截图功能时,首先必须保证页面上已经加载完成了这个视频,这样才能够方便的对其操作。如果使用下面直接嵌入<video>标签的方式: 在 <a href="https://www.cnblogs.com/zhangwenjiajessy/p/6158131.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/zhangwenjiajessy/p/6154703.html
前端制作动画的几种方式(css3,js) - Jess_喵
制作动态的网页是是前端工程师必备的技能,很好的实现动画能够极大的提高用户体验,增强交互效果,那么动画有多少实现方式,一直对此有选择恐惧症的我就总结一下,以便在开发的时候选择最好的实现方式。 1.css的transition。 语法: transition抓住了所设置变化属性的起始态和完成态,通过设定
2016-12-09T18:53:00Z
2016-12-09T18:53:00Z
Jess_喵
https://www.cnblogs.com/zhangwenjiajessy/
【摘要】制作动态的网页是是前端工程师必备的技能,很好的实现动画能够极大的提高用户体验,增强交互效果,那么动画有多少实现方式,一直对此有选择恐惧症的我就总结一下,以便在开发的时候选择最好的实现方式。 1.css的transition。 语法: transition抓住了所设置变化属性的起始态和完成态,通过设定 <a href="https://www.cnblogs.com/zhangwenjiajessy/p/6154703.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/zhangwenjiajessy/p/6135123.html
用神奇的currentColor制作简洁的颜色动画效果 - Jess_喵
先上一个兼容性总结图:老版本ie可以直接用复杂方法了,套用某表情包的话: 2016年了,做前端你还考虑兼容IE6?你这简直是自暴自弃! 好了,知道了兼容性,我们可以放心的使用了。 在CSS3中扩展了颜色值包含 currentColor 关键字,相当于元素color属性的计算值,让没有默认继承的子元素
2016-12-05T17:19:00Z
2016-12-05T17:19:00Z
Jess_喵
https://www.cnblogs.com/zhangwenjiajessy/
【摘要】先上一个兼容性总结图:老版本ie可以直接用复杂方法了,套用某表情包的话: 2016年了,做前端你还考虑兼容IE6?你这简直是自暴自弃! 好了,知道了兼容性,我们可以放心的使用了。 在CSS3中扩展了颜色值包含 currentColor 关键字,相当于元素color属性的计算值,让没有默认继承的子元素 <a href="https://www.cnblogs.com/zhangwenjiajessy/p/6135123.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/zhangwenjiajessy/p/6132201.html
邮件中嵌入html中要注意的样式 - Jess_喵
工作中常会有需求向用户发送邮件,需要前端工程师来制作html格式的邮件,但是由于邮件客户端对样式的支持有限,要兼容很多种浏览器需要注意很多原则: 1.邮件使用table+css布局 2.邮件主要部分在body内部,所以样式一定要写成内嵌的,不能在head标签中写style,也不能外联。 如: 3.不
2016-12-04T14:28:00Z
2016-12-04T14:28:00Z
Jess_喵
https://www.cnblogs.com/zhangwenjiajessy/
【摘要】工作中常会有需求向用户发送邮件,需要前端工程师来制作html格式的邮件,但是由于邮件客户端对样式的支持有限,要兼容很多种浏览器需要注意很多原则: 1.邮件使用table+css布局 2.邮件主要部分在body内部,所以样式一定要写成内嵌的,不能在head标签中写style,也不能外联。 如: 3.不 <a href="https://www.cnblogs.com/zhangwenjiajessy/p/6132201.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/zhangwenjiajessy/p/6130658.html
css居中div的几种常用方法 - Jess_喵
在开发过程中,很多需求需要我们居中一个div,比如html文档流当中的一块div,比如弹出层内容部分这种脱离了文档流等。不同的情况有不同的居中方式,接下来就分享下一下几种常用的居中方式。 1.text-align:center方式 代码: 这种方式可以水平居中块级元素中的行内元素,如inline,i
2016-12-04T05:21:00Z
2016-12-04T05:21:00Z
Jess_喵
https://www.cnblogs.com/zhangwenjiajessy/
【摘要】在开发过程中,很多需求需要我们居中一个div,比如html文档流当中的一块div,比如弹出层内容部分这种脱离了文档流等。不同的情况有不同的居中方式,接下来就分享下一下几种常用的居中方式。 1.text-align:center方式 代码: 这种方式可以水平居中块级元素中的行内元素,如inline,i <a href="https://www.cnblogs.com/zhangwenjiajessy/p/6130658.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/zhangwenjiajessy/p/6108123.html
html5 与视频 - Jess_喵
1.视频支持格式。 有3种视频格式被浏览器广泛支持:.ogg,.mp4,.webm. Theora+Vorbis=.ogg (Theora:视频编码器,Vorbis:音频编码器) H.264+$$$=.mp4 (H.264:高清视频标准) VP8+Vorbis=.webm(webm是新的开源视频标准
2016-11-27T19:58:00Z
2016-11-27T19:58:00Z
Jess_喵
https://www.cnblogs.com/zhangwenjiajessy/
【摘要】1.视频支持格式。 有3种视频格式被浏览器广泛支持:.ogg,.mp4,.webm. Theora+Vorbis=.ogg (Theora:视频编码器,Vorbis:音频编码器) H.264+$$$=.mp4 (H.264:高清视频标准) VP8+Vorbis=.webm(webm是新的开源视频标准 <a href="https://www.cnblogs.com/zhangwenjiajessy/p/6108123.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/zhangwenjiajessy/p/6108090.html
html5 canvas常用api总结(一) - Jess_喵
1.监听浏览器加载事件。 window.addEventListener("load",eventWindowLoaded,false); load事件在html页面加载结束时发生。 第三个参数设置函数是否在事件传递到DOM对象树的底层对象之前捕捉此种类型的事件。 2.引入canvas方法 <can
2016-11-27T17:36:00Z
2016-11-27T17:36:00Z
Jess_喵
https://www.cnblogs.com/zhangwenjiajessy/
【摘要】1.监听浏览器加载事件。 window.addEventListener("load",eventWindowLoaded,false); load事件在html页面加载结束时发生。 第三个参数设置函数是否在事件传递到DOM对象树的底层对象之前捕捉此种类型的事件。 2.引入canvas方法 <can <a href="https://www.cnblogs.com/zhangwenjiajessy/p/6108090.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/zhangwenjiajessy/p/6092188.html
手动制作微信h5分享活动页面 - Jess_喵
现在网上有很多自动制作h5宣传页的网站,可以通过传图,点几下鼠标就可以制作一个集动画、生产二维码等各种功能于一身的h5微信宣传页。对于运营来讲,非常方便,没有技术门槛,不足之处就是只有特定的动画效果,而且生成的h5带有这个网站自己的logo也好,自己的打点代码也好,总之,看个人爱好啦~ 作为一个正在
2016-11-22T16:18:00Z
2016-11-22T16:18:00Z
Jess_喵
https://www.cnblogs.com/zhangwenjiajessy/
【摘要】现在网上有很多自动制作h5宣传页的网站,可以通过传图,点几下鼠标就可以制作一个集动画、生产二维码等各种功能于一身的h5微信宣传页。对于运营来讲,非常方便,没有技术门槛,不足之处就是只有特定的动画效果,而且生成的h5带有这个网站自己的logo也好,自己的打点代码也好,总之,看个人爱好啦~ 作为一个正在 <a href="https://www.cnblogs.com/zhangwenjiajessy/p/6092188.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/zhangwenjiajessy/p/5716529.html
Bootstrap人民币玩家攻略 - Jess_喵
用bootstrap及其它基于它的框架,做了多次网站大改版~对bootstrap的特点有了越来越深的了解~从一开始接触时觉得超级鸡肋,到后来觉得方便,再到后来觉得还是能不用就别用了~为什么这么说?我们先看用法。 1.使用前的准备。 bootstrap是基于jquery的,所以在引用bootstrap
2016-07-28T14:40:00Z
2016-07-28T14:40:00Z
Jess_喵
https://www.cnblogs.com/zhangwenjiajessy/
【摘要】用bootstrap及其它基于它的框架,做了多次网站大改版~对bootstrap的特点有了越来越深的了解~从一开始接触时觉得超级鸡肋,到后来觉得方便,再到后来觉得还是能不用就别用了~为什么这么说?我们先看用法。 1.使用前的准备。 bootstrap是基于jquery的,所以在引用bootstrap <a href="https://www.cnblogs.com/zhangwenjiajessy/p/5716529.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/zhangwenjiajessy/p/5620796.html
一场么有高端起来的改版~ - Jess_喵
事情是这个样子的,我们要说道年前了~ 是的没错,我要开始讲故事了~ 年前产品经理说想把我们的随便网站改个版~~ 不是什么大的网站,就是一个功能复杂,提交应用的往助手上推的面向10万+cp,每天PV也就斤百万的小网站而已~ 而这个简单的改版,我竟然在上周四才全部上线,你敢信?作为一个因为各种原因拖延至
2016-06-27T11:10:00Z
2016-06-27T11:10:00Z
Jess_喵
https://www.cnblogs.com/zhangwenjiajessy/
【摘要】事情是这个样子的,我们要说道年前了~ 是的没错,我要开始讲故事了~ 年前产品经理说想把我们的随便网站改个版~~ 不是什么大的网站,就是一个功能复杂,提交应用的往助手上推的面向10万+cp,每天PV也就斤百万的小网站而已~ 而这个简单的改版,我竟然在上周四才全部上线,你敢信?作为一个因为各种原因拖延至 <a href="https://www.cnblogs.com/zhangwenjiajessy/p/5620796.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/zhangwenjiajessy/p/5204353.html
零基础前端攻城狮养成计划 - Jess_喵
本喵至今已经做了一年半的前端了,还不能自封前端大牛,但是也算是入门了~这段时间里,从一个测试实习生到写文案,到成为一枚前端实习并入职正式工作一年。对于前端知识来讲可以说是从0开始了~得到过大牛们指点,踩过很多坑,自己也在不断的摸索着,学习着,成长着。 先说说自己目前的技术能力,给想要入门前端的小白们
2016-02-20T18:03:00Z
2016-02-20T18:03:00Z
Jess_喵
https://www.cnblogs.com/zhangwenjiajessy/
【摘要】本喵至今已经做了一年半的前端了,还不能自封前端大牛,但是也算是入门了~这段时间里,从一个测试实习生到写文案,到成为一枚前端实习并入职正式工作一年。对于前端知识来讲可以说是从0开始了~得到过大牛们指点,踩过很多坑,自己也在不断的摸索着,学习着,成长着。 先说说自己目前的技术能力,给想要入门前端的小白们 <a href="https://www.cnblogs.com/zhangwenjiajessy/p/5204353.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/zhangwenjiajessy/p/4333316.html
一个简单页面的背后的一大串交互和兼容问题 - Jess_喵
前几天本前端小虾切了一个炒鸡简单的页面:http://dev.360.cn/mod/h5对!你没有看错,这个界面除了第二部分鼠标滑过的特效和点击申请接入部分的弹框表单之外,其他部分毫无难度,就是这么一张页面……把本小虾大大的整了一遍,所以小虾和大牛之间的差距绝不仅是物种上的不同!首先是制作时间的估计...
2015-03-13T14:43:00Z
2015-03-13T14:43:00Z
Jess_喵
https://www.cnblogs.com/zhangwenjiajessy/
【摘要】前几天本前端小虾切了一个炒鸡简单的页面:http://dev.360.cn/mod/h5对!你没有看错,这个界面除了第二部分鼠标滑过的特效和点击申请接入部分的弹框表单之外,其他部分毫无难度,就是这么一张页面……把本小虾大大的整了一遍,所以小虾和大牛之间的差距绝不仅是物种上的不同!首先是制作时间的估计... <a href="https://www.cnblogs.com/zhangwenjiajessy/p/4333316.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/zhangwenjiajessy/p/4300021.html
藏獒 - Jess_喵
作为狼,它们的意识始终是明确的:自己的目的永远是食物而不是搏杀,而获取食物的目的又是为了保存自己。为了“保存自己”这个最根本的目的,它们能不搏杀就不搏杀,尤其是面对藏獒的时候,它们的态度变得格外功利而务实,绝不会离开对食物的贪婪和算计而有任何虚妄的举动。追随是领袖的基础,培养追随者是做领袖之前必不可...
2015-02-25T11:41:00Z
2015-02-25T11:41:00Z
Jess_喵
https://www.cnblogs.com/zhangwenjiajessy/
【摘要】作为狼,它们的意识始终是明确的:自己的目的永远是食物而不是搏杀,而获取食物的目的又是为了保存自己。为了“保存自己”这个最根本的目的,它们能不搏杀就不搏杀,尤其是面对藏獒的时候,它们的态度变得格外功利而务实,绝不会离开对食物的贪婪和算计而有任何虚妄的举动。追随是领袖的基础,培养追随者是做领袖之前必不可... <a href="https://www.cnblogs.com/zhangwenjiajessy/p/4300021.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/zhangwenjiajessy/p/4201737.html
css透明设置 - Jess_喵
#op{filter:alpha(opacity=50);/*IE 6 &IE7*/-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";/*IE8*/-moz-opacity:0.5;/*用于旧版火狐浏览器*/-khtml...
2015-01-04T09:52:00Z
2015-01-04T09:52:00Z
Jess_喵
https://www.cnblogs.com/zhangwenjiajessy/
【摘要】#op{filter:alpha(opacity=50);/*IE 6 &IE7*/-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";/*IE8*/-moz-opacity:0.5;/*用于旧版火狐浏览器*/-khtml... <a href="https://www.cnblogs.com/zhangwenjiajessy/p/4201737.html" target="_blank">阅读全文</a>