首页 > 代码库 > 150109 切片总结(待学习…)
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的文字内容。
150109 切片总结(待学习…)