使用 mootools 进行简单的 Div Opacity Fade on Focus

Posted

技术标签:

【中文标题】使用 mootools 进行简单的 Div Opacity Fade on Focus【英文标题】:Simply Div Opacity Fade on Focus using mootools 【发布时间】:2010-10-06 09:17:27 【问题描述】:

我在一个页面中有几个 div,其中包含简单的 html 和图像。每个 div 都有唯一的 id。

我希望当页面加载时 div 的内容是 60%,但在鼠标悬停时淡入为 100%。在 mouseout 时,它们会回到 60%。

该网站是在 Joomla 1.5.x 中构建的,因此已经加载了 mootools 1.11 库。我在网上寻找示例代码,发现了很多关于使用 jQuery 淡化图像不透明度的参考资料,但对于 mootools 来说却没有那么多。

任何指针将不胜感激:)

【问题讨论】:

【参考方案1】:

您也许可以将图像包装到一个 div 中并使用类似的东西来淡化?

Fx.Style("div1", "opacity").start(1.0);

【讨论】:

我已将此添加到我的测试页面。我将如何让它们在鼠标悬停时改变?我应该说我没有使用 mootools 的经验【参考方案2】:

找到了一个解决方案,好吧。 它适用于 mootools 1.2.1。我已经调整了代码以淡化 div 而不是 img。

我把这个放在我的脑海里:

<script type="text/javascript"  src="mootools-1.2.1-core-yc.js"></script>  
<script type="text/javascript">

    var fade_in = 1;
    var fade_out = 0.5;

</script>
</head>
<body onload="$$('div.box_panel').fade(0.5);">

然后这个在我的 div 上。

<div id="box1" class="box_panel" onmouseover="this.fade(fade_in);" onmouseout="this.fade(fade_out);">
        <h2>Box One</h2>
        <p>This is a content box and some sample content to pad it out.</p>
</div>

现在的问题是我不确定如何在 1.11 中获得同样的效果

【讨论】:

你为什么不升级或同时使用呢? ..fade功能在1.11中不存在吗? 无法升级,因为其他 Joomla 组件可能会“损坏”。我已经读到 V1.6 应该迁移到 mootools 1.2 但目前兼容性模式应该是不确定的。会试一试的。【参考方案3】:

改为使用 CSS3 过渡。这要简单得多。见 (http://www.w3schools.com/css/css3_transitions.asp)

div.box_panel 
    opacity: 0.6;
    filter: alpha(opacity=60);
    -webkit-transition: opacity .5s linear;
    -moz-transition: opacity .5s linear;
    -ms-transition: opacity .5s linear;
    -o-transition: opacity .5s linear;
    transition: opacity .5s linear;


div.box_panel:hover 
    opacity: 1;
    filter: alpha(opacity=100);

【讨论】:

以上是关于使用 mootools 进行简单的 Div Opacity Fade on Focus的主要内容,如果未能解决你的问题,请参考以下文章

SAPUI5-Walkthrough-29OPA集成测试

Mootools公司-资产。图像

HTML 使用mootools进行电子邮件保护

OPA690,OPA842,OPA228,OPA192做跟随器使用总结

MooTools中文介绍

MooTools中文介绍