Onload 将 div 不透明度设置为 50%
好的，我有一个运行 Joomla 的网站，它使用 mootools 1.11 框架。 我使用 mootools 1.2 框架中的示例捏造了一个工作版本，但即使使用兼容层，也无法使两者共存，而不破坏 Joomla 站点中的其他模块。
问题 我有几个带有“.box_panel”类的 div，并且我拥有它，以便它们在鼠标悬停时从 50% 不透明度变为鼠标离开时的 100% 不透明度。 我遇到的问题是将它们设置为 50% onload 的代码是什么？
在 mootools 1.2 中我使用：
<body onload="$$('div.box_panel').fade(0.5);">
我用于 mouseover/mouseleave 效果的代码是：
window.addEvent('domready',function() {
//first, apply a class to each of your menu element
//$$('.links') puts every element wearing the .links class into an array
//$$('.links').each is to browse the array an apply a function to... each of them
$$('.box_panel').each(function(el, i) {
//there comes exactly your former fx statement except for
var ExampleFx = new Fx.Style(el, 'opacity', { //the fact i apply the effect on el
wait: false, //and wait: false which make the effect not waiting (very useful on the mouseout or mouseleave function...
opacity: 0.5,
duration: 500,
transition: Fx.Transitions.Quart.easeInOut
});
//and there i apply (always on el) the effect on mouseenter (similar in this case but often better than mouseover)
//and mouseleave (same for mouseenter but concerning mouesout)
el.addEvent('mouseleave', function() { ExampleFx.start(1, 0.5); });
el.addEvent('mouseenter', function() { ExampleFx.start(0.5, 1); });
});
});
Okay, so I have a site running Joomla and it is using the mootools 1.11 framework. I've fudged together a working version of this using examples from the mootools 1.2 framework but cannot get the two to co-exist even with the compatibility layer, without breaking other modules in the Joomla site.
Question
I have a couple of divs with a class of ".box_panel" and I have it so that they on mouseover they go from 50% opacity and back to 100% opacity on mouseleave. The problem I'm having is what is the code to set them to 50% onload?
In mootools 1.2 I used:
<body onload="$('div.box_panel').fade(0.5);">
The code I'm using for the mouseover/mouseleave effects is:
window.addEvent('domready',function() {
//first, apply a class to each of your menu element
//$('.links') puts every element wearing the .links class into an array
//$('.links').each is to browse the array an apply a function to... each of them
$('.box_panel').each(function(el, i) {
//there comes exactly your former fx statement except for
var ExampleFx = new Fx.Style(el, 'opacity', { //the fact i apply the effect on el
wait: false, //and wait: false which make the effect not waiting (very useful on the mouseout or mouseleave function...
opacity: 0.5,
duration: 500,
transition: Fx.Transitions.Quart.easeInOut
});
//and there i apply (always on el) the effect on mouseenter (similar in this case but often better than mouseover)
//and mouseleave (same for mouseenter but concerning mouesout)
el.addEvent('mouseleave', function() { ExampleFx.start(1, 0.5); });
el.addEvent('mouseenter', function() { ExampleFx.start(0.5, 1); });
});
});
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
您不能只在最后一个括号之前（在
$$('.box_panel')...语句之后添加ExampleFx.start(1, 0.5);吗？Can you not just add
ExampleFx.start(1, 0.5);before the last brackets (after the$$('.box_panel')...statement)?简单：$('.box_panel').effect('opacity', 0.5); // run this right after your window.addEvent('domready', function() {编辑：我在这里有点错。 姆拉登·米哈伊洛维奇的回答完全正确。 另外，这里还有一些链接供您使用：
Simple:$('.box_panel').effect('opacity', 0.5); // run this right after your window.addEvent('domready', function() {Edit: I were a bit wrong here. Mladen Mihajlovic answered completly correct. Also, here are some links for you: