一、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>运行实例 »
点击 "运行实例" 按钮查看在线实例