我想使用“onclick”,用纯 Javascript 向 DIV 添加幻灯片和淡入淡出效果。
代码在这里:http://jsfiddle.net/TCUd5/
必须滑动的 DIV 的 id="pulldown_contents_wrapper"。
该 DIV 包含在 SPAN 中,也会触发它:
<span onclick="toggleUpdatesPulldown(event, this, '4');" style="display: inline-block;" class="updates_pulldown" >
<div class="pulldown_contents_wrapper" id="pulldown_contents_wrapper">
我认为控制SPAN onclick的JS代码是:
var toggleUpdatesPulldown = function(event, element, user_id) {
if( element.className=='updates_pulldown' ) {
element.className= 'updates_pulldown_active';
showNotifications();
} else {
element.className='updates_pulldown';
}
}
如果不可能用纯 JS 来实现,你知道我如何用 Mootools 来实现吗? (*我只想使用纯 JS 或 Mootols 框架)。
我尝试实现以下代码:为什么 javascript onclick div 幻灯片不起作用?但没有结果。
多谢。
我已经设法用 Mootools 做到了,但我不知道如何添加幻灯片和淡入淡出效果以及鼠标移开延迟
window.addEvent('domready', function() {
$('updates_pulldown').addEvents({
mouseenter: function(){
$('updates_pulldown').removeClass('updates_pulldown').addClass('updates_pulldown_active')
$('pulldown_contents_wrapper').set('tween', {
duration: 1000,
physics: 'pow:in:out',
transition: Fx.Transitions.Bounce.easeOut // This could have been also 'bounce:out'
}).show();
},
mouseleave: function(){
$('pulldown_contents_wrapper').set('tween', {
duration: 1000,
delay: 1000,
}).hide();
$('updates_pulldown').removeClass('updates_pulldown_active').addClass('updates_pulldown')
},
});
});
var toggleUpdatesPulldown = function(event, element, user_id) {
showNotifications();
}
任何想法?