在网上下载了两个JS特效,想要弄到一个网页文件中,刚开始只有mootool.js这个引用特效可以用,按照网上的方法把引用jquery的JS做了处理var $j = jQuery.noConflict();,结果jquery这个特效可以用了,mootool.js这个特效又没用了,希望大家能够给出建议
现在把完整代码给出,除去那两个框架代码
页面代码:test.html//第一个特效A代码
<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/imageMenu.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/dock-example1.js"></script>
<div id="dock">
<div class="dock-container">
<a class="dock-item" href="index.html"><span>Example&nbsp;1</span><img src="images/dock/home.png" alt="home" /></a> 
<a class="dock-item" href="example2.html"><span>Example&nbsp;2</span><img src="images/dock/email.png" alt="contact" /></a> 
<a class="dock-item" href="example3.html"><span>Example&nbsp;3</span><img src="images/dock/portfolio.png" alt="portfolio" /></a> 
<a class="dock-item" href="all-examples.html"><span>All&nbsp;Examples</span><img src="images/dock/music.png" alt="music" /></a> 
<a class="dock-item" href="#"><span>Video</span><img src="images/dock/video.png" alt="video" /></a> 
<a class="dock-item" href="#"><span>History</span><img src="images/dock/history.png" alt="history" /></a> 
<a class="dock-item" href="#"><span>Calendar</span><img src="images/dock/calendar.png" alt="calendar" /></a> 
</div>
</div>//第二个特效B代码
<div id="containers">
<div id="example">
<div id="imageMenu">
<ul>
<li class="landscapes"><a>Landscapes</a></li>
<li class="people"><a href="/" target="_blank">People</a></li>
<li class="nature"><a href="/" target="_blank">Nature</a></li>
<li class="urban"><a href="/" target="_blank">Urban</a></li>
<li class="abstract"><a href="/" target="_blank">Abstract</a></li>
</ul>
</div>

<script type="text/javascript">
window.addEvent('domready', function(){
var myMenu = new ImageMenu($$('#imageMenu a'),{openWidth:750, border:2, onOpen:function(e,i){window.open(e);}});
});
</script> </div>
</div>
//特效A调用的JS
var $j = jQuery.noConflict();
$j(function () { 
// Dock initialize
$j('#dock').Fisheye(
{
maxWidth: 30,
items: 'a',
itemsText: 'span',
container: '.dock-container',
itemWidth: 50,
proximity: 60,
alignment : 'left',
valign: 'bottom',
halign : 'center'
}
);
}); //特效B调用代码
var ImageMenu = new Class({

getOptions: function(){
return {
onOpen: false,
onClose: Class.empty,
openWidth: 200,
transition: Fx.Transitions.quadOut,
duration: 400,
open: null,
border: 0
};
}, initialize: function(elements, options){
this.setOptions(this.getOptions(), options);

this.elements = $$(elements);

this.widths = {};
this.widths.closed = this.elements[0].getStyle('width').toInt();
this.widths.openSelected = this.options.openWidth;
this.widths.openOthers = Math.round(((this.widths.closed*this.elements.length) - (this.widths.openSelected+this.options.border)) / (this.elements.length-1))


this.fx = new Fx.Elements(this.elements, {wait: false, duration: this.options.duration, transition: this.options.transition});

this.elements.each(function(el,i){
el.addEvent('mouseenter', function(e){
new Event(e).stop();
this.reset(i);

}.bind(this));

el.addEvent('mouseleave', function(e){
new Event(e).stop();
this.reset(this.options.open);

}.bind(this));

var obj = this;

el.addEvent('click', function(e){ if(obj.options.onOpen){
new Event(e).stop();
if(obj.options.open == i){
obj.options.open = null;
obj.options.onClose(this.href, i);
}else{
obj.options.open = i;
obj.options.onOpen(this.href, i);
}


}

})

}.bind(this));

if(this.options.open){
if($type(this.options.open) == 'number'){
this.reset(this.options.open);
}else{
this.elements.each(function(el,i){
if(el.id == this.options.open){
this.reset(i);
}
},this);
}
}

},

reset: function(num){
if($type(num) == 'number'){
var width = this.widths.openOthers;
if(num+1 == this.elements.length){
width += this.options.border;
}
}else{
var width = this.widths.closed;
}

var obj = {};
this.elements.each(function(el,i){
var w = width;
if(i == this.elements.length-1){
w = width+5
}
obj[i] = {'width': w};
}.bind(this));

if($type(num) == 'number'){
obj[num] = {'width': this.widths.openSelected};
}

this.fx.start(obj);
}

});ImageMenu.implement(new Options);
ImageMenu.implement(new Events);现在已经将完整的代码发出来了,大家多费心帮帮忙吧。。

解决方案 »

  1.   

    是不是要先导<script type="text/javascript" src="js/jquery.min.js"></script>呢?
      

  2.   

    楼上朋友你好,我页面上把jquery的代码放前面的,刚才编辑的时候顺序没注意
      

  3.   

    window.addEvent('domready', function(){
                    var myMenu = new ImageMenu($$('#imageMenu a'),{openWidth:750, border:2, onOpen:function(e,i){window.open(e);}});
                });
    我看上面的也是document.ready事件的监测,你把上面的删除,与你的另一个基于jquery的特效放一起试试?
    //特效A调用的JS
    var $j = jQuery.noConflict();
    $j(function () { 
        // Dock initialize
        $j('#dock').Fisheye(
            {
                maxWidth: 30,
                items: 'a',
                itemsText: 'span',
                container: '.dock-container',
                itemWidth: 50,
                proximity: 60,
                alignment : 'left',
                valign: 'bottom',
                halign : 'center'
            }
        );
    var myMenu = new ImageMenu($$('#imageMenu a'),{openWidth:750, border:2, onOpen:function(e,i){window.open(e);}});//比如把它放到这里}); 
      

  4.   

    两个不同版本的jquery的不兼容。昨天,我还搞呢,也没有弄好。等等看看,还有高人么?
      

  5.   

    已经解决问题了,在于引用不同JS前后的问题,我将每处用到的JS导入不同的相应库就OK了