emlog博客打赏代码实现打赏功能

  • 首页 > 技术学习
  • 作者:小小的一世
  • 时间: 2016年12月23日 23:35
  • 字数:2600 个
  • 字号:
  • 评论:5 条
  • 浏览:7714 次
  • 百度:百度已收录
  • 分类: 技术学习
  • 时间:2016-12-23 23:35 热度:7714° 评论:5 条 

    其实很早之前百度就推出了网站打赏功能,这一举措最火爆的时候应该就是罗尔事件,打赏两百多万。虽然是微信的打赏,但是我们不难看出真正的营销文章市场,一篇催人泪下的文章打赏那可不是吹嘘的。但是你的emlog博客应用了博客打赏了吗?其实之前本站分享了emlog百度打赏插件,但是还是那句话代码只是简洁的方式,并不是最好的方式。还是有很多通过代码就能实现的,今天我们就分享下用代码实现打赏。


    第一步:在js中写入下面代码

    1. 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中插入如下代码
    1. .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步:在需要放置的地方插入下面代码,注意把其中的图片地址改为你自己的哦。


    1. <div class="sy_shang">< onclick="dashangToggle()" class="dashang" title="打赏,支持一下">打赏</a>
    2. <div class="shang_box">< onclick="dashangToggle()" title="关闭" style="float:right;">X</a>
    3. <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>
    4. <div id="sl_shang0"><img src="/images/shang/zfb.jpg"><br>打开支付宝扫一扫</div><div id="sl_shang1" style="display:none;"><img src="/images/shang/wx.jpg"><br>使用微信扫一扫</div><div id="sl_shang2" style="display:none;"><img src="/images/shang/qq.jpg"><br>打开QQ扫一扫</div>
    5. </div></div>
    6. </div>
    把其中的图片换成自己的链接,就完成了。
    正文到此结束
    您阅读这篇文章共花了: 
    本文链接:http://www.suozy.cn/post-12.html
    版权声明:若无特殊注明,本文皆为《小小的一世》原创,转载请保留文章出处。

    热门推荐

    Hello! How do you see it?

    你还可以输入250 / 250 个字

    嘻嘻 大笑 可怜 吃惊 害羞 调皮 鄙视 示爱 大哭 开心 偷笑 嘘 奸笑 委屈 抱抱 愤怒 思考 日了狗

    已有5条吐槽

    杨小杰

    2018-10-08 15:03 浙江省移动
    贵站界面很好看啊

    小小的一世

    2018-10-08 17:30 山西省太原市联通
    @杨小杰:谢谢Thanks♪(・ω・)ノ,你的也很好看

    昵称获取失败

    2018-06-14 21:08 浙江省温州市移动
    博主是用的寒光模版么?

    小小的一世

    2018-06-15 16:13 山西省太原市联通
    @昵称获取失败:不是

    昵称获取失败

    2018-08-18 05:57 广东省广州市电信
    @昵称获取失败:face 呵呵呵呵呵呵

    返回顶部    返回首页    手气不错    手机版本   后花园   
    版权所有:小小的一世    站点维护: 小小的一世   若要幸福,不写忧伤;红尘满界,不道惆怅。 【风雨一生兼程,灵魂轻盈随行】   鲁ICP备15009546号-1