今天在封装图片轮播的插件的时候,产生了这个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. JAVAEE——BOS物流项目14:Linux部署(安装jdk、tomcat、mySQL)和扩展资料

    1 学习计划 1.Linux部署 n 安装jdk n 安装tomcat n 安装MySQL n 将项目发布到tomcat 2.扩展资料 2 Linux部署 2.1 安装jdk 第一步:获取Linux系 ...

  2. <泛> C++3D数学库设计详解 向量篇

    // 注:本内容为作者原创,禁止在其他网站复述内容以及用于商业盈利,如需引用,请标明出处:http://www.cnblogs.com/lv_anchoret/ Preface 为了支持光线追踪的学习 ...

  3. [ 原创 ] Java基础2--构造方法的继承和重载

    1.构造方法的重载是指同一个类中定义不同参数的多个构造方法,已完成不同情况下对象的初始化. 例如: Point(); Point(x); Point(x,y); 2.一个类的若干个构造方法之间可以相互 ...

  4. BZOJ 3238 [Ahoi2013]差异(后缀自动机)

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=3238 [题目大意] 给出一个串,设T[i]表示从第i位开始的后缀, 求sum(len( ...

  5. 【Dijkstra】POJ1062-昂贵的聘礼

    由于物品编号从1开始,我们假定0也是一个物品作为起点,它到其它物品的距离就是各个物品的原始价值.开始时,如果两种物品主人的等级限制M在规定范围以内,且j能用i替换,则将优惠价格视作从i到j的一条权值为 ...

  6. 解决同伴收获&解决同伴问题补分博客

    解决同伴问题 要求: 查看同组同学的课堂笔记,尝试解决同伴的问题,格式如下: 我的同组同学是XXXX学号XXXX同学 同组同学的问题是XXXX 我理解他的意思是XXXX 他的问题我有一个小建议是XXX ...

  7. php发送get、post请求的6种方法代码示例

    本文主要展示了php发送get.post请求的6种方法的代码示例,分别为使用file_get_contents .fopen.fsockopen.curl来发送GET和POST请求,代码如下: 方法1 ...

  8. Codeforces Round #355 (Div. 2) A. Vanya and Fence 水题

    A. Vanya and Fence 题目连接: http://www.codeforces.com/contest/677/problem/A Description Vanya and his f ...

  9. BZOJ 2756: [SCOI2012]奇怪的游戏 网络流/二分

    2756: [SCOI2012]奇怪的游戏 Time Limit: 40 Sec  Memory Limit: 128 MBSubmit: 1594  Solved: 396[Submit][Stat ...

  10. Disable File System Redirector For Windows x64 (Python recipe)(转)

    This disables the Windows File System Redirector.When a 32 bit program runs on a 64 bit operating sy ...