关于opacity的思考
今天在封装图片轮播的插件的时候,产生了这个opacity的小小思考。
我这个轮播的思路不是以前baidu输入法官网的设置外层容器overflow为hidden,position为relative用setInterval去定义一个循环时间,然后去按照图片的height改变top的值。
而是利用opacity去切换显示对应的图片。
这边还是先说说这个opacity的兼容性问题
- filter:alpha(opacity=60);
- -moz-opacity:0.6;
- 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的思考的更多相关文章
- animation-fill-mode的一些思考
animation-fill-mode是css3动画的一个属性,它能够控制元素在动画执行前与动画完成后的样式.一个带有延迟,并且按正常方向执行的动画(正常方向是指从0%运行到100%),执行一次的过程 ...
- “canvas画布仿window系统自带画图软件"项目的思考
"canvas画布仿window系统自带画图软件"项目的思考 首先贴上DEMO图,并没有美化效果.对UI有要求的,请自带补脑技术. 思考一 在做项目的过程中,我发现"工具 ...
- $2015 武汉森果公司web后端开发实习日记----书写是为了更好的思考
找暑期实习,3月份分别投了百度和腾讯的实习简历,都止步于笔试,总结的主要原因有两点:基础知识不扎实,缺乏项目经验.后来到拉勾网等网站上寻找实习,看了很多家,都还是处于观望状态.后来参加了武汉实习吧在大 ...
- z-index失效原因分析——由一个bug引发的对层叠上下文和z-index属性的深度思考
新年刚开工就被一个bug虐得整个人都不好了,特地记录下. (一)bug描述 在一个fixed-data-table(一个React组件)制作的表格中,需要给表头的字段提示的特效,所以做了一个提示层,但 ...
- 领域驱动和MVVM应用于UWP开发的一些思考
领域驱动和MVVM应用于UWP开发的一些思考 0x00 起因 有段时间没写博客了,其实最近本来是根据梳理的MSDN上的资料(UWP开发目录整理)有条不紊的进行UWP学习的.学习中有了心得体会或遇到了问 ...
- 关于面试题 Array.indexof() 方法的实现及思考
这是我在面试大公司时碰到的一个笔试题,当时自己云里雾里的胡写了一番,回头也曾思考过,最终没实现也就不了了之了. 昨天看到有网友说面试中也碰到过这个问题,我就重新思考了这个问题的实现方法. 对于想进大公 ...
- 关于 CSS 反射倒影的研究思考
原文地址:https://css-tricks.com/state-css-reflections 译者:nzbin 友情提示:由于演示 demo 的兼容性,推荐火狐浏览.该文章篇幅较长,内容庞杂,有 ...
- 关于.NET参数传递方式的思考
年关将近,整个人已经没有了工作和写作的激情,估计这个时候很多人跟我差不多,该相亲的相亲,该聚会喝酒的聚会喝酒,总之就是没有了干活的心思(我有很多想法,但就是叫不动我的手脚,所以我只能看着别人在做我想做 ...
- 使用NUnit为游戏项目编写高质量单元测试的思考
0x00 单元测试Pro & Con 最近尝试在我参与的游戏项目中引入TDD(测试驱动开发)的开发模式,因此单元测试便变得十分必要.这篇博客就来聊一聊这段时间的感悟和想法.由于游戏开发和传统软 ...
随机推荐
- React Native踩坑之The SDK directory 'xxxxx' does not exist
相信和我一样,自己摸索配置环境的过程中,第一次配,很可能就遇到了这个比较简单地错误,没有配置sdk环境 解决办法 在电脑,系统环境变量中,添加一个sdk的环境变量 uploading-image-95 ...
- 同步VDP时间
使用yast 进入蓝屏界面,修改system—date and time,取消hardware clock set to utc,时区设置为上海或者北京,然后sntp -r 时间服务器地址 敲击syn ...
- Django Template Language 模板语言
一.标签 tags 1.普通变量 普通变量用{{ }} 变量名由数字.字母.下划线组成 点.在模板语言中用来获取对象相应的属性值 示例 {# 取variable中的第一个参数 #} {{ variab ...
- pycharm安装使用,python运算规则
首先讲了pycharm的安装和使用,基本上算是个脚本编辑器.另外pycharm的一些操作方法:http://edu.51cto.com/course/9043.html 葫芦老师录的pycharm视频 ...
- android 后台 activity 被系统回收 保存状态
韩梦飞沙 韩亚飞 313134555@qq.com yue31313 han_meng_fei_sha 活动被系统回收, 要保存状态 ,用到 活动的 在保存实例时候 的 这个方法. 当系统异常 ...
- BZOJ.1032.[JSOI2007]祖码(区间DP)
题目链接 BZOJ 洛谷 AC代码: 区间DP,f[i][j]表示消掉i~j需要的最少珠子数. 先把相邻的相同颜色的珠子合并起来. 枚举方法一样,处理一下端点可以碰撞消除的情况就行. 当然合并会出现问 ...
- [UOJ240]aliens
学习了一下凸优化DP,感觉挺有意思的 首先把所有点对称到左下角,然后以每个点为顶点画等腰直角三角形,将被覆盖的点去掉,现在所有点从左上到右下横纵坐标都是递增的,设坐标为$(x_{1\cdots M}, ...
- 【推导】The 16th UESTC Programming Contest Preliminary L - Foxtrot
题意:有n瓶药剂,其中只有一瓶药剂有毒.让你用最少的小白鼠试出哪瓶有毒.你只有一次给任意只小白鼠各喂食任意种类药剂的机会. m只老鼠就能对应2^m种“生死状态”的组合,给每种状态分配一个种类的药剂,然 ...
- 【提权思路】绕过SecureRDP限制远程连接
工具可以在百度上下载 直接步入正题 配置好的SecureRDP是限制远程登录的用户 原理是判断来访的计算机名是否在白名单中 如果不在,便出现如上图所示 网上也有绕过方法(https://weibo.c ...
- python日常碎碎念
关于取命令行中参数的方法 1,sys.argv 这个方法自动获取参数,并split.一般情况下第一个元素是程序的名字.即 python script.py arg1 arg2 然后sys.argv返回 ...