关于opacity的思考_html/css_WEB-ITnose

WBOY
풀어 주다: 2016-06-24 11:57:04
원래의
953명이 탐색했습니다.

今天在封装图片轮播的插件的时候,产生了这个opacity的小小思考。

我这个轮播的思路不是以前baidu输入法官网的设置外层容器overflow为hidden,position为relative用setInterval去定义一个循环时间,然后去按照图片的height改变top的值。

而是利用opacity去切换显示对应的图片。

 

这边还是先说说这个opacity的兼容性问题

 

Css代码   

  1. filter:alpha(opacity=60);  
  2. -moz-opacity:0.6;  
  3. opacity:0.6  

 

 我们多知道你在设计轮播的时候还是需要渲染index(右小角或者左小角的角标,至于点击切换还是鼠标移入切换这个,you design),只要满足对应性----每一次轮播切换的时候cur的index对照上就ok.(个人建议在点击或者鼠标移入后给clearTimeout一下重启计算

 

1.  如果你查阅过w3c的文档你会知道(仅用于 IE),

filter属性允许我们向文本和图像添加样式效果(ps:注意使用filter属性,请始终指定元素的宽度

以前有别人写过ie6和ie7设置opacity的时候,此元素必须是“有布局”(意思也就是设置了宽度,严格地化加上position)

 

2.  -moz-opacity:属性是为了兼容Mozilla的早期版本。据说FF0.9就不再要求使用此属性。我的ff 3.6.23就已经直接显示opacity属性了

 

3.  可能有的人还会想起这个-khtml-opacity属性,我这边没有加,因为据说Safari 1.x需要兼容的时候加上。

 

简单地介绍了一下opacity.

插件算是搞定,自己遗留了一个问题,很多人在做插件封装的时候是类似于页面只有一个dom母体。所有的东西多是渲染上去呢?还是增加母体的轮廓性或者说血肉,脚本只是去操作控制。。。。。。。

 

 

    贴一张兼容的图:

 

 

 

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿