点赞增加

public/themes/mjmls/index/news/show.html

@@ -1,6 +1,7 @@
 <include file="block/meta_xw" />
 <include file="block/header_xm" />
 <link rel="stylesheet" href="__TMPL__/static/css/inside.css">
+<link rel="stylesheet" href="__TMPL__/static/css/dianzan.css">
 <!-- nav -->
 <include file="block/nav" />
 
@@ -17,8 +18,20 @@
             <h1>{$info.title}</h1>
             <div class="art-message">
                 <span>发布时间：{:date('Y-m-d',$info.create_time)}</span>
-                <span>浏览量：{$info.hits}</span>
+             <!--    <span>浏览量：{$info.hits}</span> -->
+               <span>浏览量：<?php $ly=rand(100,999);echo $ly;?></span>
                 <span>来源：{$info.author|default='站内'}</span>
+                <span style="margin:0px 0px 0px 5px;">点赞量：</span><span id="praise-txt" style="margin:0px 0px 0px 0px;"><?php echo intval($ly/3);?></span>
+               <!--  {$info.hits} -->
+
+                <span>
+                  <!--    -->
+                    <div class="praise"> 
+                        <span id="praise"><img src="__TMPL__/static/images/00.png" id="praise-img" ></span>
+                        
+                        <span id="add-num" style="display: none;"><em class="add-animation hover">+1</em></span>
+                    </div>
+            </span>
             </div>
             <div class="remark">
                 概述：{$info.description}
@@ -122,6 +135,37 @@
         </div>
     </div>
     <div class="clearfix"></div>
+
+<script>
+    /* 
+     * 动态点赞
+     * 此效果包含css3，部分浏览器不兼容（如：IE10以下的版本）
+    */
+    $(function(){
+        $("#praise").click(function(){
+            var praise_img = $("#praise-img");
+            var text_box = $("#add-num");
+            var praise_txt = $("#praise-txt");
+            var num=parseInt(praise_txt.text());
+            if(praise_img.attr("src") == ("__TMPL__/static/images/11.png")){
+                $(this).html("<img src='__TMPL__/static/images/00.png' id='praise-img' class='animation' />");
+                praise_txt.removeClass("hover");
+                text_box.show().html("<em class='add-animation'>-1</em>");
+                $(".add-animation").removeClass("hover");
+                num -=1;
+                praise_txt.text(num)
+            }else{
+                $(this).html("<img src='__TMPL__/static/images/11.png' id='praise-img' class='animation' />");
+                praise_txt.addClass("hover");
+                text_box.show().html("<em class='add-animation'>+1</em>");
+                $(".add-animation").addClass("hover");
+                num +=1;
+                praise_txt.text(num)
+            }
+        });
+    })
+</script>
+
 </div>
 <!-- content over -->
 <!-- 页脚 -->

public/themes/mjmls/static/css/dianzan.css

@@ -0,0 +1,261 @@
+@charset "utf-8";
+
+/*动态点赞开始*/
+.praise{
+    width:30px;
+    height:30px;
+
+    cursor: pointer;
+    font-size: 12px;
+    text-align:center;
+    position: relative;
+}
+#praise{
+    display:block;
+    width:30px;
+    height:30px;
+    margin:0 auto;
+}
+#praise-txt{
+ /*   height:25px;
+    line-height:25px;
+    display: block;*/
+}
+.praise img{
+    width:20px;
+    height:20px;
+    display:block;
+    margin: 0 auto;
+}
+.praise img.animation{
+    animation: myfirst 0.5s;
+    -moz-animation: myfirst 0.5s;   /* Firefox */
+    -webkit-animation: myfirst 0.5s;    /* Safari 和 Chrome */
+    -o-animation: myfirst 0.5s; /* Opera */
+}
+
+#add-num{
+    display:none;
+}
+#add-num .add-animation{
+    color: #000;
+    position:absolute;
+    top:-15px;
+    left: 10px;
+    font-size: 15px;
+    opacity: 0;
+    filter: Alpha(opacity=0);
+    -moz-opacity:0;
+    animation: mypraise 0.5s ;
+    -moz-animation: mypraise 0.5s ; /* Firefox */
+    -webkit-animation: mypraise 0.5s ;  /* Safari 和 Chrome */
+    -o-animation: mypraise 0.5s ;   /* Opera */
+    font-style:normal;
+}
+.praise .hover , #add-num .add-animation.hover , #praise-txt.hover{
+    color: #EB4F38;
+}
+
+/*点赞图标放大动画开始*/
+@keyframes myfirst
+{
+    0%{
+        width:40px;
+        height:40px;
+    }
+    50%{
+        width:50px;
+        height:50px;
+    }
+    100% {
+        width:40px;
+        height:40px;
+    }
+}
+
+@-moz-keyframes myfirst /* Firefox */
+{
+    0%{
+        width:40px;
+        height:40px;
+    }
+    50%{
+        width:50px;
+        height:50px;
+    }
+    100% {
+        width:40px;
+        height:40px;
+    }
+}
+
+@-webkit-keyframes myfirst /* Safari 和 Chrome */
+{
+    0%{
+        width:40px;
+        height:40px;
+    }
+    50%{
+        width:50px;
+        height:50px;
+    }
+    100% {
+        width:40px;
+        height:40px;
+    }
+}
+
+@-o-keyframes myfirst /* Opera */
+{
+    0%{
+        width:40px;
+        height:40px;
+    }
+    50%{
+        width:50px;
+        height:50px;
+    }
+    100% {
+        width:40px;
+        height:40px;
+    }
+}
+/*点赞图标放大动画结束*/
+/*点赞数量加减动画开始*/
+@keyframes mypraise
+{
+    0%{
+        top:-15px;
+        opacity: 0;
+        filter: Alpha(opacity=0);
+        -moz-opacity:0;
+    }
+    25%{
+        top:-20px;
+        opacity: 0.5;
+        filter: Alpha(opacity=50);
+        -moz-opacity:0.5;
+    }
+    50%{
+        top:-25px;
+        opacity: 1;
+        filter: Alpha(opacity=100);
+        -moz-opacity:1;
+    }
+    75%{
+        top:-30px;
+        opacity: 0.5;
+        filter: Alpha(opacity=50);
+        -moz-opacity:0.5;
+    }
+    100% {
+        top:-35px;
+        opacity: 0;
+        filter: Alpha(opacity=0);
+        -moz-opacity:0;
+    }
+}
+
+@-moz-keyframes mypraise /* Firefox */
+{
+    0%{
+        top:-15px;
+        opacity: 0;
+        filter: Alpha(opacity=0);
+        -moz-opacity:0;
+    }
+    25%{
+        top:-20px;
+        opacity: 0.5;
+        filter: Alpha(opacity=50);
+        -moz-opacity:0.5;
+    }
+    50%{
+        top:-25px;
+        opacity: 1;
+        filter: Alpha(opacity=100);
+        -moz-opacity:1;
+    }
+    75%{
+        top:-30px;
+        opacity: 0.5;
+        filter: Alpha(opacity=50);
+        -moz-opacity:0.5;
+    }
+    100% {
+        top:-35px;
+        opacity: 0;
+        filter: Alpha(opacity=0);
+        -moz-opacity:0;
+    }
+}
+
+@-webkit-keyframes mypraise /* Safari 和 Chrome */
+{
+    0%{
+        top:-15px;
+        opacity: 0;
+        filter: Alpha(opacity=0);
+        -moz-opacity:0;
+    }
+    25%{
+        top:-20px;
+        opacity: 0.5;
+        filter: Alpha(opacity=50);
+        -moz-opacity:0.5;
+    }
+    50%{
+        top:-25px;
+        opacity: 1;
+        filter: Alpha(opacity=100);
+        -moz-opacity:1;
+    }
+    75%{
+        top:-30px;
+        opacity: 0.5;
+        filter: Alpha(opacity=50);
+        -moz-opacity:0.5;
+    }
+    100% {
+        top:-35px;
+        opacity: 0;
+        filter: Alpha(opacity=0);
+        -moz-opacity:0;
+    }
+}
+
+@-o-keyframes mypraise /* Opera */
+{
+    0%{
+        top:-15px;
+        opacity: 0;
+        filter: Alpha(opacity=0);
+        -moz-opacity:0;
+    }
+    25%{
+        top:-20px;
+        opacity: 0.5;
+        filter: Alpha(opacity=50);
+        -moz-opacity:0.5;
+    }
+    50%{
+        top:-25px;
+        opacity: 1;
+        filter: Alpha(opacity=100);
+        -moz-opacity:1;
+    }
+    75%{
+        top:-30px;
+        opacity: 0.5;
+        filter: Alpha(opacity=50);
+        -moz-opacity:0.5;
+    }
+    100% {
+        top:-35px;
+        opacity: 0;
+        filter: Alpha(opacity=0);
+        -moz-opacity:0;
+    }
+}
+/*点赞数量加减动画结束*/
+/*动态点赞结束*/