后退 刷新 前进 收藏 顶部 |   知道 黑匣子 富媒体 技术服务

msclass和jquery一起引入产生冲突的解决办法

程序猿 JS msclass jquery 冲突... (shuke.2013-12-05 02:14)
msclass.js是一个通用不间断滚动JS封装类,在项目中的滚动效果基本上都是使用这个类(http://www.popub.net/),但在使用的过程中发现,引入jquery以后,某些效果会产生冲突,主要体现在点击切换箭头不切换的情况。

  例如:http://www.popub.net/script/example.asp?id=19

  如果在上面的例子页面中引入jquery,会造成点击切换无效的问题,作者的源代码是这样的:

1<script type="text/javascript">
2/*********DIV + CSS向左翻屏滚动、缓动及跳过等待时间图文混排实例***************/
3var MarqueeDiv3Control=new Marquee(["MarqueeDiv3","MarqueeDiv3Boxent"],2,0.2,480,115,20,3000,3000)//向左翻屏滚动、缓动及跳过等待时间实例
4$("LeftButton3").onclick=function(){MarqueeDiv3Control.Run(2)}; //跳过等待时间向左滚动后保持原向运动
5$("RightButton3").onclick=function(){MarqueeDiv3Control.Run(3)};    //跳过等待时间向右滚动后保持原向运动
6</script>
  以上是源文件的JS代码,目前官方还没解决这个问题,可能是他们没发现吧,替代的方式是将以上代码写成传统的获取方法,如:

1<script type="text/javascript">
2/*********DIV + CSS向左翻屏滚动、缓动及跳过等待时间图文混排实例***************/
3var MarqueeDiv3Control=new Marquee(["MarqueeDiv3","MarqueeDiv3Boxent"],2,0.2,480,115,20,3000,3000)//向左翻屏滚动、缓动及跳过等待时间实例
4document.getElementById("LeftButton3").onclick=function(){MarqueeDiv3Control.Run(2)};   //跳过等待时间向左滚动后保持原向运动
5document.getElementById("RightButton3").onclick=function(){MarqueeDiv3Control.Run(3)};  //跳过等待时间向右滚动后保持原向运动
6</script>

  使用传统的document.getElementById获取。

或者提前加入以下声明

<script type="text/javascript">
function $(id){return document.getElementById(id)};
</script>


2 楼 shuke[2013-12-12 15:23]
实战中发现上面的代码还是会与JQ发生冲突,引用解决方案

function $(id)js与jquery发生冲突的解决方法

今天用到一个幻灯片特效,然后发现网页原本使用的jquery特效失效了,于是网上找答案,贴来:
现在有很多个人站长在网上找到各种网页特效,JS的、Jquery的等等有时一个网页使用多个特效时会出现冲突,但是有些人理不出头绪到底哪里出现冲突或者是很多站长不是专业出身或者技术偏薄弱。


所以一种处理方法是换一种特效,当然另一种就是解决冲突保留自己好不容易找到的完美的符合心意的特效效果,下面是我遇到的问题,希望能帮到各位。


function $(id)是构造了一个匿名函数 

1
function $(id){ return document.getElementById(id); }


1
2
3
var $ = function (id) {
    return "string" == typeof id ? document.getElementById(id) : id;
};

$(id)是js document.getElementById(id)的简写
定义了这个方法 以后调用的时候就可以直接用$(id).innnerHTML  或者$(id).innerText
一般的还有

1
function c$(o){return document.createElement(o);}

这些都是简单的封装。这一类js代码会和与JQuery对象获取函数冲突会与JQuery冲突的,导致JQuery获取不了对象,必须更改其中一方代码 

该JS的安全写法有:

1
2
3
var $id = function (id) {
    return "string" == typeof id ? document.getElementById(id) : id;
};

1
2
3
4
var $id = function (id) {
    //避免与jQuery的$函数冲突  
    return typeof id == "string" ? document.getElementById(id) : id;  
};

然后进行后续JS代码的更改,假若你不想更改太多,可以把

1
function $(id){ return document.getElementById(id); }

这段代码更换成以下代码即可。

1
2
3
4
5
6
7
8
9

function $(id) {
     if (typeof jQuery == 'undefined' || (typeof id == 'string' && document.getElementById(id))) {
          return document.getElementById(id);
     else if (typeof id == 'object' || !/^\w*$/.exec(id) ||
          /^(body|div|span|a|input|textarea|button|img|ul|li|ol|table|tr|th|td)$/.exec(id)){
        return jQuery(id);
     }
     return null;
}



进度:100% 返回程序猿

解决织梦图集中上传图片时跳出302错误

图片新热点

导航


目录


    站内搜索
    首页 | W3C | ME