首页 > 代码库 > 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 切片总结(待学习…)