Community Learn Tools Library Leisure
search
English
Home > List of blog posts > jQuery动画效果、完善评论点赞功能练习、tab切换-2019年4月4日
Blogger Information
Blog 23
fans 1
comment 0
visits 19789
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
jQuery动画效果、完善评论点赞功能练习、tab切换-2019年4月4日
蛋糕356的博客
Original
848 people have browsed it

一、jq实现动画效果

实例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>JQ动画效果</title>
	<style type="text/css">
		.content{
			margin: 20px;
			float: left;
			font-size: 10px;
		}
		.content button{
			width: 150px;
			height: 30px;
			background: #ccc;
			text-align: center;
			outline: none;
			border: none;

		}
		button:hover{
			color: red;
			cursor: pointer;
		}
		.content p{
			width: 150px;
			height: 200px;
			text-align: center;
			/*display: inline-block;*/
			background: blue;
			line-height: 200px;
			position: relative;
			border: none;
			margin-top: 0px;
		}
		#box{
			width: 73px;
		}
	</style>
	<script type="text/javascript" src="static/jquery-3.3.1.min.js"></script>
</head>
<body>
	<div class="content">
		<button class="button1">点我隐藏</button>
		<p class="p1">我是Hide</p>
	</div>
	<div class="content">
		<button class="button2">点我显示</button>
		<p class="p2">我是Show</p>
	</div><div class="content">
		<button class="button3">事件切换</button>
		<p class="p3">我是toggle</p>
	</div><div class="content">
		<button class="button4">淡入元素</button>
		<p class="p4">我是fadeIn</p>
	</div><div class="content">
		<button class="button5">淡出元素</button>
		<p class="p5">我是fadeOut</p>
	</div><div class="content">
		<button class="button6">淡出到指定值</button>
		<p class="p6">fadeTo</p>
	</div><div class="content">
		<button class="button7">下滑效果</button>
		<p class="p7">我是slideDown</p>
	</div><div class="content">
		<button class="button8">上滑效果</button>
		<p class="p8">我是slidUp</p>
	</div><div class="content">
		<button class="button9">动画效果</button>
		<p class="p9">我是animate</p>
	</div><div class="content">
		<button class="button10" id="box">动画效果</button> <button class="button11" id="box">停止动画</button>
		<p class="p10">动画效果1</p>
	</div>
	<script type="text/javascript">
		$(function(){
			//隐藏
			$('.button1').click(function(){
				$('.p1').hide(3000);//3000指隐藏速度
			})
			//显示被隐藏的元素
			$('.p2').hide();//先隐藏
			$('.button2').click(function(){
				$('.p2').show();//3000指隐藏速度
			})
			//toggle事件切换，显示被隐藏的元素，并隐藏已显示的元素
			$('.button3').click(function(){
				$('.p3').toggle();
			})
			//淡入效果fadeIn
			$('.p4').hide();
			$('.button4').click(function(){
				$('.p4').fadeIn(3000);
			})
			//淡出效果fadeOut
			$('.button5').click(function(){
				$('.p5').fadeOut(3000);
			})
			//淡出到指定值效果fadeTo
			$('.button6').click(function(){
				$('.p6').fadeTo(3000,0.5);
			})
			//下滑动效果slideDown
			$('.p7').hide();
			$('.button7').click(function(){
				$('.p7').slideDown(3000);
			})
			//上滑动效果slideUp
			$('.button8').click(function(){
				$('.p8').slideUp();
			})
			//自定义动画效果animate,语法：$(选择器).animate({params},speed)，params是必须的参数
			$('.button9').click(function(){
				$('.p9').animate({fontSize:'20px'},3000);//font和size之间不要用“-”，
			})
			//自定义动画效果animate,语法：$(选择器).animate({params},speed)，params是必须的参数，animate无法改变渐变背景色
			$('.button10').click(function(){
				$('.p10').animate({
					fontSize:'20px',
					height:'400px',
					left:'300px'
				},3000);//font和size之间不要用“-”
			})
			//停止动画效果stop(),该方法适用于所有jq动画效果，包括滑动，淡入淡出
			$('.button11').click(function(){
				$('.p10').stop();
			})
			//事件切换：hover(over,out),over:鼠标移上触发一个函数，out：鼠标移除触发一个函数
			$('.button11').hover(function(){
				$('.p10').stop();
			})
		})
	</script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

二、完善点评功能

实例

<!DOCTYPE html>
<html>
<head>
<title>评论功能练习</title>
<meta charset="utf-8">
<link rel="icon" type="image/x-icon" href="static/images/logo.png">
<link rel="stylesheet" type="text/css" href="static/style.css">
<script type="text/javascript" src="static/jquery-3.3.1.min.js"></script>
</head>
<body>
<div id="list">
    <div class="box clearfix">
<!-- 删除说说按钮 close-->
        <a class="close" href="javascript:;">×</a>
        <img class="head" src="static/images/1.png" alt="">
        <div class="content">
            <div class="main">
                <p class="txt">
                    <span class="user">西门大官人: </span>
                      ~ All the luck is for you. ~
                </p>
                <img class="pic" src="static/images/img1.jpg" alt="">
            </div>
            <div class="info clearfix">
                <span class="time">02-14 23:01</span>
<!-- 给说说点赞 praise -->
                <a class="praise" href="javascript:;">赞</a>
            </div>
            <div class="praises-total" total="4" style="display: block;">4个人觉得很赞</div>
<!--评论内容-->           
            <div class="comment-list">
           <!--   每次评论要添加的内容跟标签   -->
                <div class="comment-box clearfix" user="self">
                    <img class="myhead" src="static/images/4.jpg" alt="">
                    <div class="comment-content">
                        <p class="comment-text"><span class="user">我:</span>你说的都对……</p>
                        <p class="comment-time">
                            2019-01-19 14:36
                            <a href="javascript:;" class="comment-praise" total="1" my="0" style="display: inline-block">1赞</a>
                            <a href="javascript:;" class="comment-operate">删除</a>
                        </p>
                    </div>
                </div>
                

                <!--添加结束-->                                                           
            </div>
<!--评论内容结束--> 
            <div class="text-box">
                    <textarea class="comment" placeholder="评论…"></textarea>
                    <button class="btn">回 复</button>
                    <span class="word"><span class="length">0</span>/140</span>
            </div>                
        </div>            
    </div> 
                   
    <div class="box clearfix">
        <a class="close" href="javascript:;">×</a>
        <img class="head" src="static/images/2.jpg" alt=""/>
        <div class="content">
            <div class="main">
                <p class="txt">
                    <span class="user">欧阳克 : </span>三亚的海滩很漂亮。
                </p>
                <img class="pic" src="static/images/img5.jpg" alt=""/>
            </div>
            <div class="info clearfix">
                <span class="time">02-14 23:01</span>
                <a class="praise" href="javascript:;">赞</a>
            </div>
            <div class="praises-total" total="0" style="display: none;"></div>
            <div class="comment-list">
                <div class="comment-box clearfix" user="other">
                    <img class="myhead" src="static/images/3.png" alt="">
                    <div class="comment-content">
                        <p class="comment-text"><span class="user">韦小宝：</span>我也想去三亚。</p>
                        <p class="comment-time">
                            2019-01-19 14:36
                            <a href="javascript:;" class="comment-praise" total="0" my="0">赞</a>
                            <a href="javascript:;" class="comment-operate">删除</a>
                        </p>
                    </div>
                </div>
            </div>
            <div class="text-box">
                    <textarea class="comment" placeholder="评论…"></textarea>
                    <button class="btn">回 复</button>
                    <span class="word"><span class="length">0</span>/140</span>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
   $(function(){
      $('.comment').on('keyup',function(){//on() 方法可以在被选元素及子元素上添加一个或多个事件处理程序; 绑定事件 动态绑定 
        //完成在评论框输入文字，评论输入框右下角的字数在减少效果
            var lenth=$(this).val().length;//这里的this就相当于.comment
            $(this).parents('.text-box').find('.length').text(140-lenth);
      })
      
      $(document).on('click','.btn',function(){
          var val=$(this).parents('.text-box').find('.comment').val();//获取文本框中输入的内容
          // var val=$(this).prev().val();
          if (val=='') {
              alert("请输入内容。。。");
          }else{
          var date=new Date();
          var time=date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate()+'  '+date.getHours()+':'+date.getMinutes()+':'+date.getSeconds();//获取时间日期
          // var    y=date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate()+'  '+date.getHours()+':'+date.getMinutes()+':'+date.getSeconds();
          //添加评论标签
          var html='<div class="comment-box clearfix" user="self"><img class="myhead" src="static/images/4.jpg" alt=""><div class="comment-content"><p class="comment-text"><span class="user">我:</span>'+val+'你说的都对……</p><p class="comment-time">'+time+'<a href="javascript:;" class="comment-praise" total="1" my="0" style="display: inline-block">1赞</a><a href="javascript:;" class="comment-operate">删除</a></p></div></div>'
          //输出评论内容
          $(this).parents('.box').find('.comment-list').append(html);
          //清空文本框内容
          $(this).parents('.box').find('.comment').val("");
        }
      })
      //删除评论内容
      $(document).on('click','.comment-operate',function(){
        if (confirm("确定删除")) {//confirm()是一个类似于alert()弹窗提示
          $(this).parents('.comment-box').remove();//找到当前删除按钮的父级元素并删除
        }
      })
      //添加评论点赞个数
      $(document).on('click','.comment-praise',function(){
         var num=parseInt($(this).parents('.comment-box').find('.comment-praise').attr('total'))+1;//parseInt是把字符串转换为整数
         $(this).attr('total',num);//注意num的前面是逗号，不是分号
         $(this).html(num+'赞');
      })
      //给说说更换点赞小手图片
      $(document).on('click','.praise',function(){
        $(this).attr('class','praise_2');//注意，praise_2前面没有点号
      })
      //删除说说
      $(document).on('click','.close',function(){
        $(this).parents('.box').remove();
      })

   })
</script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

三、tab自动切换

实例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>jq实现tab切换</title>
	<link rel="stylesheet" type="text/css" href="css/style1.css">
	
</head>
<body>
	<div id="notice" class="notice">
		<div id="notice-tit" class="notice-tit">
			<ul>
				<li class="select"><a href="">公告</a></li>
				<li><a href="">规则</a></li>
				<li><a href="">论坛</a></li>
				<li><a href="">安全</a></li>
				<li><a href="">公益</a></li>
			</ul>
		</div>
		<div id="notice-con" class="notice-con" >
			<div class="mod">
			<ul>
				<li><a href="">曝范冰冰将参演好莱坞大片《355》曝范冰冰将参演好莱坞大片《355》</a></li>
				<li><a href="">美在台协会首次公开承认有美军进驻</a></li>
				<li><a href="">消防员住地一排***祭战友</a></li>
				<li><a href="">小米成立新公司经营范围包括房屋租赁</a></li>
			</ul>
		</div>
		<div class="mod"  style="display: none;">
			<ul>
				<li>[<span><a href="">通知</a>]</span><a href="">通知</a></li>
				<li>[<span><a href="">通知</a>]</span><a href="">通知美在台协会首次公开承认有美军进驻</a></li>
				<li>[<span><a href="">通知</a>]</span><a href="">通知滥发"即将换新</a></li>
				<li>[<span><a href="">通知</a>]</span><a href="">通知比特币严管啦！</a></li>
			</ul>
		</div>
		<div class="mod" style="display: none;">
			<ul>
				<li><a href="">金牌卖家再启航</a></li>
				<li><a href="">美在台协会首次公开承认有美军进驻</a></li>
				<li><a href="">消防员住地一排***祭战友</a></li>
				<li><a href="">小米成立新公司经营范围包括房屋租赁</a></li>
			</ul>
		</div>
		<div class="mod" style="display: none;">
			<ul>
				<li><a href="">又爱又恨优惠劵 </a></li>
				<li><a href="">美在台协会首次公开承认有美军进驻</a></li>
				<li><a href="">消防员住地一排***祭战友</a></li>
				<li><a href="">小米成立新公司经营范围包括房屋租赁</a></li>
			</ul>
		</div>
		<div class="mod" style="display: none;">
			<ul>
				<li><a href="">个人重要信息要管牢！</a></li>
				<li><a href="">美在台协会首次公开承认有美军进驻</a></li>
				<li><a href="">消防员住地一排***祭战友</a></li>
				<li><a href="">小米成立新公司经营范围包括房屋租赁</a></li>
			</ul>
		</div>
	</div>
</div>
<script type="text/javascript">
	var num=0
	var timer=null;
	var noticeTit=document.getElementById('notice-tit');
	var noticeCon=document.getElementById('notice-con');
	var title=noticeTit.getElementsByTagName('li');
	var con=noticeCon.getElementsByClassName('mod');

	function autoplay(){
		num++;//每次调用num+1
		if(num==title.length){
			num=0;
		}
		showTab(num);

	}

	function showTab(i){
		for (var j = 0; j<con.length; j++) {//注意，j<con.length不是j<=con.length
			con[j].style.display='none';
			title[j].className='';//className属性设置或返回元素的class属性，这次的循环不要让其显示，故为空。
		}
		title[i].className='select';
		con[i].style.display='block';
	}
	//鼠标移上，显示相对应的div
		for (var i =0; i<title.length; i++) {
			title[i].index=i;//index() 方法返回指定元素相对于其他指定元素的 index 位置，也就是导航与内容页面绑定
			title[i].onmouseenter=function(){ //鼠标移上，调用这个函数，显示对应的div
				clearInterval(timer);
				showTab(this.index);
				num=this.index;
				
			}
			//鼠标移除自动轮播
			 title[i].onmouseleave=function(){// 在鼠标指针移出元素上时触发
			     timer=setInterval(autoplay,2000);
		     }
		     //页面加载完成自动轮播
		     window.onload=function(){// 在鼠标指针移出元素上时触发
			     timer=setInterval(autoplay,2000);
		     }
		}
</script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

Correction status：Uncorrected

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post