HTML5图片的淡出，淡入，显示，隐藏，外加左右移动动画效果
程序员文章站
2022-03-31 23:53:18
先来张图：
来一张效果图，其他就不一一展示了，代码都在下面：
代码如下：
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>