发布价值信息
Wordpress、Software、VPN。。

在WordPress站点不同的地方显示不同的微信二维码(lowweixin.js)

何先生在上一篇文章中提到了lowweixin.js,这个JS是用来生成二维码图片的弹出窗口,在不同的地方点击不同的微信图标,会弹出不同的预设的二维码图片。我们来看看如何实现。

lowweixin.js介绍

我们先看看弹出窗口的效果图片。

lowweixin.js弹出效果

在WordPress站点不同的地方显示不同的微信二维码(lowweixin.js)

当页面加载了lowweixin.js,它会创建一个隐藏的DIV,但点击微信图标后,它将会显示出来,再次点击又会隐藏。

我们再看看整个的lowweixin.js文件内容:

jQuery(document).ready(function() {
//二维码图片地址
var imgurl= jQuery('#low-wx').attr('href');
 
var main = jQuery('<div></div>'); //创建一个父DIV
main.attr('id', 'leaf_weixin_share'); //给父DIV设置ID
main.addClass('weixin_share'); //添加CSS样式
 
var leaf_weixin_modal = jQuery('<div></div>'); //创建一个子DIV
leaf_weixin_modal.attr('id', 'leaf_weixin_modal'); //给子DIV设置ID
leaf_weixin_modal.removeClass();
leaf_weixin_modal.addClass('weixin_modal');
leaf_weixin_modal.appendTo(main);
 
var leaf_modal_header = jQuery('<div></div>'); //创建一个子DIV
leaf_modal_header.attr('id', 'leaf_modal_header'); //给子DIV设置ID
leaf_modal_header.removeClass();
leaf_modal_header.addClass('modal_header');
leaf_modal_header.appendTo(leaf_weixin_modal);
 
var leaf_modal_header_a = jQuery('<a id="leaf_weixin_close" class="weixin_close" href="#">×</a>'); //创建一个关闭的A标签
leaf_modal_header_a.appendTo(leaf_modal_header);
 
var leaf_modal_header_h3 = jQuery('<h3 id="leaf_weixin_h3" >关注微信或公众号</h3>'); //创建一个h3
leaf_modal_header_h3.appendTo(leaf_modal_header);
 
var leaf_modal_body = jQuery('<div></div>'); //创建一个子DIV
leaf_modal_body.attr('id', 'leaf_modal_body'); //给子DIV设置ID
leaf_modal_body.removeClass();
leaf_modal_body.addClass('modal_body');
leaf_modal_body.appendTo(leaf_weixin_modal);
var leaf_modal_body_p = jQuery('<p id="leaf_webchat"><img id="low-wx-img" src="'+imgurl+'" width="220" height="220" alt="二维码加载失败..." ></p>'); //创建一个p
leaf_modal_body_p.appendTo(leaf_modal_body);
var leaf_modal_footer = jQuery('<div></div>'); //创建一个子DIV
leaf_modal_footer.attr('id', 'leaf_modal_footer'); //给子DIV设置ID
leaf_modal_footer.removeClass();
leaf_modal_footer.addClass('modal_footer');
leaf_modal_footer.appendTo(leaf_weixin_modal);
var leaf_modal_footer_div = jQuery('<div id="jiathis_weixin_tip" class="weixin_tip">打开微信,使用 “扫一扫” 即可关注。</div>'); //创建一个div
leaf_modal_footer_div.appendTo(leaf_modal_footer);
main.appendTo('body'); //将父DIV添加到BODY中
main.hide();
 
jQuery('#leaf_modal_header #leaf_weixin_close').click(function (e) {
e.preventDefault();
jQuery('#leaf_weixin_share').hide() ;
 
});
 
jQuery('li.wx-drop , li.wx-soc, .wx-item').on('click',function(e){
e.preventDefault();
if (jQuery(this).is('.wx-item')){
jQuery("#low-wx-img").attr("src",jQuery('#low-wx-author').attr('href'));
}else{
jQuery("#low-wx-img").attr("src",jQuery('#low-wx').attr('href'));
}
//判断弹出窗口是否存在
if(jQuery('#leaf_weixin_share').is(":hidden") ){
//隐藏则显示
jQuery('#leaf_weixin_share').show() ;
}else{
//显示则隐藏
jQuery('#leaf_weixin_share').hide() ;
}
});
});

代码中,它先定义了一个图片地址的变量imgurl,这个是默认的图片地址。然后创建一个div,包含了三部分,头部标题、中部图片、底部说明。创建完成后,它隐藏起来:main.hide();

当点击DIV窗体的X按钮的时候,它会关闭,也就是隐藏起来:

jQuery('#leaf_modal_header #leaf_weixin_close').click(function (e) {
e.preventDefault();
jQuery('#leaf_weixin_share').hide() ;
});

显示不同的二维码图片

因为何先生在这个主题中,可以设置网站的微信二维码和作者的微信二维码,这两个二维码可以是不同的,比如,一个网站可能会有多个作者,所以,每个作者都可能会有一个二维码。

jQuery('li.wx-drop , li.wx-soc, .wx-item').on('click',function(e){
e.preventDefault();
if (jQuery(this).is('.wx-item')){
jQuery("#low-wx-img").attr("src",jQuery('#low-wx-author').attr('href'));
}else{
jQuery("#low-wx-img").attr("src",jQuery('#low-wx').attr('href'));
}
//判断弹出窗口是否存在
if(jQuery('#leaf_weixin_share').is(":hidden") ){
//隐藏则显示
jQuery('#leaf_weixin_share').show() ;
}else{
//显示则隐藏
jQuery('#leaf_weixin_share').hide() ;
}
});

在点击li.wx-dropli.wx-soc.wx-item这三个CSS的class的时候,就会弹出二维码的窗体。

先使用e.preventDefault()屏蔽默认动作,比如A标签的跳转。

然后判断是不是作者的二维码jQuery(this).is('.wx-item'),如果是,那么将二维码的图片地址设置为作者的图片地址:

jQuery("#low-wx-img").attr("src",jQuery('#low-wx-author').attr('href'));

如果不是,则将图片地址设置为网站的微信二维码图片地址。

jQuery("#low-wx-img").attr("src",jQuery('#low-wx').attr('href'));

然后再判断这个窗口是否隐藏jQuery('#leaf_weixin_share').is(":hidden"),如果隐藏就显示jQuery('#leaf_weixin_share').show(),否则显示就隐藏jQuery('#leaf_weixin_share').hide()

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

×
打赏作者
赞(0)           打赏本站
未经允许不得转载:何先生 » 在WordPress站点不同的地方显示不同的微信二维码(lowweixin.js)
分享到: 更多 (0)

Comments 1

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. 沙发

    好吧 想不到还有这样的JS

    BanYuner
    2
    1年前 (2017-03-12)回复 Google Chrome 56.0.2924.87| Windows 10 x64| 美国

何先生的博客 专注分享 更优质

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

一木禾赚钱网盘:

点击注册