在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 main.attr('id', 'leaf_weixin_share'); //给父DIV设置ID main.addClass('weixin_share'); //添加CSS样式 var leaf_weixin_modal = jQuery('
'); //创建一个子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 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标签 leaf_modal_header_a.appendTo(leaf_modal_header); var leaf_modal_header_h3 = jQuery('

关注微信或公众号

'); //创建一个h3 leaf_modal_header_h3.appendTo(leaf_modal_header); var leaf_modal_body = jQuery('
'); //创建一个子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 leaf_modal_body_p.appendTo(leaf_modal_body); var leaf_modal_footer = jQuery('
'); //创建一个子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 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()

转载请注明出处。
何先生 » 在WordPress站点不同的地方显示不同的微信二维码(lowweixin.js)
Loading...

发表评论

表情
图片 链接 代码

1 评论

  1. 好吧 想不到还有这样的JS

提供最优质的资源集合

立即查看 了解详情