前端小思
文章平均质量分 60
fonglezen
web前端开发妹子一枚
展开
-
配置的一些想法
全局通用的使用统一配置 config.js只在当前页面使用的,只在当前页面声明可在其他页面重复使用的组件,独立为组件文件,再引入原创 2018-03-20 09:50:46 · 136 阅读 · 0 评论 -
javascript查询字符串参数
/* 解析查询字符串 返回包含所有参数的一个对象 */function getQueryStringArgs(){ //取得查询字符串并去掉开头的问号 var qs = (location.search.length > 0 ? location.search.substring(1) : ''); //保存数据的对象 args = {}; //取得每一项原创 2015-01-26 10:07:03 · 1363 阅读 · 0 评论 -
iscrollJs使用zoom插件的时候,图片放大模糊解决办法
一些浏览器(特别是基于webkit的)采取的快照缩放区域就放在硬件合成层(比如当你申请转换)。该快照作为纹理的缩放区域,它几乎不能被更新。这意味着您的纹理将基于 scale 1 进行缩放,将导致文本和图像模糊,清晰度低。一个简单的解决方案是使用实际分辨率双倍(或者三倍)装载内容,然后 放到一个按照scale(0.5)比例缩小的div中。这种方法大多数情况下能适用。参考链接:http原创 2015-02-11 17:16:55 · 4969 阅读 · 0 评论 -
支持IE678的canvas
内容来自javascript权威指南一书,觉得挺有意思,摘录于此:如果所实现的基于Canvas的应用程序必须支持IE678的话,(我觉得没有必要支持的,678在我看来很快就会退出历史舞台)那么有两个选择。1、ExplorerCanvas它可以在老版本的IE浏览器中增加对于Canvas的支持地址:https://code.google.com/p/explorercanv原创 2015-01-04 15:11:22 · 1082 阅读 · 0 评论 -
3D翻转翻页特效之左右翻和上下翻
左右翻codepen地址:http://codepen.io/fonglezen/pen/raWGwg上下翻codepen地址(同理):http://codepen.io/fonglezen/pen/QwGqzz代码直接可在codepen上浏览和下载。基本的思路:1、利用鼠标的滑动或者手指的滑动,来控制图片的左右3D翻滚切换,需要做终端判原创 2015-01-04 11:34:37 · 4794 阅读 · 0 评论 -
判断手机和pc端的不同,事件也不同
判断是否为手机:function isMobile(){ var sUserAgent= navigator.userAgent.toLowerCase(), bIsIpad= sUserAgent.match(/ipad/i) == "ipad", bIsIphoneOs= sUserAgent.match(/iphone os/i) == "iphone o原创 2015-01-04 15:09:32 · 1713 阅读 · 0 评论 -
wampserver如何设置局域网内可访问
刚安装好wampserver,我的版本是WampServer Version 2.5Apache的版本是2.4.9。如果没有特别配置的话,在pc上用localhost或者本地ip或者127.0.0.1都是可以访问的,但是如果你在其它pc或者手机(内网wifi)访问的话,是不可以的,即使用的是192.168.x.x。http://www.mamicode.com/info-det原创 2015-01-20 15:39:41 · 21311 阅读 · 2 评论 -
【笔记】封装可使用的构造函数继承
读书笔记《javascript面向对象编程指南》(YUI)库所用的方法:function extend(Child, Parent) { var F = function(){}; F.prototype = Parent.prototype; Child.prototype = new F(); Ch原创 2015-01-15 10:46:49 · 623 阅读 · 0 评论 -
【笔记】uber--子对象访问父对象的方式
在这之前,toString()所做的仅仅是返回this.name的内容而已,现在新增了额外的任务,检查对象中是否存在this.constructor.uber属性。如果存在,就先调用该属性的toString方法。this.constructor.uber指向当前对象父级原型的引用。因而,当调用Triangle实体的toString方法时,其原型链上所有的toString都会被调用。原创 2015-01-15 10:09:16 · 1597 阅读 · 0 评论 -
【笔记】原来继承的方法有那么多
面对这么多选择,我们应该如何做出正确的选择呢?事实上这取决于我们的设计风格、性能需求、具体项目任务及团队。例如,您是否更习惯于从类的角度来解决问题?那么基于构造器工作模式更适合您。或者您可能只关心该“类”的某些具体实例,那么可能使用基于对象的模式更合适。原创 2015-01-15 15:11:51 · 729 阅读 · 0 评论 -
windows 7上安装django
一、首先得确认你的机器上是否已经安装了python二、下载django(1)方法1:直接从github项目地址中下载zip包,地址是https://github.com/django/django,推荐这个,速度会快一点(2)方法2:如果你不喜欢上面的方式,可以直接用git hub clone的方式,$ git clone git://github.com/django/django.原创 2015-02-27 10:36:35 · 753 阅读 · 0 评论 -
超时调用setTimeout 和 间歇调用setInterval
今天看了javascript高级程序设计(第三版)一书,发现说setTimeout比setInterval更好,觉得的确如此。平时都是用setInterval多点,现在还是转一下思路了。又学习到了。笔记如下:----------------------------------------------------------------------------------------------原创 2015-01-26 09:33:49 · 1300 阅读 · 0 评论 -
把svg的polygon转为path的方法和调整形变的方法
发现自己很久没有写博客了,所以现在每天都提醒自己,今天有什么收获,今天有什么值得记录一下的。这篇博客就来说一下最近有个项目有用到svg地图中遇到的一个问题:设计师导出svg之后,是用的polygon,但是ammap里面的地图是用path去表示的,同时,你转成path之后,svg的大小和偏移量并不符合要求。根据上面的问题,找到了两个方法:演示地址:http://codepen.i原创 2016-01-27 17:36:34 · 7556 阅读 · 0 评论 -
使用FACE++的SDK来做一个颜值计算器
DEMO地址:http://www.gbcphp.com/fly/myface/FACE++的地址:http://www.faceplusplus.com.cn/前记:前段时间,关于人脸识别的应用挺火的,比如检测年龄的啦,还有颜值计算的啦。虽然这些东西都是昙花一现,但是在很多地方应用还是很广的,偶尔一些推广的活动可以结合这些趣味性的应用结合来做。因为不知道是怎么实现的,这里原创 2015-07-20 10:00:15 · 6919 阅读 · 0 评论 -
JS时间戳和正常时间格式转换
JS实现时间戳和正常时间格式转换工具原创 2014-11-10 10:20:41 · 869 阅读 · 0 评论 -
使用HTML5 FILE API上传图片移动端缩略图兼容问题
主要是解决某些浏览器存在base64编码显示不出图片来的问题原创 2015-06-12 15:16:39 · 4394 阅读 · 0 评论 -
用css3解决移动端页面自适应横屏竖屏的思考
之前对于横屏的webapp做过一些尝试,但是始终不是很好的解决方案,前段时间又接触了类似的需求,尝试了感觉更好的解决方案。之前的方法写的博客:移动网页横竖屏兼容适应的一些体会这里举的例子还是平时常见的移动端的滑动页面,也就是上下切换页面的”H5“。原创 2015-06-30 16:07:00 · 19599 阅读 · 1 评论 -
其实canvas真的很简单,复杂的部分其实是你的创意
江湖上流传开来的除了牛叉的"H5",还有牛叉的canvas应用。canvas是html5的一部分,当然他们说的H5也并不是html5的意思,只是表示在手机浏览器中,更侠义的是在微信浏览器中打开的酷炫的网页。曾几何时,我也觉得canvas真的酷爆了,各种什么烟花、酷炫的动画效果、canvas游戏等,都燃烧着我学习的热情。后来通过学习,多看书,其实canvas并不复杂,要用到的东西也不多。原创 2015-06-30 09:18:15 · 2785 阅读 · 0 评论 -
使用grunt来无损压缩图片
作为一个前端工程师,或者web开发工程师,图片是你无法忽视的一个东西,没有一本优化方面的书不会提及图片的优化。pagespeed里面,首当其冲的也是提示你的图片需要优化。原创 2015-06-09 09:28:04 · 4835 阅读 · 1 评论 -
堆叠相册效果,兼容pc和移动端
在手机端,堆叠效果的相册是比较常见的一种图片展示方式,每个人的思路可能会有一些不同,实现的方法不同。本篇博客主要是分享下我的实现方法,欢迎大家提出建议,指出我的不足,先3Q啦~原创 2015-06-02 10:28:03 · 1408 阅读 · 1 评论 -
【笔记】改善javascript程序的188个建议27-33
27、小心if隐藏的BUG(1)if(a = 1){...}把比较运算符错写为赋值运算符。为了防止出现这样低级令人讨厌的错误,建议在条件表达式的比较运算中,把常量写在左侧,把变量写在右侧。这样在你写错的时候,会报错。if( 1 == a){ ... }(2)在if之后添加了分号(;)if(a==1);{...}28、使用查表法提高原创 2015-04-16 13:59:05 · 748 阅读 · 0 评论 -
【笔记】javascript扩展内建对象举例
一、在php中有一个叫做in_array()的函数,主要用于查询数组中是否存在某个特定的值。javascript中则没有一个叫做inArray()的方法。因此,通过Array.prototype来实现一个这样的功能:Array.prototype.inArray = function(needle){ for(var i = 0,len = this.length; i原创 2015-01-14 14:26:52 · 769 阅读 · 0 评论 -
关于新版本微信分享的一些汇总
因为公司的项目主要是在微信上运行的,所以就要接触微信的分享接口等。但是因为微信要处理那些类似于“分享后查看结果”的页面,就把接口给改了,发布了新版本的微信,针对这个问题。新的微信sdk说明文档地址:http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html大概看了一下内容还是挺丰富的,但是:原创 2015-01-10 18:00:23 · 3005 阅读 · 0 评论 -
使用html5 canvas 制作时钟
使用html5+canvas制作一个网页的时钟。canvas clock _fonglezen的前端小站你的破浏览器不支持HTML5,赶紧卸载了吧!!下载最新的浏览器,拥有更好的上网体验! var can = document.getElementById('canvas'); var con = can.getContext('2d');原创 2014-11-10 10:07:50 · 780 阅读 · 0 评论 -
使用canvas制作刮刮卡效果(1)
html代码: css样式:原创 2014-11-10 09:41:07 · 862 阅读 · 0 评论 -
javascript中的sort()
函数的语法:arrayObject.sort(sortby)you think this is not the right way but you love it这里还用到了split函数,目的是去到一个字符串的数组,比较常用。然后通过数组的排序函数sort()对数组内的值进行排序,得到新的数组,然后通过循环输出数组的内容就得到了排序后的字符串。在例子中,默认情况下,它原创 2014-11-10 10:23:18 · 458 阅读 · 0 评论 -
使用xml、php和Ajax实现点赞功能
插件下载地址:mousewheeldemo地址:jquery鼠标滚轮事件插件mousewheel的使用示例代码看demo中的源文件。插件的使用方法是:page.mousewheel(function(event, delta){ if(delta nextfunc(); }else{原创 2014-11-10 10:17:58 · 912 阅读 · 0 评论 -
IE7浏览器不支持body的overflow为hidden的bug解决方法
今天发现IE7浏览器下是不支持body{ overflow:hidden;}的,其实要解决这个问题的方法非常简单 ,只要加上一句:html{ overflow:visible;}就搞定了。原创 2014-11-10 10:18:04 · 567 阅读 · 0 评论 -
视差滚动(Parallax Scrolling)效果的原理和实现
视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验。作为今年网页设计的热点趋势,越来越多的网站应用了这项技术。一、什么是视差滚动? 视差效果,原本是一个天文学术语,当我们观察星空时,离我们远的星星移动速度较慢,离我们近的星星移动速度则较快。 当我们坐在车上向车窗外 看时,也会有这样的感觉,远处的群山似乎原创 2014-11-10 10:12:58 · 1653 阅读 · 0 评论 -
编写可维护的javascript:避免空比较
1、检测原始值:typeof 2、检测引用值:内置的引用类型为:Object、Array、Date、Error使用instanceof检测对于函数和数组来说,都不用instanceof方式检测3、检测函数typeof例如:typeof myFunc === "function" 在IE8原创 2014-11-10 10:11:03 · 670 阅读 · 0 评论 -
编写可维护的javascript:分离配置数据
1、配置数据是写死的值比如:URL,需要展现给用户的字符串,重复的值,设置,任何可能发生变更的值2、把数据放在对象中,eg:var config = { msg:"dfjslfj", sdf:"sdfsdf"};config对象的每个属性都保存了一个数据片段,将配置数据抽离出来以为着任何人都可以修改,不会导致应原创 2014-11-10 10:09:59 · 570 阅读 · 0 评论 -
避免使用全局变量
1、命名冲突2、代码的脆弱性如果全局变量不存在,那么使用全局变量的部分就失效甚至是报错。同样,任何函数如果不经意间修改了全局变量,导致全局变量值的依赖变得不稳定。3、难以测试4、当你给一个未被var语句声明过的变量赋值时,javascript会自动创建一个全局变量。比如: function doSomethin原创 2014-11-10 10:08:48 · 2684 阅读 · 0 评论 -
使用mysql、php和Ajax实现点赞功能
要实现点赞功能,有多种实现方式,本文总结利用Ajax,php和mysql来实现点赞的数据的功能。具体步骤如下:一、写好页面中的HTML代码:0good+10good+10good+10good+1二、写javascript1、实现上面的button的点击事件goodplus var span = document.getElementsByTagName原创 2014-11-10 10:18:56 · 2790 阅读 · 1 评论 -
一个视频告诉你jquery中的animate的stop()的作用
一个视频告诉你stop()的作用:视频中的代码:ul li{ width:50px; height:30px; background:#333; margin-bottom:10px; color:#fff;}wod a wod a wod a wod a wod a $('#flyul li').mouseenter(function(){原创 2014-11-10 10:22:30 · 1110 阅读 · 1 评论 -
【笔记】javascript原型链继承实例
function Shape(){ this.name = 'shape'; this.toString = function(){ return this.name; }}function TwoDShape(){ this.name = '2D shape';}function Triangle(side,height){ this.name = 'Triangle';原创 2015-01-14 21:27:31 · 606 阅读 · 0 评论 -
【笔记】javascript原型属性prototype
在javascript中,函数本身也是一个包含了方法和属性的对象。length返回的是参数的数量。在第4章中,我们已经学习了如何定义构造器函数,并用它来新建(构造)对象。这种做法的主要意图是通过new操作符来调用函数,以达到访问对象this值的目的,然后,构造器就可以将其所创建的对象返回给我们。这样,我们就有了一种赋予新建对象一定功能(即为其添加原创 2015-01-14 13:55:27 · 786 阅读 · 0 评论 -
sass玩转颜色总结笔记
变量:$color:#f00;1、变浅和加深颜色,sass使用HSL标准来变浅或加深颜色lighten($color,10%);darken($color,30%); 2、颜色互补complement(lighten($color,20%));3、反色函数 invert(lig原创 2014-12-24 13:41:46 · 2284 阅读 · 0 评论 -
通过Inkscape导出字体的path路径并通过snap实现素描动画
第一步:首先打开inkscape,使用文字工具在画布中输入你想要得到的文字,比如:第二步:在菜单栏汇总找到路径菜单,然后在下拉菜单中选择对象转化为路径,首先得选中一个对象哟~第三步:另存为SVG文件,然后使用编辑器打开这个SVG文件,找到文字对应的path打开文件后,会发现有很多代码。我们需要的代码其实只是path元素部分。比如上面文字的原创 2015-01-29 10:37:58 · 7291 阅读 · 0 评论 -
逐字显示,并使用callback显示下一行
HTML结构:JS实现:/* lines words */ var w1 = '时光是琥珀', w2 = '泪一滴滴被反锁' w3='情书再不朽', w4='也磨成沙漏', w5='青春的上游', w6='白云飞走苍狗与海鸥',原创 2015-01-29 10:48:59 · 1048 阅读 · 0 评论 -
叶子形状的loading
公司要求换一个loading,然后随便写写,改了下border-radius的参数,发现这个类似叶子形状的挺不错的啊,哈哈~原创 2014-12-18 11:11:35 · 1120 阅读 · 2 评论