150109 切片总结（待学习…）

 

1，图形色彩渐变产生的虚框（虚光晕）处理：

• 背景图实现（设计尽可能调整融合成合适效果）
• css3实现（色彩知识学习）

2，网页视频插入方案：

• 上传至云端（比如优酷），再进行html插入（收费）
• 使用html5的视频标签（不兼容老式浏览器，如IE8-）
• 调用视频插件（待研究）

3，ps打开效果与jpg不一致处理：

• 让ui针对不同的局部切图
• 统一设计与切片软件及版本

4，浏览器测试

• 以自我的工作经验处理（关注实时的浏览器使用占比）
• 以项目初始的约定处理

 

新知识：

1【js插件】SuperSlide

致力于解决网站大部分特效展示问题。

网站上常用的“焦点图/幻灯片”“Tab标签切换”“图片滚动”“无缝滚动”等只需要一个SuperSlide即可解决！

官网：http://www.superslide2.com/index.html

 

2【HTML5+js】控制关闭播放视频

HTML5 video 对象提供可以用于通过 JavaScript 控制播放的方法、属性以及事件。

参考文档：

http://msdn.microsoft.com/zh-cn/library/hh924823(v=vs.85).aspx

http://www.php100.com/html/program/html5/2013/0905/5439.html（jQ）

研究：

低版本视频的嵌入与控制？

ie9视频弹出框后未显示（自动播放会显示）？

 

3【CSS3】径向渐变

参考文档：

http://www.w3cplus.com/css3/new-css3-radial-gradient.html

http://www.jb51.net/css/151370.html 

 

4【js】回到顶部

判断浏览器窗口的滚动：

window.onscroll = function () {

    var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;

    if (scrollTop > 690) {

　　//当滚动到690px时执行……      

    }

}

参考文档：

http://www.jb51.net/article/31423.htm

 

5【css】font的简写

 

6【CSS3】阴影

 

07【CSS3】图标旋转

运用a标签的hover可实现放上去旋转，移除再转回去的效果。

a{transform:rotate(0deg); transition: 1s ease all;}

a:hover{transform:rotate(225deg); transition: 1s ease all;} /* 225deg 旋转角度根据实际情况调整设定 */

 

8【软件】Setuna

用官方的话说，它"可以快速切下屏幕的部分"（裁切多次）。裁切处会始终保持在屏幕前的位置。
 

9【css】IE7兼容

font-size:0; 要与  line-height:0; 一起使用才能隐藏IE7的文字内容。