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

2016-8-12 / 63 评论 / 24301 阅读

经常在一些博客中看到有一个打赏功能。今天舍力也写了一个简单的打赏功能代码,需要注意的是,博客必须加载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步就完成了。

评论一下?

OωO
取消
    1. 头像
      冷筱宇
      第50楼
      看了半天愣是没看懂
      回复
    1. 头像
      心已成佛
      第49楼
      http://www.ymldh.net/gzdd/54.html用了你的这个打赏代码,可以用,但界面不太好看,能不能共享你这个页面的觉得很赞和打赏源码?感谢,我的邮箱138388616@qq.com.
      回复
      1. 头像
        舍力
        @心已成佛:我就是用的这个,页面不好看都是css的问题,这个我就不普及了。。。
        回复
    1. 头像
      达人
      第48楼
      不在默认模块里怎么调用?js和css的名字叫什么才能调用成功
      回复
      1. 头像
        舍力
        @达人:只要有加载js的都可以用的,那个默认的只是举例而已。。把所有的代码都放上去就可以实现的
        回复
    1. 头像
      吾爱’s
      第47楼
      弄完后点击无反应!不弹出任何东西
      回复
      1. 头像
        舍力
        @吾爱’s:再次重申:测试请用默认模板,你的问题应该是js冲突的问题,这个我没有办法去帮你弄的
        回复
    1. 头像
      灰机blog
      第46楼
      来贵站学习学习
      回复
    1. 头像
      设计师
      第45楼
      看看怎么调用
      回复
    1. 头像
      杏壳吧
      第44楼
      请问CSS写到哪个文件里?求路径。
      回复
    1. 头像
      君子政
      第43楼
      老大,请问是什么CSS?
      回复
    1. 头像
      君子政
      第42楼
      学习一下
      回复
    1. 头像
      半夏
      第41楼
      学习一下
      回复
    1. 头像
      有哥哥
      第40楼
      想学习一下
      回复
    1. 头像
      悠久娱乐网
      第39楼
      想学习一下
      回复
    1. 头像
      陌逸轩
      第38楼
      学习一下
      回复
    1. 头像
      筱豪
      第37楼
      想学习一下
      回复
      1. 头像
        舍力
        @筱豪:欢迎!!!
        回复
    1. 头像
      海诚
      第36楼
      学习一下
      回复
    1 2 3 4