`
zhangyaochun
  • 浏览: 2612870 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

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

 

 

    贴一张兼容的图:

 



 

 

 

  • 大小: 61.7 KB
1
3
分享到:
评论

相关推荐

    类似Flash效果的渐隐菜单 jquery 示例

    #### 扩展思考 - **兼容性问题**:由于示例代码中使用了 `filters.alpha.opacity` 属性,这主要是为了兼容早期版本的 IE 浏览器。在现代浏览器中,推荐使用 CSS3 的 `opacity` 属性来替代。 - **性能优化**:频繁地...

    【轮播】自适应轮播代码

    #### 五、扩展思考 - 如何通过JavaScript动态更新轮播图中的图片? - 如何实现响应式布局,使轮播图在不同屏幕尺寸下均能良好展示? - 如何优化用户体验,比如增加触屏支持、自动播放等功能? 综上所述,这段代码...

    jquery模拟人人网注册大学选择页面弹出窗口.zip

    在网页开发中,创建交互式的用户界面是一项关键任务。...这个功能在网页应用中常见,能提升用户体验,使用户在不离开主...此外,它还鼓励开发者思考如何根据实际需求对代码进行二次修改和扩展,以适应更多复杂的功能。

    VML语言学习画图,可以详细的学习

    在提供的压缩包文件中,“VML极道教程”和“Think in vml”可能是两个资源,分别包含了深入的VML教程和关于理解和使用VML的思考。通过学习这些材料,你可以深入了解VML的工作原理,掌握如何使用VML进行图形绘制和...

    提高javascript效率 一次判断,而不要次次判断

    比如我家门前去公司有一个岔路,只要我第一次知道了哪一条路是对的,那我下一次或以后的每次都不用再思考了,直接走那条路即可——当然,突发天灾时不算。 做出判断是需要时间的,是需要对应条件的。正确的判断很好...

    创意希尔伯特曲线CSS3特效.rar

    5. **透明度控制**:调整元素的`opacity`属性,可以实现从中心向边缘逐渐淡出的效果,增加层次感。 压缩包内的“jiaoben8864”可能是项目源代码文件或一个示例文件,可能包含了HTML、CSS和JavaScript文件。HTML文件...

    实验项目十九 用 javascript制作网页特效.doc

    实验过程中,教师会演示每个特效的实现步骤,学生则需按照指导动手实践,并解决教师布置的思考题,如增加颜色种类、改变动画速度、优化效果等。这种“讲、学、练”结合的方式有助于学生深入理解和掌握JavaScript在...

    绚丽的动画效果集锦图

    总之,“绚丽的动画效果集锦图”是一个宝贵的资源,它不仅提供了多种动画效果的示例,还能启发开发者思考如何将这些动画类型融合创新,以创造出更多引人入胜的交互体验。无论是初学者还是经验丰富的开发者,都可以...

    Metric_Time:公制时间单位 pong 的建议

    总的来说,"Pong"作为公制时间单位的概念,为时间的表示和处理提供了创新的思考。它不仅影响到编程语言的设计,还可能影响到用户界面的交互方式,甚至可能改变我们日常生活中对时间的认知。然而,任何新标准的采纳都...

    js——相册切换效果.rar_WEB开发_Others__WEB开发_Others_

    例如,我们可以改变图片的`display`属性来切换图片,或者使用`opacity`和`transition`来创建平滑的过渡效果。 4. **数组和循环**:如果相册包含多张图片,我们通常会将它们的引用存储在一个数组中,然后使用循环来...

    给angular加上动画效遇到的问题总结

    为了在动画结束后删除元素,我们需要在CSS中加入对`opacity`和`color`的过渡,使其在动画结束时变得不可见。同时,监听`webkitTransitionEnd`事件,当高度变化的动画完成后,将元素的display属性设为'none',彻底...

    程序员编程写代码CSS3动画

    在这个动画中,程序员的动作(如打字、思考)可以通过改变transform属性来实现。 2. `animation`:将定义好的关键帧动画应用到元素上,包括动画的名称、时长、延迟、次数和方向等。 3. `transition`:用于在两个CSS...

    定制阶段

    总的来说,“舞台照片网站”的定制阶段涵盖了广泛且深入的CSS知识,从基础的样式定义到复杂的布局策略,再到交互效果和性能优化,每一个环节都需要细致的思考和精心的设计。通过巧妙地运用CSS,我们可以创建出既美观...

    多种JS弹窗效果

    3. **淡入淡出效果(Fade In/Fade Out)**:利用CSS的opacity属性和JavaScript,可以实现弹窗的渐显渐隐效果。这种效果使得弹窗的出现和消失更加自然,不会过于突兀。 4. **3D效果(3D Transitions)**:对于追求更...

    图库新版jQuery焦点图 JS代码

    tips[16] = '在追求完美的路上,可能会思考太多,反而让双手闲着。'; tips[17] = '搜索引擎喜欢原创内容和结构合理的Html,而并非罗列出来的关键字。'; tips[18] = '不要小觑用户的智慧,他们能想出各种办法逃脱你...

Global site tag (gtag.js) - Google Analytics