前端开发之jQuery效果篇
主要内容：
一、显示与隐藏
显示与隐藏即 show() 和 hide() ，能够控制元素显示或隐藏。
实例：
<script type="text/javascript">
var isShow = true;
$('#btn').click(function () {
if(isShow){
$('.box').show(3000,function () {
$('.box').text('盒子现身了');
isShow = false;
$('#btn').text('隐藏');
})
}
else{
$('.box').hide(2000,function () {
$('.box').text('');
isShow = true;
$('#btn').text('显示');
})
}
})
</script>
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery的效果</title>
<style type="text/css"> .box{
width: 300px;
height:200px;
border:2px solid gold;
display: none;
}
</style>
</head>
<body>
<div class="box"> </div>
<button id="btn">显示</button>
</body>
<script src="../jquery-3.2.1.js"></script>
<script type="text/javascript">
// $('#btn').click(function () {
// $('.box').css('display','block');
// }); // jQuery提供了一些方法，如show(),hide() 控制元素显示或隐藏
var isShow = true;
$('#btn').click(function () {
if(isShow){
$('.box').show(3000,function () {
$('.box').text('盒子现身了');
isShow = false;
$('#btn').text('隐藏');
})
}
else{
$('.box').hide(2000,function () {
$('.box').text('');
isShow = true;
$('#btn').text('显示');
})
}
})
</script>
</html>
二、滑动效果
有两种实现方式，即 slideDown()/slideUp() 和 slideToggle().
第一种方式：使用 slideDown() 和 slideUp().
实例：
<script type="text/javascript">
$(document).ready(function () {
$('#btn').hover(function () {
$('#box').slideDown(2000,function () {
$(this).text('大吉大利，今晚吃鸡...');
});
},function () {
$('#box').slideUp(4000,function () {
$(this).text('');
});
})
})
</script>
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>slide滑动效果</title>
<style type="text/css">
#box{
width:300px;
height:300px;
border:2px solid greenyellow;
display: none;
}
</style>
</head>
<body>
<div id="box"></div>
<button id="btn">显示</button>
</body>
<script src="../jquery-3.2.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#btn').hover(function () {
$('#box').slideDown(2000,function () {
$(this).text('大吉大利，今晚吃鸡...');
});
},function () {
$('#box').slideUp(4000,function () {
$(this).text('');
});
})
})
</script>
</html>
第二种方式：使用 slideToggle() 。
实例：
<script type="text/javascript">
$(document).ready(function () {
isShow = true;
$('#btn').click(function () {
$('#box').slideToggle(3000,function () {
if(isShow){
$('#btn').text('隐藏');
isShow = false;
}
else{
$('#btn').text('显示');
isShow = true;
}
});
})
})
</script>
</html>
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>slide滑动效果</title>
<style type="text/css">
#box{
width:300px;
height:300px;
border:2px solid greenyellow;
display: none;
}
</style>
</head>
<body>
<div id="box"></div>
<button id="btn">显示</button>
</body>
<script src="../jquery-3.2.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
isShow = true;
$('#btn').click(function () {
$('#box').slideToggle(3000,function () {
if(isShow){
$('#btn').text('隐藏');
isShow = false;
}
else{
$('#btn').text('显示');
isShow = true;
}
});
})
})
</script>
三、淡入和淡出效果
1、几对效果，fadeIn / fadeOut，fadeTo，fadeToggle。
$(selector).fadeIn(speed,callback);可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。 fadeOut() 方法用于淡出可见元素。$(selector).fadeOut(speed,callback);可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。可选的 callback 参数是 fading 完成后所执行的函数名称。 fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。
$(selector).fadeToggle(speed,callback); fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。$(selector).fadeTo(speed,opacity,callback);
必需的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。 fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。 可选的 callback 参数是该函数完成后所执行的函数名称。
2、fadeIn / fadeOut 实例（fadeTo表示最终效果，配合淡入淡出使用）：
<script type="text/javascript">
$(document).ready(function () {
// 当鼠标从元素上移开时，改变元素的显示状态
$('#btn').mouseout(function(){
$('#box').fadeIn(3000); // fadeIn() 用于淡入已隐藏的元素。
//$('#box').fadeIn('slow');
$('#box').fadeOut(1000); // 淡出
$('#box').fadeTo(2000,0.3); // 最终状态
});
})
</script>
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>fade淡入淡出</title>
<style type="text/css">
#box{
width:300px;
height:300px;
border:2px solid #b3d7ff;
display:none;
}
</style>
</head>
<body>
<div id="box"> </div>
<button id="btn">显示</button>
</body>
<script src="../jquery-3.2.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
// 当鼠标从元素上移开时，改变元素的显示状态
$('#btn').mouseout(function(){
$('#box').fadeIn(3000); // fadeIn() 用于淡入已隐藏的元素。
// $('#box').fadeIn('slow');
$('#box').fadeOut(1000); // 淡出
$('#box').fadeTo(2000,0.3); // 最终状态
});
})
</script>
</html>
3、fadeToggle实例
<script type="text/javascript">
$(document).ready(function () {
$('#btn').click(function(){
$('#box').toggle(3000);
$("#box").text("我会变身！");
$("#box").fadeTo(2000,0.3);
})
})
</script>
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>fade淡入淡出</title>
<style type="text/css">
#box{
width:300px;
height:300px;
border:2px solid #b3d7ff;
display:none;
}
</style>
</head>
<body>
<div id="box"> </div>
<button id="btn">显示</button>
</body>
<script src="../jquery-3.2.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#btn').click(function(){
$('#box').toggle(3000);
$("#box").text("我会变身！");
$("#box").fadeTo(2000,0.3);
})
})
</script>
</html>
四、动画效果
关于动画效果，这里给大家介绍两种玩法。
玩法一：无延迟动画，即打开网页或点击接触选项等情况下，立即出现对应动画。
实例：
script type="text/javascript">
$(document).ready(function () {
$('#start').click(function () {
$('#box').animate({
width:'300px',
height:'300px',
},10000)
});
$('#stop').click(function () {
$('#box').stop()
})
})
</script>
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>animate动画</title>
<style type="text/css">
#box{
width:100px;
height:100px;
border:2px solid mediumspringgreen;
position: absolute;
font-size:14px;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<button id="start">动画</button>
<button id="stop">停止</button>
<div id="box">
hello,everyone!
</div>
</body>
<script src="../jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#start').click(function () {
$('#box').animate({
width:'300px',
height:'300px',
},10000)
});
$('#stop').click(function () {
$('#box').stop()
})
})
</script>
</html>
玩法二：延迟播放动画，即 delay()。
实例：
<script type="text/javascript">
$(document).ready(function () {
$('#box').animate({
left:'200px',
top:'300px'
}).delay(2000).animate({top:'400px'}); // delay()是指的延迟 })
</script>
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>animate动画</title>
<style type="text/css">
#box{
width:100px;
height:100px;
border:2px solid mediumspringgreen;
position: absolute;
font-size:14px;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<button id="start">动画</button>
<button id="stop">停止</button>
<div id="box">
hello,everyone!
</div>
</body>
<script src="../jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#box').animate({
left:'200px',
top:'300px' }).delay(2000).animate({top:'400px'}); // delay()是指的延迟
})
</script>
</html>
五、弹出广告效果
综合运用前几个方法，就可以得到弹出的广告效果。
实例：
<script type="text/javascript">
$(document).ready(function () {
$('#box').slideDown('normal').slideUp('fast').fadeIn(2000).click(function () {
$(this).fadeOut(1000);
})
})
</script>
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>弹出广告</title>
<style type="text/css">
#box{
width:200px;
height:200px;
position:absolute;
right:10px;
bottom:0;
display:none;
}
</style>
</head>
<body>
<div id="box">
<img src="../../lufei.jpg" style="width:80%; height:50%;"/>
</div>
</body>
<script src="../jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#box').slideDown('normal').slideUp('fast').fadeIn(2000).click(function () {
$(this).fadeOut(1000);
})
})
</script>
</html>
前端开发之jQuery效果篇的更多相关文章
- 前端开发之jQuery库
使用jquery开发的时候,如果我们不想使用自己的jquery文件,那么可以引用现成的地址.方便日常开发使用 jquery-2.0以上版本 (注!不再支持IE 6/7/8) jquery-2.0.0百 ...
- 前端开发之jQuery位置属性和筛选方法
主要内容: 1.jQuery的位置属性及实例 (1)位置属性 (2)实例 --- 仿淘宝导航栏 2.jQuery的筛选方法及实例 (1)筛选方法 (2)实例一:嵌套选项卡 (3)实例二:小米官网滑动 ...
- 前端开发之jQuery属性和文档操作
主要内容: 1.jQuery属性操作 2.jQuery文档操作 一.jQuery属性操作 1.什么是jQuery的属性操作? jQuery的属性操作模块包括四个部分:html属性操作,dom属性操作, ...
- 前端开发之jQuery篇--选择器
主要内容: 1.jQuery简介 2.jQuery文件的引入 3.jQuery选择器 4.jQuery对象与DOM对象的转换 一.jQuery简介 1.介绍 jQuery是一个JavaScript库: ...
- ＃笔记＃ 移动前端开发之viewport
一般移动设备的浏览器都默认设置了一个 viewport ,并初始定义一个虚拟的layout viewport(布局视口),用于解决早期的页面在手机上显示的问题.下面我们来认识几个与 viewport ...
- 移动前端开发之viewport,devicePixelRatio的深入理解
移动前端开发之viewport的深入理解 在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的met ...
- Sea.js创始人玉伯的前端开发之路
在Web应用程序的用户体验越来越被重视的今天,前端开发的地位也上升到了前所未有的高度,而随之而来的也有更多的挑战. 为了将前端开发者繁重的工作变得简单,框架应运而生.国内也不乏一些非常优秀的前端开发框 ...
- 【开源专访】Sea.js创始人玉伯的前端开发之路
摘要:玉伯,淘宝前端类库 KISSY.前端模块化开发框架SeaJS.前端基础类库Arale的创始人.本期[开源专访]我们邀请玉伯来为我们分享一些关于前端框架.前端开发的那些事,以及前端大牛是如何炼成的 ...
- 前端开发之JavaScript篇
一.JavaScript介绍 前端三剑客之JavaScript,简称js,可能是这三个里面最难的一个了.很早以前,市面上流通着三种js版本,为了统一,ECMA(欧洲计算机制造协会)定义了规范的版本, ...
随机推荐
- HDU 1029 基础dp
题目链接:Ignatius and the Princess IV 大意:就是在N个数里找出唯一一个至少出现过(N+1)/ 2 次的数. 1 <= N <= 999999. hash: / ...
- 简单地为DBNavigator填加Caption
http://bbs.2ccc.com/topic.asp?topicid=346735 http://www.cnblogs.com/GarfieldTom/archive/2010/01/18/1 ...
- 二叉树的基本功能实现方法（C++）
假设:有一个n个元素的完全二叉树,为了使其成为满二叉树,补全没有孩子的节点是的除了叶节点所有节点都有两个孩子,即最低层皆为-1. 例1: 1 2 3 4 5 -1 6 -1 -1 -1 ...
- 内存泄漏 之 MAT工具的使用
1 内存泄漏的排查方法 Dalvik Debug Monitor Server (DDMS) 是 ADT插件的一部分,其中有两项功能可用于内存检查 : · heap 查看堆的分配情况 · ...
- Python面试题（十六）
1.取出两个升序数组中的最小的一半的元素组成一个新的升序数组. map(lambda x, y: x if x < y else y, a, b) 答案 2.用至少2种不同的方式删除一个list ...
- TypeScript学习笔记（七） - 命名空间
本篇将介绍TypeScript的命名空间,并简单说明一下与模块的区别. 在之前的例子里,有如下一段代码,通过修改这段代码来演示命名空间的用法. interface Animal { name: str ...
- Docker中配置国内镜像
1. 为什么要为docker配置国内镜像 在正常情况下,docker有一个默认连接的国外官方镜像,在国外的网友访问该官方镜像自然不成问题,但是国内毕竟不是国外,由于国情不同,中国的网络访问国外官方 ...
- PHP安全性考虑
用户提交的数据 很多PHP 程序所存在的重大弱点并不是PHP 语言本身的问题,而是编程者的安全意识不高而导致的.因此,必须时时注意每一段代码可能存在的问题,去发现非正确数据提交时可能造成的影响. 例子 ...
- 统计中的bitMap
//位图的概念就是在个一字节八位的地方存八个状态 比如 bool hash[] 表示某个数字被标记过,一个数字需要一个字节 而bitMap就是可以把每位都用来标记,起到节约空间的目的 //位图的概念就 ...
- php的静态变量的实现
1.静态变量的结构 php脚本编译之后会生成执行opcode组成的opcode_array,执行每个zend_op_array都会生成一个单独的zend_execute_data结构. php的局部变 ...