分类: 前端研究预览模式: 普通 | 列表

测试FontAwesome对于IE8的兼容性

 FontAwesome是字体图标,网页中的小图标,可以不再用图片实现了,而且大小、颜色可以任意控制。

好处多多,详见:http://www.thinkcmf.com


这次主要的测试结论:

1、 FontAwesome可以脱离bootstrap运行;

2、发现FontAwesome在IE8下,可以看到!

3、不好消息--图标显示有时候出不来,要刷新一次才能看到,不知道原因,也可能是因为CDN引用太慢的原因。
 
分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 5688

 swiper.js是手机微场景制作中最常用的框架,功能强大,参数齐全。它在使用loop: true这样的参数时,滑动片将可以首尾连接,即可以循环地滑动场景。

 
但在DOM结构上,会用clone方式,在首尾各增加一个slide单元。跟任何的对象克隆一样,这会带来一些不可预知的问题,比如:
 
1、会将id=**的对象也克隆,使id不再是唯一的,造成控制问题。
2、swiper.activeIndex,即当前激活的滑片号,序列方式会有差别。与初始DOM的对应关系,可能使用swiper.activeLoopIndex更准确一些。此时一定要弄清activeIndex与activeLoopIndex这两个参数的区别,这样方可准确定位DOM对象。
 
 
 
分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 9365

应用于“图片数量多、体积大”页面的预加载,会给浏览者带来较好的用户体验,尤其是企业LOGO的提前显示,会让网站呈现出更完整的品牌形象。

 

点击查看DEMO页

 

优点:

1、未加载完成前,正式页面不显示。

2、自定义加载序列、自定义背景颜色变化、背景透明度。

3、参数灵活、调用较丰富,如以下3种加载画面方式。

4、站长dudu加入了时间线动画机制,可在加载原画面基础上,自定义更丰富的JS动画。

5、加载完毕后给出消息,方便自定义调用事件(如消隐掉加载动画、调用新的进场动画等)。

缺点:

- 进度计算,是以图片加载完成的张数(而不是字节数)来计算的,因此加载数字进程看上去不平均。

本测试范例使用的LOGO加载方式,加载过程中,调用了自定义“小光点向上飞行”的动画,为演示方便,只加载了2张大图,加载完成后,即撤去黑底,播放大图动画。

付费100元,可得到完整程序包,含技术文档,及得到站长技术支持。

本站长支付宝帐号:258754@qq.com

Tags: preloader jquery

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 2364

经测试发现jquery 1.11.1都支持IE8,但jquery2就已经放弃了对IE6-7-8的支持。

因此我决定以后就用这个:
 
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.js"></script>
 
顺便说一下,这个CDN地址包含的库超级多,比什么百度的、360的、新浪的都要多得多了,地址如下:
http://open.bootcss.com/
 
分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 3866

canvas+createjs制作满天星星旋转效果

canvas+createjs+tweenmax制作满天星星旋转效果,效果跟FLASH类似,但完全兼容IOS设备,已经在IPAD上做过测试。这种制作的主要目的,是为了寻找一种可以代替FLASH的动画方式。

查看更多...

Tags: canvas cr&#101;atejs 星星旋转效果

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 5667

HTML世界销售地图-带交互子菜单

 2014年,网站进入HTML的节奏。为了支持IPAD等设备,网站尽量不用FLASH了。FLASH制作的世界地图(点击查看)被淘汰。

我使用HTML+JQUERY,制作了兼容性更好的世界地图。功能点如下:

  • -CSS定义位置点和国旗
  • -自定义下拉菜单
  • -可根据要求,定制弹出菜单或是更多功能
  • -这里有一个本站真实案例:http://www.fasaniceleste.it/cn/Contact.asp
  • -欢迎定制,传播请保留本站域名。

Tags: HTML地图 带交互子菜单

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 2412

在国内的网站上几乎查不到这个问题的解决方法,特此记录一下:

Emmet.sublime-settings的snippets.json文件,是用来自定义进行emmet缩写组合的,这个文件默认是没有的,必须自己建立,文件可以在国外很多网站上下载,我分享一个:

https://github.com/emmetio/emmet/blob/master/snippets.json

而这个文件下载以后,编辑以后,应该放到以下路径:

C:\Users\Administrator\emmet\Emmet.sublime-settings

把c:换成你自己的系统盘,如果没有路径,自己建立一下。

 

Dreamweaver snippets.json路径在此:

C:\Users\your user name\AppData\Roaming\Adobe\Dreamweaver CS6\en_US\Configuration\Commands\Emmet

Tags: sublime text3-emmet自定义

分类:前端研究 | 固定链接 | 评论: 1 | 引用: 0 | 查看次数: 5957

大气页头动画效果重器!

 全屏观看请点击:http://www.contactu.cn/2013/ll/

来自于国外的商业应用,3D/2D效果、组合无限、播放组件定义自由、尺寸自适应、兼容浏览器,几乎完败一切同类应用。

商业应用可联系本站长,QQ:258754

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 2439

 英文原站地址在这里: http://www.unheap.com/section/user-interface/hover/

第1集在这里:http://www.contactu.cn/article.asp?id=136

我就不多写了,只上个索引图

jquery-hover,鼠标感应效果

Tags: jquery-hover 鼠标感应效果

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 3354

注释翻译了一个国外的长页面拖动案例

今年特别流行长页面!加上这些拖动动画,非常之生动。不管你用不用,反正我用了。请拖住滚动条一直往下拉,可以看到各类动画。

 中文注释在demo.js中

 全屏请点击这里查看:http://www.contactu.cn/2013/drag/

 

Tags: 长页面拖动动画

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 2491

花19元购买了SuperSlide v2.1.1代码

SuperSlide v2.1.1 - * 轻松解决网站大部分特效展示问题--这是一套非常好用的页面滚动动画框架。最近我手上三四个网站,都用的是这一套。19元很便宜,因为是人民币!在这里无偿的为作者宣传一下。
 
详尽信息请看官网:http://www.SuperSlide2.com/
 
SuperSlide2
分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 3061

 因为目前手头有一个全屏长画面网站的项目,我想设计成比较流行的长屏+拖动动画形式。于是在网上找插件。unheap.com几乎提供了与拖动有关所有jquery小程序,太赞了!于是我在自己的印象笔记中整理了一下,顺便发布在这里,做为日后自己的一个查找索引,也方便大家来使用。

以下所有内容都来自于unheap的ui-scrolling分支,具体URL是http://www.unheap.com/section/user-interface/scrolling/,如果有翻--墙手段,可能浏览起来更快速一点。unheap只是一个展示索引,各个子程序的说明和下载,都存在各自作者的网站上。

我在下图中做为了说明的,都是我认为比较重要的程序,一些雷同的、作用不大的,就没有做标记了。看图就行了,图的下方, 我把文字说明附加在后,方便大家查找..

 

查看更多...

Tags: 长页面创意 拖动程序 unheap.com jquery scrolling

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 3835

一般情况下的居中对齐是很简单的情况,但是有时候,图片是放置在一个绝对定位(position:absolute)的层中的。这时候的居中对齐就比较麻烦了。

这个jquery小程序就是用来进行居中运算的。

使用方法是:

1、把这段jq代码放置到页面中;

2、需要居中的层加上 class="fc" ,jq程序代码中会自动把目标层加上 position:absolute属性属性,不需要在CSS中再添加。

示例页面见:http://www.contactu.cn/2013/jquery_float_center/

Tags: jquery 绝对定位 水平居中

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 4084