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

简单css3-transform鼠标效果

 测试页地址:http://contactu.cn/2015/flower/trf.html

效果比较简单,一般基础都能写出。主要是考虑此类效果比较常用,我自己做了一下思路整理,以便于工作中快速调用

首先是把transition提炼成一个单独的class,这样调用时只要这样写就行了:

XML/HTML代码
  1. .trans  {transition: all 0.5s ease-in-out;}  
  2. .trans03{transition: all 0.3s ease-in-out;}  
  3. .trans08{transition: all 0.8s ease-in-out;}  
  4.   
  5. //调用时这样写  
  6. <div class="tit trans">变化稍慢<br />Y轴转动</div>  

接下是熟悉transform的emmet速写,不熟悉emmet的朋友请自行百度

XML/HTML代码
  1. trf  transform:;  
  2. trf:r  transform: rotate(angle);  
  3. trf:rx  transform: rotateX(angle);  
  4. trf:ry  transform: rotateY(angle);  
  5. trf:rz  transform: rotateZ(angle);  
  6. trf:sc  transform: scale(x, y);  
  7. trf:sc3  transform: scale3d(x, y, z);  
  8. trf:scx  transform: scaleX(x);  

 

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

 基于bs版本: v3.3.4我做了一下定制,主要选择项如下:

定制后,主文件bootstrap.css由139K减少到102K

最后我决定所有的JS文件都不要了,连那仅有的三个勾都没选。

定制地址:http://v3.bootcss.com/customize/

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

六边形-蜂巢形-花瓣形导航菜单

 用于某广告公司的内页导航,在网上搜索了一下,好象没有类似的六边形导航,就自己做了一个。

最关键就是搞清六边形的坐标关系,用一张简图表述:

具体代码请移步此页面:http://www.contactu.cn/2015/flower/

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

测试FontAwesome对于IE8的兼容性

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

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


这次主要的测试结论:

1、 FontAwesome可以脱离bootstrap运行;

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

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

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

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

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

 

点击查看DEMO页

 

优点:

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

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

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

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

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

缺点:

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

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

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

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

Tags: preloader jquery

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

经测试发现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 | 查看次数: 5299

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

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

查看更多...

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

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

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

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

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

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

Tags: HTML地图 带交互子菜单

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

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

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 | 查看次数: 10904

大气页头动画效果重器!

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

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

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

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

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

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

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

jquery-hover,鼠标感应效果

Tags: jquery-hover 鼠标感应效果

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

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

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

 中文注释在demo.js中

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

 

Tags: 长页面拖动动画

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

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

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