导语:叶子在上一篇文章中提到了lowweixin.js,这个js文件是叶子自己写的,用来生成二维码图片的弹出窗口,在不同的地方点击不同的微信图标,会弹出不同的预设的二维码图片。我们来看看如何实现。
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-drop、 li.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()
。
结束
你看懂这段代码了吗?如果没有看懂,请在下面留言或加入我们的QQ群,一起来学习讨论。
真没有看懂。。不过支持原创!