首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

有个关于弹窗的有关问题,有兴趣的朋友帮忙看上

2012-12-29 
有个关于弹窗的问题,有兴趣的朋友帮忙看下本帖最后由 nojobs 于 2012-12-12 21:45:31 编辑就是用了JQ的弹

有个关于弹窗的问题,有兴趣的朋友帮忙看下
本帖最后由 nojobs 于 2012-12-12 21:45:31 编辑 就是用了JQ的弹窗A和一个跟着鼠标滚轮晃动的页面B
但是两个JQ在一起,弹窗就失效了。
最后看了一下是因为页面B用了easing的插件在jq里
代码如下:
jQuery.extend({
    
    easing: 
    {

     
        
        circEaseOut:function(p, n, firstNum, diff) {

            var c=firstNum+diff;
            
            return c * Math.sqrt(1 - (p=p/1-1)*p) + firstNum;
        },
        
       
    }
});

理论上就应该是重载了JQ源文件的easing吧,这个原理我不太懂,一直没用过JQ,正要开始学

但是这个重载就会影响我另一个弹窗,这个如何处理呢?

或者不用这个seasing的效果,可以达到跟随鼠标的办法么?

按键和判断 在页面B的JQ里是这样的:

var windowWidth = $(window).width();
var windowHeight = $(window).height();
var left1 = Math.floor(windowWidth *6 /100);
var left2 = left1 - 1045;
var left3 = left1 - 2090;
var wrapperTop = Math.floor(windowHeight *4/100);

$('#place').css({'left':left1,'top':wrapperTop});
var wrapperPos = 1;
$('#wrapper1 input:text').focus();
var animDone = true;

function anim1to2(){
$('#wrapper1 input:text').focusout();
animDone = false;
$('#place').animate({
left: left2,
},1000,'circEaseOut',function() {
$('#wrapper2 input:text').focus();
animDone = true;
wrapperPos = 2;
});
$('#button1to2').hide();
$('#button2to1').show();
if(num>2){
$('#button2to3').show();
$('#button3to2').hide();
};
};

function anim2to1(){
$('#wrapper2 input:text').focusout();
animDone = false;
$('#place').animate({
left: left1
},1000,'circEaseOut',function() {
$('#wrapper1 input:text').focus();
animDone = true;
wrapperPos = 1;
});
$('#button1to2').show();
$('#button2to1').hide();
if(num>2){
$('#button2to3').hide();
$('#button3to2').hide();
};
};

function anim2to3(){
$('#wrapper2 input:text').focusout();
animDone = false;
$('#place').animate({
left: left3
},1000,'circEaseOut',function() {
$('#wrapper3 input:text').focus();
animDone = true;
wrapperPos = 3;
});
$('#button1to2').hide();
$('#button3to2').show();
$('#button2to1').hide();
$('#button2to3').hide();
};

function anim3to2(){
$('#wrapper3 input:text').focusout();
animDone = false;
$('#place').animate({
left: left2
},1000,'circEaseOut',function() {
$('#wrapper2 input:text').focus();
animDone = true;
wrapperPos = 2;
});
$('#button1to2').hide();
$('#button3to2').hide();
$('#button2to1').show();
$('#button2to3').show();
};

if(num>1){
$('#button1to2').click(function(){
anim1to2();


});

$('#button2to1').click(function(){
anim2to1();
});

if(num>2){
$('#button2to3').click(function(){
anim2to3();
});

$('#button3to2').click(function(){
anim3to2();
});
};
};

$(document).bind('keydown',function(event){ 
if(event.keyCode == '39' || event.keyCode == '37'){
event.preventDefault();
}
if(event.which=='39' && animDone){

if(wrapperPos==1 && num>1){
anim1to2();
};
if(wrapperPos==2 && num>2){
anim2to3();
};
};
if(event.which=='37' && animDone){

if(wrapperPos==3){
anim3to2();
};
if(wrapperPos==2){
anim2to1();
};
};
}); 

$(document).mousewheel(function(event, delta) {
if (delta > 0 && animDone){
if(wrapperPos==3){
anim3to2();
};
if(wrapperPos==2){
anim2to1();
};
}
else if (delta < 0 && animDone){
if(wrapperPos==1 && num>1){
anim1to2();
};
if(wrapperPos==2 && num>2){
anim2to3();
};
};
event.preventDefault();
});

var j=0;
for (j=0; j <= (num-1); j++) {
for(i=0;i<=11;i++){
var title = bookmark[j][i]['title'];
var url = bookmark[j][i]['url'];
var thumb = bookmark[j][i]['thumb'];
if(thumb==''){
$('#thumb'+(j+1)+'-'+(i+1)).html('<img id="net" src="lib/net-back.png" /><a href="'+url+'"><div class="title">'+title+'</div></a>');
}
else{
$('#thumb'+(j+1)+'-'+(i+1)).html('<a href="'+url+'"><img src="thumbs/'+thumb+'" /></a>');
}
};
};


[解决办法]
jQuery.extend(jQuery.easing,{
        circEaseOut:function(p, n, firstNum, diff) {
            var c=firstNum+diff;
            return c * Math.sqrt(1 - (p=p/1-1)*p) + firstNum;
        }}
);


更正下,jQuery.easing打成jQuery,easing了

热点排行
Bad Request.