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

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

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

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

  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母体。所有的东西多是渲染上去呢?还是增加母体的轮廓性或者说血肉,脚本只是去操作控制。。。。。。。

贴一张兼容的图:

关于opacity的思考的更多相关文章

  1. animation-fill-mode的一些思考

    animation-fill-mode是css3动画的一个属性,它能够控制元素在动画执行前与动画完成后的样式.一个带有延迟,并且按正常方向执行的动画(正常方向是指从0%运行到100%),执行一次的过程 ...

  2. “canvas画布仿window系统自带画图软件"项目的思考

    "canvas画布仿window系统自带画图软件"项目的思考 首先贴上DEMO图,并没有美化效果.对UI有要求的,请自带补脑技术. 思考一 在做项目的过程中,我发现"工具 ...

  3. $2015 武汉森果公司web后端开发实习日记----书写是为了更好的思考

    找暑期实习,3月份分别投了百度和腾讯的实习简历,都止步于笔试,总结的主要原因有两点:基础知识不扎实,缺乏项目经验.后来到拉勾网等网站上寻找实习,看了很多家,都还是处于观望状态.后来参加了武汉实习吧在大 ...

  4. z-index失效原因分析——由一个bug引发的对层叠上下文和z-index属性的深度思考

    新年刚开工就被一个bug虐得整个人都不好了,特地记录下. (一)bug描述 在一个fixed-data-table(一个React组件)制作的表格中,需要给表头的字段提示的特效,所以做了一个提示层,但 ...

  5. 领域驱动和MVVM应用于UWP开发的一些思考

    领域驱动和MVVM应用于UWP开发的一些思考 0x00 起因 有段时间没写博客了,其实最近本来是根据梳理的MSDN上的资料(UWP开发目录整理)有条不紊的进行UWP学习的.学习中有了心得体会或遇到了问 ...

  6. 关于面试题 Array.indexof() 方法的实现及思考

    这是我在面试大公司时碰到的一个笔试题,当时自己云里雾里的胡写了一番,回头也曾思考过,最终没实现也就不了了之了. 昨天看到有网友说面试中也碰到过这个问题,我就重新思考了这个问题的实现方法. 对于想进大公 ...

  7. 关于 CSS 反射倒影的研究思考

    原文地址:https://css-tricks.com/state-css-reflections 译者:nzbin 友情提示:由于演示 demo 的兼容性,推荐火狐浏览.该文章篇幅较长,内容庞杂,有 ...

  8. 关于.NET参数传递方式的思考

    年关将近,整个人已经没有了工作和写作的激情,估计这个时候很多人跟我差不多,该相亲的相亲,该聚会喝酒的聚会喝酒,总之就是没有了干活的心思(我有很多想法,但就是叫不动我的手脚,所以我只能看着别人在做我想做 ...

  9. 使用NUnit为游戏项目编写高质量单元测试的思考

    0x00 单元测试Pro & Con 最近尝试在我参与的游戏项目中引入TDD(测试驱动开发)的开发模式,因此单元测试便变得十分必要.这篇博客就来聊一聊这段时间的感悟和想法.由于游戏开发和传统软 ...

随机推荐

  1. Spring 单例 httprequest 线程安全

    @Autowired HttpServletRequest之所以线程安全是因为, httpsevletRequest 储存在 RequestContextHolder中. 每次http请求的doXXX ...

  2. CSUOJ 1162 Balls in the Boxes 快速幂

    Description Mr. Mindless has many balls and many boxes,he wants to put all the balls into some of th ...

  3. Win7/Win10下搭建Go语言开发环境

    1 下载适合window版本的Go安装包,下载地址http://code.google.com/p/go/downloads/list 2 下载适合window本本的LiteIDE,下载后解压即可使用 ...

  4. Kubernetes1.3:POD生命周期管理

    转:http://blog.csdn.net/horsefoot/article/details/52324830 (一)  核心概念 Pod是kubernetes中的核心概念,kubernetes对 ...

  5. dataTransfer 对象

    dataTransfer 对象 提供了对于预定义的剪贴板格式的访问,以便在拖曳操作中使用. DHTML元素属性列表 属性 描述 dropEffect 设置或获取拖曳操作的类型和要显示的光标类型. ef ...

  6. Jquery API学习笔记

    学习网站 JQuery API 中文网: http://www.jquery123.com/ 学习一遍API可以更熟练的运用jquery并且拓展思路. 这里只挑选了一些我认为在开发中会用到的一些API ...

  7. BZOJ.3489.A simple rmq problem(主席树 Heap)

    题目链接 当时没用markdown写,可能看起来比较难受...可以复制到别的地方看比如DevC++. \(Description\) 给定一个长为n的序列,多次询问[l,r]中最大的只出现一次的数.强 ...

  8. Sublime Text2 默认语言(windows/unix)设置,Sublime插件大全

    Sublime默认系统语言设置 Sublime Text 2默认使用的就是UTF8,这个UTF8模式使用的是不带BOM的,如果要修改这个配置,到Perference->Settings-User ...

  9. SCP用法

    scp [-1246BCpqrv] [-c cipher] [-F ssh_config] [-i identity_file] [-l limit] [-o ssh_option] [-P port ...

  10. spring---aop(8)---Spring AOP中optimize

    写在前面 optimize是ProxyConfig的属性.意思为 是否对生产代理策略使用优化. public class ProxyConfig implements Serializable { p ...