求解决jquery插件 IE8显示问题

草原上的奶牛 2016-02-12 10:48:06
研究了很长时间，终究不能解决，求高手解决 该插件在IE8能正常显示。









<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

<style>

.social-share li {display: inline-block;margin-right: 5px;transition: transform 0.5s;}

.social-share li a {color: #fff;display: inline-block;text-align: center;border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%;}

.social-share li:hover {transform: rotate(360deg);}

.social-share-lg li a {font-size: 24px;height: 64px;width: 64px;line-height: 64px;}

.social-share-md li a {font-size: 20px;height: 48px;width: 48px;line-height: 48px;}

.social-share-sm li a {font-size: 16px;height: 36px;width: 36px;line-height: 36px;}

.social-share-xs li a {font-size: 12px;height: 24px;width: 24px;line-height: 24px;}

/* qrcode */

.qrcode-dialog {width: auto;display: none;position: fixed;top: 50%;left: 50%;width: 286px;height: 322px;margin-top: -150px;margin-left: -143px;box-shadow: 0 5px 15px rgba(0, 0, 0, .5);background: #FFF;}

.qrcode-dialog.show {display: block;}

.qrcode-dialog .qrcode-header{padding: 15px 15px 5px;}

.qrcode-dialog .qrcode-header .dismiss {float: right;font-weight: bold;cursor: pointer;}

.qrcode-dialog .qrcode-body {padding: 10px 15px;}

/* brand logos */

.social-share .qq a {cursor:pointer;background:#4DAFEA url(public/share-qq.png) no-repeat 0;background-size: cover;}

.social-share .qzone a {cursor:pointer;background:#EECF3D url(public/share-qzone.png) no-repeat 0;background-size: cover;}

.social-share .sina a {cursor:pointer;background:#DF4D69 url(public/share-sina.png) no-repeat 0;background-size: cover;}

.social-share .wechat a {cursor:pointer;background:#3EB135 url(public/share-weixin.png) no-repeat 0;background-size: cover;}

</style>

</head>

<body>

<div class="socialShare"></div>

  

<script src="https://cdn.bootcss.com/jquery/1.8.2/jquery.js"></script>

<script src="https://rawgit.com/harttle/social-share/master/src/qrcode.min.js"></script>

<script>

(function($) {

  var defaultConfig = {

	  size: 'md',

	  links: {},

	  blank: true,

	  classMapping: {}

  };



  function socialShare(config) {

	  config = $.extend({}, defaultConfig, config);

	  var links = parseLinks(config.links),

		  $this = $(this);



	  var $ul = $('<ul class="list-unstyled social-share">');

	  $ul.addClass('social-share-' + config.size);

	  links.map(function(link) {

		  $ul.append(render(link, config));

	  });

	  $this.append($ul);

  }



  function render(link, config) {

	  var cls = 'fa-' + (config.classMapping[link.name] || link.name),

		  $li = $('<li class="social-share-item">'),

		  $a = $('<a>', {

			  href: link.url

		  }),

		  $i = $('<i>', {

			  class: 'fa ' + cls

		  });

	  $a.append($i);

	  if (config.blank) $a.attr('target', '_blank');



	  $li.append($a);

	  $li.addClass(link.name);



	  if(link.name === 'wechat'){

		  $a.removeAttr('href');

		  $a.removeAttr('target');

		  $li.click(function(){

			  qrCodeHandler(link.url);

		  });

	  }



	  return $li;

  }



  function parseLinks(links) {

	  var res = [];

	  for (var k in links) {

		  if (links.hasOwnProperty(k)) {

			  res.push({

				  name: k,

				  index: links[k].index,

				  url: links[k].url,

			  });

		  }

	  }

	  res.sort(function(lhs, rhs) {

		  return lhs.index - rhs.index;

	  });

	  return res;

  }



  function qrCodeHandler(url) {

	  var tml =

		  '<div class="qrcode-dialog"> ' +

		  '  <div class="qrcode-header">' +

		  '    <span class="dismiss">×</span>' +

		  '    <header>手机扫描二维码</header>' +

		  '  </div>' +

		  '  <div class="qrcode-body"> ' +

		  '  </div>' +

		  '</div>',

		  $modal = $(tml);



	  var qrcode = new QRCode($modal.find('.qrcode-body').get(0), {

		  text: url,

		  width: 256,

		  height: 256,

		  colorDark: "#000000",

		  colorLight: "#FFFFFF",

		  correctLevel: QRCode.CorrectLevel.H

	  });



	  $modal.find('.qrcode-header .dismiss').click(function() {

		  $modal.remove();

	  });



	  $modal.appendTo('body').addClass('show');

  }



  $.fn.socialShare = socialShare;



})(jQuery);

</script>







<script>

  var weiboConfig = {

        appkey: '234466545656',

        title: encodeURIComponent('分享标题'),

         desc: encodeURIComponent('分享描述'),

         site: encodeURIComponent('来源网站'),

         pics: encodeURIComponent('http://www.baidu.com/logo.gif'),

          url: encodeURIComponent('http://www.baidu.com/')

    },

    links = {

        qq: {

            index: 1,

            url: 'http://connect.qq.com/widget/shareqq/index.html?url='+weiboConfig.url+'&title='+weiboConfig.title+'&desc='+weiboConfig.desc+'&summary=&site='+weiboConfig.site+'&pics='+weiboConfig.pics

        },

        qzone: {

            index: 2,

            url: 'http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url='+weiboConfig.url+'&title='+weiboConfig.title+'&desc='+weiboConfig.desc+'&summary=&site='+weiboConfig.site+'&pics='+weiboConfig.pics

        },

        sina: {

            index: 3,

            url: 'http://service.weibo.com/share/share.php?url='+weiboConfig.url+'&title='+weiboConfig.title+'&appkey='+weiboConfig.appkey+'&pic='+weiboConfig.pics+'&searchPic=true'

        },

        wechat: {

            index: 4,

            url: location.href

        }

    };



$('div.socialShare').socialShare({ links: links, size: 'lg'});

</script>



</body>

</html>
...全文
287 3 打赏 收藏 举报
写回复
用AI写文章
3 条回复
切换为时间正序
请发表友善的回复…
发表回复
天际的海浪 2016-02-13
  • 打赏
  • 举报
 回复
js代码改红色两处就可以了。 对于css3 的 transition， transform 和 border-radius。 ie8不支持，可以用jQuery动画和圆形的图片代替。 画二维码用了canvas，ie8也不支持，直接用图片代替
草原上的奶牛 2016-02-13
  • 打赏
  • 举报
 回复
我试过了，还是不能显示，除了map还有别的地方么？ 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
.social-share li {display: inline-block;margin-right: 5px;transition: transform 0.5s;}
.social-share li a {color: #fff;display: inline-block;text-align: center;}
.social-share li:hover {transform: rotate(360deg);}
.social-share-lg li a {font-size: 24px;height: 64px;width: 64px;line-height: 64px;}
.social-share-md li a {font-size: 20px;height: 48px;width: 48px;line-height: 48px;}
.social-share-sm li a {font-size: 16px;height: 36px;width: 36px;line-height: 36px;}
.social-share-xs li a {font-size: 12px;height: 24px;width: 24px;line-height: 24px;}
/* qrcode */
.qrcode-dialog {width: auto;display: none;position: fixed;top: 50%;left: 50%;width: 286px;height: 322px;margin-top: -150px;margin-left: -143px;box-shadow: 0 5px 15px rgba(0, 0, 0, .5);background: #FFF;}
.qrcode-dialog.show {display: block;}
.qrcode-dialog .qrcode-header{padding: 15px 15px 5px;}
.qrcode-dialog .qrcode-header .dismiss {float: right;font-weight: bold;cursor: pointer;}
.qrcode-dialog .qrcode-body {padding: 10px 15px;}
/* brand logos */
.social-share .qq a {cursor:pointer;background:#4DAFEA url(public/share-qq.png) no-repeat 0;background-size: cover;}
.social-share .qzone a {cursor:pointer;background:#EECF3D url(public/share-qzone.png) no-repeat 0;background-size: cover;}
.social-share .sina a {cursor:pointer;background:#DF4D69 url(public/share-sina.png) no-repeat 0;background-size: cover;}
.social-share .wechat a {cursor:pointer;background:#3EB135 url(public/share-weixin.png) no-repeat 0;background-size: cover;}
</style>
</head>
<body>
<div class="socialShare"></div>
  
<script src="https://cdn.bootcss.com/jquery/1.8.2/jquery.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script src="https://rawgit.com/harttle/social-share/master/src/qrcode.min.js"></script>
<script>
(function($) {
  var defaultConfig = {
	  size: 'md',
	  links: {},
	  blank: true,
	  classMapping: {}
  };

  function socialShare(config) {
	  config = $.extend({}, defaultConfig, config);
	  var links = parseLinks(config.links),
		  $this = $(this);

	  var $ul = $('<ul class="list-unstyled social-share">');
	  
	  $ul.addClass('social-share-' + config.size);
	  
	  for (var i = 0, len = links.length; i < len; i++)
		  $ul.append(render(links[i], config));
		  $this.append($ul);
	  }

  function render(link, config) {
	  var cls = 'fa-' + (config.classMapping[link.name] || link.name),
	  $li = $('<li class="social-share-item">'),
	  $a = $('<a>', {
	  href: link.url
	  }),
	  $i = $('<i>', {
	  "class": 'fa ' + cls
  });
	  $a.append($i);
	  if (config.blank) $a.attr('target', '_blank');

	  $li.append($a);
	  $li.addClass(link.name);

	  if(link.name === 'wechat'){
		  $a.removeAttr('href');
		  $a.removeAttr('target');
		  $li.click(function(){
			  qrCodeHandler(link.url);
		  });
	  }

	  return $li;
  }

  function parseLinks(links) {
	  var res = [];
	  for (var k in links) {
		  if (links.hasOwnProperty(k)) {
			  res.push({
				  name: k,
				  index: links[k].index,
				  url: links[k].url,
			  });
		  }
	  }
	  res.sort(function(lhs, rhs) {
		  return lhs.index - rhs.index;
	  });
	  return res;
  }

  function qrCodeHandler(url) {
	  var tml =
		  '<div class="qrcode-dialog"> ' +
		  '  <div class="qrcode-header">' +
		  '    <span class="dismiss">×</span>' +
		  '    <header>手机扫描二维码</header>' +
		  '  </div>' +
		  '  <div class="qrcode-body"> ' +
		  '  </div>' +
		  '</div>',
		  $modal = $(tml);

	  var qrcode = new QRCode($modal.find('.qrcode-body').get(0), {
		  text: url,
		  width: 256,
		  height: 256,
		  colorDark: "#000000",
		  colorLight: "#FFFFFF",
		  correctLevel: QRCode.CorrectLevel.H
	  });

	  $modal.find('.qrcode-header .dismiss').click(function() {
		  $modal.remove();
	  });

	  $modal.appendTo('body').addClass('show');
  }

  $.fn.socialShare = socialShare;

})(jQuery);

  var weiboConfig = {
        appkey: '234466545656',
        title: encodeURIComponent('分享标题'),
         desc: encodeURIComponent('分享描述'),
         site: encodeURIComponent('来源网站'),
         pics: encodeURIComponent('http://www.baidu.com/logo.gif'),
          url: encodeURIComponent('http://www.baidu.com/')
    },
    links = {
        qq: {
            index: 1,
            url: 'http://connect.qq.com/widget/shareqq/index.html?url='+weiboConfig.url+'&title='+weiboConfig.title+'&desc='+weiboConfig.desc+'&summary=&site='+weiboConfig.site+'&pics='+weiboConfig.pics
        },
        qzone: {
            index: 2,
            url: 'http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url='+weiboConfig.url+'&title='+weiboConfig.title+'&desc='+weiboConfig.desc+'&summary=&site='+weiboConfig.site+'&pics='+weiboConfig.pics
        },
        sina: {
            index: 3,
            url: 'http://service.weibo.com/share/share.php?url='+weiboConfig.url+'&title='+weiboConfig.title+'&appkey='+weiboConfig.appkey+'&pic='+weiboConfig.pics+'&searchPic=true'
        },
        wechat: {
            index: 4,
            url: location.href
        }
    };

$('div.socialShare').socialShare({ links: links, size: 'lg'});
</script>

</body>
</html>
天际的海浪 2016-02-12
  • 打赏
  • 举报
 回复
function socialShare(config) { config = $.extend({}, defaultConfig, config); var links = parseLinks(config.links), $this = $(this); var $ul = $('<ul class="list-unstyled social-share">'); $ul.addClass('social-share-' + config.size); for (var i = 0, len = links.length; i < len; i++) $ul.append(render(links[i], config)); $this.append($ul); } function render(link, config) { var cls = 'fa-' + (config.classMapping[link.name] || link.name), $li = $('<li class="social-share-item">'), $a = $('<a>', { href: link.url }), $i = $('<i>', { "class": 'fa ' + cls }); $a.append($i); if (config.blank) $a.attr('target', '_blank');
如何解决Jquery插件nicescroll在ie8中出现的滚动问题
jquery.nicescroll.js是jquery的开源插件，使用也非常简单，如何使用网上已讲的非常详细了，不会的 可以参考：http://nicescroll.areaaperta.com/ nicescroll的兼容性非常强，基本上所有的浏览器都可以使用，但是这么完美的插件还是存在它不足的地方。 在ie8上，偶尔会出现这样的情况： 页面会随着鼠标箭头的移动而滚动。根据我的个人经...
jquery.qrcode生成二维码并解决canvas在IE8的兼容性问题
如今二维码在生活中十分常用，支付扫一扫，长按可识别。那么在项目可能就会遇到需要有编号、链接等需要生成二维码的场景，这里我的项目里就有遇到编号需要生成二维码并打印的场景出现，这里介绍一下我使用js生成二维码并解决IE8浏览器下canvas控件的兼容性处理问题。 导入的生成二维码的js插件：jquery.qrcode.min.js 该插件其实是通过使用jQuery实现图形渲染，画图，支持canva...
IE8不支持jQuery问题
最近做WordPress主题，遇到一个很奇怪的问题，网页在Chrome等浏览器都显示正常，但是到了IE8里面就无法工作。提示“加载完毕，但网页中有错误”。 尝试修复IE浏览器，但是毫无效果。后来经过反复排查，发现问题在于IE8不能运行jQuery。网上找了很久也没找到相关的文章。而且之前用过一些jQuery插件，在IE中也是能正常使用的。用IE打开之前写的一个jQuery插件的Demo，运行
解决IE6/IE7/IE8不支持before,after问题
对从事web开发的朋友来讲，低版本的 IE 永远是一个痛点，不支持最新技术(如css3,html5)。 在现在web开发中使用图标字体已经很广泛，如Font Awesome,Bootstrap等，字体...
jquery validate在ie8下的bug解决
jquery.validate在ie8下执行时，valid方法返回结果不正确，并且所有的字段都被当成必填项校验了。经过排查，问题出在attributeRules（）方法上，可以尝试两种方法来解决。
JavaScript

87,984

社区成员

224,681

社区内容

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

加载中

查看更多榜单
社区公告
暂无公告

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

+ 用AI写文章