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

十一啊 2012-12-12 09:41:53
就是用了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>');
}
};
};
...全文
152 4 打赏 收藏 转发到动态 举报
写回复
用AI写文章
4 条回复
切换为时间正序
请发表友善的回复…
发表回复
xjfxlj 2013-04-25
  • 打赏
  • 举报
回复
版主威武啊,我也遇到这问题了,mark了
引用 2 楼 showbo 的回复:
JavaScript code ? 123456 jQuery.extend(jQuery.easing,{ circEaseOut:function(p, n, firstNum, diff) { var c=firstNum+diff; return c * Math.sqrt(1 - (p=p/1-1)*p……
十一啊 2012-12-13
  • 打赏
  • 举报
回复
引用 2 楼 showbo 的回复:
JavaScript code?123456jQuery.extend(jQuery.easing,{ circEaseOut:function(p, n, firstNum, diff) { var c=firstNum+diff; return c * Math.sqrt(1 - (p=p/1-1)*p) + ……
谢谢版主,感谢你对新手的帮助!
Go 旅城通票 2012-12-12
  • 打赏
  • 举报
回复
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了
Go 旅城通票 2012-12-12
  • 打赏
  • 举报
回复
不要这样扩展easing,那样的话easing效果就只剩circEaseOut了,而show,hide需要swing或者linear效果,导致找不到这2种效果出错。。改成下面的,而且json对象后面不要多一个,,在IE9-下会报错 自定义jQuery.easing效果插件注意事项
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;
        }}
);

87,910

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧