HTML5图片的淡出，淡入，显示，隐藏，外加左右移动动画效果
导读：收集整理的这篇文章主要介绍了html5教程-HTML5图片的淡出，淡入，显示，隐藏，外加左右移动动画效果，觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过...
收集整理的这篇文章主要介绍了html5教程-HTML5图片的淡出，淡入，显示，隐藏，外加左右移动动画效果，觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 先来张图：
来一张效果图，其他就不一一展示了，代码都在下面：
代码如下：
htML>
html lang="en">
head>
meta charset="UTF-8">
tITle>
下午练习title>
script tyPE="application/javascript" src="jquery.1.12.4.js">
script>
script>
$(function () {
$("#a").click(function () {
$("img").fadein(2000,function () {
alert("图片淡入了") }
);
}
) $("#b").click(function () {
$("img").fadeOut(2000,function () {
alert("图片淡出了") }
) }
) $("#c").click(function () {
$("img").slideUp(3000,function () {
alert("图片收起来了，隐藏") }
) }
) $("#d").click(function () {
$("img").slideDown(3000,function () {
alert("图片放下来了，显示") }
) }
) $("#e").click(function () {
$("img").slideToggle(3000,function () {
alert("显示/隐藏切换了") }
) }
) $("#f").click(function () {
$("img").fadeToggle(3000,function () {
alert("淡出淡入切换") }
) }
) $("#g").click(function () {
$("img").aniMATE({
width:"120px", /*图片的宽和高*/ height:"160px", opacity:0.5 /*透明度*/ }
,1000,function () {
alert("动画结束了") }
) }
) $("#q").click(function () {
$("img").hide(2000,function () {
alert("图片隐藏了") }
);
/*图片显示、隐藏的效果 和 淡入，淡出的效果不一样*/ }
) $("#w").click(function () {
$("img").show(2000,function () {
alert("图片显示了") }
) }
) }
) script>
head>
body>
button id="a">
淡入button>
button id="b">
淡出button>
button id="c">
更改大小隐藏button>
button id="d">
更改大小显示button>
button id="e">
更改大小显示隐藏切换button>
button id="f">
淡出淡入切换button>
button id="g">
自定义动画button>
button id="q">
隐藏button>
button id="w">
显示button>
center>
img src="a1.jpg" height="339" width="510"/>
center>
body>
html>
=================================================================================================
左右移动效果图：
代码如下：
html>
html lang="en">
head>
meta charset="UTF-8">
title>
左右移动title>
script type="application/javascript" src="jquery.1.12.4.js">
script>
script>
/*实现左右移动的效果*/ $(function () {
$("#a").click(function () {
$("p").animate({
left:'+50px'}
,"slow") }
) $("#b").click(function () {
$("p").animate({
left:'-50px'}
,"slow") }
) }
) script>
head>
body>
center>
button id="a">
左移button>
button id="b">
右移button>
p style="position: absolute;
width:100px;
">
这是我的pp>
center>
body>
html>
先来张图：
来一张效果图，其他就不一一展示了，代码都在下面：
代码如下：
html>
html lang="en">
head>
meta charset="UTF-8">
title>
下午练习title>
script type="application/javascript" src="jquery.1.12.4.js">
script>
script>
$(function () {
$("#a").click(function () {
$("img").fadeIn(2000,function () {
alert("图片淡入了") }
);
}
) $("#b").click(function () {
$("img").fadeOut(2000,function () {
alert("图片淡出了") }
) }
) $("#c").click(function () {
$("img").slideUp(3000,function () {
alert("图片收起来了，隐藏") }
) }
) $("#d").click(function () {
$("img").slideDown(3000,function () {
alert("图片放下来了，显示") }
) }
) $("#e").click(function () {
$("img").slideToggle(3000,function () {
alert("显示/隐藏切换了") }
) }
) $("#f").click(function () {
$("img").fadeToggle(3000,function () {
alert("淡出淡入切换") }
) }
) $("#g").click(function () {
$("img").animate({
width:"120px", /*图片的宽和高*/ height:"160px", opacity:0.5 /*透明度*/ }
,1000,function () {
alert("动画结束了") }
) }
) $("#q").click(function () {
$("img").hide(2000,function () {
alert("图片隐藏了") }
);
/*图片显示、隐藏的效果 和 淡入，淡出的效果不一样*/ }
) $("#w").click(function () {
$("img").show(2000,function () {
alert("图片显示了") }
) }
) }
) script>
head>
body>
button id="a">
淡入button>
button id="b">
淡出button>
button id="c">
更改大小隐藏button>
button id="d">
更改大小显示button>
button id="e">
更改大小显示隐藏切换button>
button id="f">
淡出淡入切换button>
button id="g">
自定义动画button>
button id="q">
隐藏button>
button id="w">
显示button>
center>
img src="a1.jpg" height="339" width="510"/>
center>
body>
html>
=================================================================================================
左右移动效果图：
代码如下：
html>
html lang="en">
head>
meta charset="UTF-8">
title>
左右移动title>
script type="application/javascript" src="jquery.1.12.4.js">
script>
script>
/*实现左右移动的效果*/ $(function () {
$("#a").click(function () {
$("p").animate({
left:'+50px'}
,"slow") }
) $("#b").click(function () {
$("p").animate({
left:'-50px'}
,"slow") }
) }
) script>
head>
body>
center>
button id="a">
左移button>
button id="b">
右移button>
p style="position: absolute;
width:100px;
">
这是我的pp>
center>
body>
html>
觉得可用，就经常来吧！ 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： HTML5图片的淡出，淡入，显示，隐藏，外加左右移动动画效果
本文地址： https://pptw.com/jishu/587185.html