当前位置:首页 » 网站源码 » emlog教程 » 详情

为自己的博客增加打赏功能之EMLOG博客教程

经常在一些博客中看到有一个打赏功能。今天舍力也写了一个简单的打赏功能代码,需要注意的是,博客必须加载js,emlog博客默认为include/lib/js/jquery/jquery-1.7.1.js,不确定是否会与你们本身的主题特效有冲突。还有的就是,动手之前,记得备份,养成好习惯!
第一步:在js中写入下面代码
function dashangToggle(){$(".shang_box").fadeToggle();}function changeItem(i){var k = 3;for(var j = 0;j < k;j++){if(j == i){document.getElementById("sl_shang" + j).style.display = "block";}else{document.getElementById("sl_shang" + j).style.display = "none";}}}function opay(){document.getElementById("sl_shang").target="_parent";}//舍力制作打赏js
第2步:在css中插入如下代码
.sy_shang{clear:both;overflow:hidden;}.shang_box{width:300px;height:300px;padding:10px;background-color:#fff;border-radius:10px;position:fixed;z-index:1000;left:50%;top:50%;margin-left:-200px;margin-top:-200px;border:1px dotted #dedede;display:none;}.dashang{display:block;width:100px;margin:5px auto;height:25px;line-height:25px;padding:10px;background-color:#E74851;color:#fff;text-align:center;text-decoration:none;border-radius:10px;font-weight:bold;font-size:16px;transition:all 0.3s;}.dashang:hover{opacity:0.8;padding:15px;font-size:18px;}#sl_shang0,#sl_shang1,#sl_shang2{text-align:center;}#sl_shang0 img,#sl_shang1 img,#sl_shang2 img{max-width:260px;}.sl_shang{overflow:hidden;}.sl_shang b{font-size:18px;}.sl_shang ul{margin-top:10px; clear:both; overflow:hidden;}.sl_shang li{float:left;margin-left:10px;}
第3步:在需要放置的地方插入下面代码,注意把其中的图片地址改为你自己的哦。
<div class="sy_shang"><a href="javascript:void(0)" onclick="dashangToggle()" class="dashang" title="打赏,支持一下">打赏</a> <div class="shang_box"><a href="javascript:void(0)" onclick="dashangToggle()" title="关闭" style="float:right;">X</a> <div id="sl_shang" onsubmit="return postcheck()"><div class="sl_shang"><b>打赏方式:</b><ul><li><input type="radio" name="paytype" onclick="opay();return changeItem(0);" checked="checked" />支付宝</li><li><input type="radio" name="paytype" onclick="opay();return changeItem(1);" />微信</li><li><input type="radio" name="paytype" onclick="opay();return changeItem(2);" />QQ红包</li></ul></div> <div id="sl_shang0"><img src="http://www.shuyong.net/content/uploadfile/images/shang/zfb.jpg"><br>打开支付宝扫一扫</div><div id="sl_shang1" style="display:none;"><img src="http://www.shuyong.net/content/uploadfile/images/shang/wx.jpg"><br>使用微信扫一扫</div><div id="sl_shang2" style="display:none;"><img src="http://www.shuyong.net/content/uploadfile/images/shang/qq.jpg"><br>打开QQ扫一扫</div> </div></div> </div>
以上3步就完成了。

打赏站长

打赏方式:

X
  • 支付宝
  • 微信
  • QQ红包

打开支付宝扫一扫
文章作者:站长的小便 日期:2018年08月03日 星期五   分类:emlog教程   浏览(1455)
本文地址:https://www.laolibab.cn/Emlogjc/597.html   [百度正在收录]
短网址: [复制短网址]
声明:本页信息由网友自行发布或来源于网络,真实性、合法性由发布人负责,请仔细甄别!本站只为传递信息,我们不做任何双方证明,也不承担任何法律责任。文章内容若侵犯你的权益,请联系本站删除!
本文最后更新于2018-8-3,已超过 1 年没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!

相关阅读

留言咨询

自动获取QQ

昵称

邮箱

网址

寻元素 - 专注免抠png素材设计网站

    寻元素 - 专注免抠png素材设计网站

老李云

    老李云

协助本站seo优化,点击百度一下

    百度一下

二维码在线生成

关于我们

    站长导航网提供网站SEO优化、SEM推广营销(百度/360/搜狗收录优化)、企业建站、搜索引擎教学等服务。
    联系我们:给我发QQ消息 加入QQ群

联盟广告

站点统计

  • 收录网址:4084 个
  • 黑名单:66 个
  • 发布文章:7971 条
  • 总访问量:13670684次
  • 评论总数:4934 条
  • 用户总数:239
  • 本站运行:3年6月20天
展开
关闭 提交收录 审核状态 SEO实战 SEO外链 在线工具 资源大全 骗子公布 本站公告