jQuery Easy Accordion插件,兼容IE11

  jQuery Easy Accordion插件,网上下载的jQuery Easy Accordion插件大部分是作者原创,编写的代码只兼容IE8-浏览器,chrome和firefox。IE9+浏览器下显示全部错乱,经本人修改,现在已经兼容IE9+浏览器,并且兼容最新IE版本IE11(IE11做了重大调整,附带的jQuery1.3.1判断IE11已经失效,也不支持css的filter属性,Accordion的tab旋转效果需要使用css3的transform效果)。

Easy Accordion IE11下效果

Easy Accordion IE11下效果

Easy Accordion IE10下效果

Easy Accordion IE10下效果

Easy Accordion IE9下效果

Easy Accordion IE9下效果

CSS修改,删除IE部分的filter样式,改用js动态输出

.easy-accordion dt{margin-bottom:0;margin-left:0;z-index:5;/* Safari */ -webkit-transform: rotate(-90deg); /* Firefox */ -moz-transform: rotate(-90deg);-moz-transform-origin: 20px 0px;  cursor:pointer;-o-transform: rotate(-90deg);/*opera*/}
.easy-accordion .slide-number{position:absolute;bottom:0;left:10px;font-weight:normal;font-size:1.1em;/* Safari */ -webkit-transform: rotate(90deg); /* Firefox */ -moz-transform: rotate(90deg);  }
<script type="text/javascript" src="scripts/jquery.min.js"></script>
      <script>
          /*fixed IE*/
          if (jQuery.browser.msie || "ActiveXObject" in window/*fixed IE11+*/) {
              jQuery.browser.msie = true; //jQuery代码无法判断是否IE11+,要改为"ActiveXObject" in window,所以能通过if判断直接设置为true,注意这句要放到easyAccordion.js类库前
              if (jQuery.browser.version > 8)document.write('<style>.easy-accordion dt{-ms-transform: rotate(-90deg);}.easy-accordion .slide-number{-ms-transform: rotate(90deg);}</style>');
              else document.write('<style>.easy-accordion dt{filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);}.easy-accordion .slide-number{filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);}</style>');
          }
      </script>
	  <script type="text/javascript" src="scripts/jquery.easyAccordion.js"></script>
      <script type="text/javascript" src="scripts/utility.js"></script>

  jquery.easyAccordion.js也做了IE部分判断修改

//fixed IE8-,第一部分
if (jQuery.browser.msie && jQuery.browser.version < 9) { dtWidth = $(this).find('dt').outerWidth(); }
//第二部分
if (jQuery.browser.safari || (jQuery.browser.msie && jQuery.browser.version > 8)) {
                var dtTop = (dlHeight - dtWidth) / 2; var dtOffset = -dtTop;  /* Safari and Chrome IE9+*/
            }
if (jQuery.browser.mozilla/*你母,IE11会判断出错为mozilla*/ && !jQuery.browser.msie) { var dtTop = dlHeight - 20; var dtOffset = -20; /* FF */ }
//第三部分
if (jQuery.browser.msie && jQuery.browser.version < 9) {
                        var slideNumLeft = parseInt(jQuery(this).find('.slide-number').css('left')) - 14;

 


分类:js图片特效 下载地址
阅读(340)喜欢(1)247.69KB浏览器 点击下载