HTML点赞功能如何使用?

HTML点赞功能如何使用?,第1张

安装localStorage即可。

var paramJSON = {参数1:"值0",参数2:"值1"}

//URL路径为你提交到后台录入数据库的 *** 作,也就是你的图片对应的路径

//paramJSON为你需要传递的参数 可选

//function回调函数为你点赞录入数据库后返回的消息,比如是否录入数据库成功等

$.post("URL路径", paramJSON,

function(data){

alert("Data Loaded: " + data)

})

HTML+CSS网站点赞和打赏的功能,实现方法如下:

1、HTML代码:

<body>

<div class="thumbs_content">

    <a href="javascript:void(0)" class="thumbs_button fa fa-thumbs-up" title="点赞,支持一下"> 点赞</a>

    <a href="javascript:void(0)" class="reward_button fa fa-money" title="打赏,支持一下"> 打赏</a>

    <span class="clear"></span>

</div>

</body>

2、CSS代码如下:

<style type="text/css">

.thumbs_content{

    width: 291px

    margin: 0 auto

}

.thumbs_button{

    float: left

    width:145px

    text-align: center

    margin:5px auto

    height: 45px

    line-height: 45px

    background-color:#444

    color:#fbfbfb

    text-align:center

    text-decoration:none

    font-weight:bold

    font-size:16px

    transition: all 0.3s

    border-radius: 0 0 0 25px

    -webkit-border-radius: 0 0 0 25px

    -moz-border-radius: 0 0 0 25px

    -o-border-radius: 0 0 0 25px

}

.reward_button{

    float: left

    width:145px

    text-align: center

    margin:5px auto

    height: 45px

    line-height: 45px

    background-color:#cd4450

    color:#fbfbfb

    text-align:center

    text-decoration:none

    font-weight:bold

    font-size:16px

    border-left:1px solid #fbfbfb

    transition: all 0.3s

    border-radius: 0 25px 0 0

    -webkit-border-radius: 0 25px 0 0

    -moz-border-radius: 0 25px 0 0

    -o-border-radius: 0 25px 0 0

}

.thumbs_button:hover, .reward_button:hover{

    opacity:0.8

    font-size:18px

}

.clear{

    clear:both

</style>

3、效果图:


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/7356954.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-04
下一篇 2023-04-04

发表评论

登录后才能评论

评论列表(0条)

保存