JQ 简单的动画效果
JQ 简单的动画效果
1.源码 （注意使用JQ核心文件）
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/my.css" />
<script type="text/javascript" src="js/jquery.js" ></script>
<script>
$(function(){
// 1、点击按钮1，所有元素的边框颜色改成黑色。
$("#one").click(function(){
$("*").css("border","1px solid #000000");
})
// 2、点击按钮2，胖胖生肖偶数项中的图片，旋转45度。
$("#two").click(function(){
$("#ul_m2 li:odd").children("img").toggleClass("y1");
})
// 3、点击按钮3，可爱生肖奇数项中图片边框变圆形，文字颜色更改成黑底白字。
$("#three").click(function(){
$("#ul_m1 li:even").children("span").css("color","#ffffff");
$("#ul_m1 li:even").children("img").css("border-radius","50%");
})
// 4、点击按钮4，剪纸生肖奇数项中文字水平倾斜20度。
$("#four").click(function(){
$("#ul_m3 li:odd").children("span").toggleClass("y2");
})
// 5、点击按钮5，所有属相猴以后的生肖图片变成哪吒，变圆形。
$("#five").click(function(){
//方法1:
// $("#ul_m1 li:gt(6)").children("img").attr("src","img/gai (1).gif");
// $("#ul_m1 li:gt(6)").children("img").css("border-radius","50%");
// $("#ul_m2 li:gt(6)").children("img").attr("src","img/gai (1).gif");
// $("#ul_m2 li:gt(6)").children("img").css("border-radius","50%");
// $("#ul_m3 li:gt(6)").children("img").attr("src","img/gai (1).gif");
// $("#ul_m3 li:gt(6)").children("img").css("border-radius","50%");
//方法2：
// $("li").slice(7,12).children("img").attr("src","img/gai (1).gif");
// $("li").slice(7,12).children("img").css("border-radius","50%");
// $("li").slice(19,24).children("img").attr("src","img/gai (1).gif");
// $("li").slice(19,24).children("img").css("border-radius","50%");
//方法3：
$("#ul_m1 li").eq(6).nextAll().children("img").attr("src","img/gai (1).gif");
$("#ul_m1 li").eq(6).nextAll().children("img").css("border-radius","50%");
})
// 6、点击按钮6，所有属相龙以前的生肖文字变成“猜一猜”
$("#six").click(function(){
//方法1:
// $("#ul_m1 li:lt(3)").children("span").html("猜一猜")
//方法2:
// $("li").slice(0,3).children("span").html("猜一猜")
//方法3:
$("#ul_m1 li").eq(3).prevAll().children("span").html("猜一猜")
})
// 7、点击按钮7，所有属相猪节点的图片变成放大2倍（在节点中内部放大，不能溢出），属相狗节点的图片缩小1倍。
$("#seven").click(function(){
$("#ul_m1 li").eq(8).css("overflow","hidden");
$("#ul_m1 li").eq(8).children("img").toggleClass("y3");
$("#ul_m2 li").eq(8).css("overflow","hidden");
$("#ul_m2 li").eq(8).children("img").toggleClass("y3");
$("#ul_m3 li").eq(8).css("overflow","hidden");
$("#ul_m3 li").eq(8).children("img").toggleClass("y3");
$("#ul_m1 li").eq(2).css("overflow","hidden");
$("#ul_m1 li").eq(2).children("img").toggleClass("x3");
$("#ul_m2 li").eq(2).css("overflow","hidden");
$("#ul_m2 li").eq(2).children("img").toggleClass("x3");
$("#ul_m3 li").eq(2).css("overflow","hidden");
$("#ul_m3 li").eq(2).children("img").toggleClass("x3");
})
// 8、点击按钮8，所有属相羊节点的图片移动到中间位置，文字添加文字阴影，文字框添加内发光阴影。
$("#eight").click(function(){
$("#ul_m1 li").eq(4).css("overflow","hidden");
$("#ul_m1 li").eq(4).children("img").toggleClass("y4");
$("#ul_m1 li").eq(4).children("span").toggleClass("y6");
})
// 9、点击按钮9，文字显示条上显示“网页前端技术!”
$("#nine").click(function(){
$("#wz").html("网页前端技术!");
})
//
// 10、点击任意一张可爱的生肖节点，文字显示条上显示图片下方对应的文字。
$("#ul_m1 li").click(function(){
var k=$(this); //当前一组中触发代码对象
var wenzi=k.children("span").html();
$("#wz").html(wenzi);
})
// 11、点击任意一张胖胖的生肖节点，其前后两张图片，包括自己，变成圆形。
$("#ul_m2 li").click(function(){
var k=$(this); //当前触发对象
var m=k.next();
var n=k.prev();
k.children("img").toggleClass("y5");
m.children("img").toggleClass("y5");
n.children("img").toggleClass("y5");
})
//
// 12、点击任意一张剪纸的生肖节点，在屏幕右边显示一个大DIV，实现放大的图片，加下面的文字说明。
$("#ul_m3 li").click(function(){
var k=$(this).children("img").attr("src"); //获得当前剪纸生肖图片路径
$("#theend").finish();//取消动画 注意JQ核心文件版本低于9会失效
// //将大图 透明度降低到0
$("#theend").fadeTo(1000,0,function(){
$("#theend").children("img").attr("src",k); //赋值给大图
});
$("#theend").fadeTo(1000,1);
})
// 13、点击任意黑条文字，将缩放下方相关内容，实现手风琴效果。
$(".sign > span").click(function(){
$(this).next().slideToggle(1000);
})
})
</script>
</head>
<body>
<h1>一个人自律的程度，决定了他的人生高度！自律是美好人生的前提，你有多自律，才有可能多优秀。</h1>
<h3>脱缰的马匹，最终会迷失方向而惨死；不自律的人生，最终会因为失控而结局惨淡。</h4>
<hr size="3" color="#5E2D00" width="750px">
<nav>
<a href="##" id="one">按钮1号</a>
<a href="##" id="two">按钮2号</a>
<a href="##" id="three">按钮3号</a>
<a href="##" id="four">按钮4号</a>
<a href="##" id="five">按钮5号</a>
<a href="##" id="six">按钮6号</a>
<a href="##" id="seven">按钮7号</a>
<a href="##" id="eight">按钮8号</a>
<a href="##" id="nine">按钮9号</a>
<br>
</nav>
<hr size="3" color="#5E2D00" width="750px">
<div id="wz" style="height: 30px; width: 750px; margin: 0 auto; background: #FF6E97;">
显示的文字
</div>
<hr size="3" color="#5E2D00" width="750px">
<div id="menu">
<div id="cute" class="sign">
<span id="m1">可爱的生肖</span>
<ul id="ul_m1">
<li>
<img src="img/cute/cock.png" alt="鸡 可爱 龙 cock" />
<span>鸡喔喔</span>
</li>
<li>
<img src="img/cute/cow.png" alt="牛 可爱 龙 cow" />
<span>牛哞哞</span>
</li>
<li>
<img src="img/cute/dog.png" alt="狗 可爱 龙 dog" />
<span>狗汪汪</span>
</li>
<li>
<img src="img/cute/dragon.png" alt="龙 可爱 dragon" />
<span>龙吼吼</span>
</li>
<li>
<img src="img/cute/goat.png" alt="羊 可爱 goat" />
<span>羊咩咩</span>
</li>
<li>
<img src="img/cute/horse.png" alt="马 可爱 horse" />
<span>马鸣鸣</span>
</li>
<li>
<img src="img/cute/monkey.png" alt="猴 可爱 monkey" />
<span>猴嘻嘻</span>
</li>
<li>
<img src="img/cute/rabbit.png" alt="兔 可爱 rabbit" />
<span>兔嬷嬷</span>
</li>
<li>
<img src="img/cute/pig.png" alt="猪 可爱 pig" />
<span>猪哼哼</span>
</li>
<li>
<img src="img/cute/rat.png" alt="鼠 可爱 rat" />
<span>鼠吱吱</span>
</li>
<li>
<img src="img/cute/snake.png" alt="蛇 可爱 snake" />
<span>蛇嘶哩</span>
</li>
<li>
<img src="img/cute/tiger.png" alt="虎 可爱 tiger" />
<span>虎嗷嗷</span>
</li>
</ul>
</div>
<div id="fat" class="sign">
<span id="m2">胖胖的生肖</span>
<ul id="ul_m2">
<li>
<img src="img/fat/cock.png" alt="鸡 胖乎乎 cock" />
<span>酉鸡</span>
</li>
<li>
<img src="img/fat/cow.png" alt="牛 胖乎乎 cow" />
<span>丑牛</span>
</li>
<li>
<img src="img/fat/dog.png" alt="狗 胖乎乎 dog" />
<span>戌狗</span>
</li>
<li>
<img src="img/fat/dragon.png" alt="龙 胖乎乎 dragon" />
<span>辰龙</span>
</li>
<li>
<img src="img/fat/goat.png" alt="羊 胖乎乎 goat" />
<span>未羊</span>
</li>
<li>
<img src="img/fat/horse.png" alt="马 胖乎乎 horse" />
<span>午马</span>
</li>
<li>
<img src="img/fat/monkey.png" alt="猴 胖乎乎 monkey" />
<span>申猴</span>
</li>
<li>
<img src="img/fat/rabbit.png" alt="兔 胖乎乎 rabbit" />
<span>酉鸡</span>
</li>
<li>
<img src="img/fat/pig.png" alt="猪 胖乎乎 pig" />
<span>亥猪</span>
</li>
<li>
<img src="img/fat/rat.png" alt="鼠 胖乎乎 rat" />
<span>子鼠</span>
</li>
<li>
<img src="img/fat/snake.png" alt="蛇 胖乎乎 snake" />
<span>巳蛇</span>
</li>
<li>
<img src="img/fat/tiger.png" alt="虎 胖乎乎 tiger" />
<span>寅虎</span>
</li>
</ul>
</div>
<div id="scissors" class="sign">
<span id="m3">剪纸的生肖</span>
<ul id="ul_m3">
<li>
<img src="img/scissors/cock.png" alt="鸡 剪纸 cock" />
<span>闻鸡起舞</span>
</li>
<li>
<img src="img/scissors/cow.png" alt="牛 剪纸 cow" />
<span>俯首甘为孺子牛</span>
</li>
<li>
<img src="img/scissors/dog.png" alt="狗 剪纸 dog" />
<span>犬马之劳</span>
</li>
<li>
<img src="img/scissors/dragon.png" alt="龙 剪纸 dragon" />
<span>龙凤呈祥</span>
</li>
<li>
<img src="img/scissors/goat.png" alt="羊 剪纸 goat" />
<span>三羊开泰</span>
</li>
<li>
<img src="img/scissors/horse.png" alt="马 剪纸 horse" />
<span>马首是瞻</span>
</li>
<li>
<img src="img/scissors/monkey.png" alt="猴 剪纸 monkey" />
<span>沐猴而冠</span>
</li>
<li>
<img src="img/scissors/rabbit.png" alt="兔 剪纸 rabbit" />
<span>动如脱兔</span>
</li>
<li>
<img src="img/scissors/pig.png" alt="猪 剪纸 pig" />
<span>猪突豨勇</span>
</li>
<li>
<img src="img/scissors/rat.png" alt="鼠 剪纸 rat" />
<span>鼠灵精气</span>
</li>
<li>
<img src="img/scissors/snake.png" alt="蛇 剪纸 snake" />
<span>笔走龙蛇</span>
</li>
<li>
<img src="img/scissors/tiger.png" alt="虎 剪纸 tiger" />
<span>虎踞龙盘</span>
</li>
</ul>
<div id="theend" >
<img id="thebig" src="img/cute/dog.png">
</div>
</div>
<hr size="3" color="#5E2D00" width="750px">
<div style="height: 15px; width: 750px; margin: 0 auto; background: #FF6E97;"></div>
<hr size="3" color="#5E2D00" width="750px">
</div>
</body>
</html>
CSS
@charset "utf-8"; /* CSS Document */ body { text-align:center; margin:0 auto; margin-top:20px; } span { display: block; color:#FF6E97; height: 30px; line-height: 30px; background: #1A2D27; cursor: pointer; border: 3px solid #FF6E97; margin-top: 5px; } .sign{ width: 700px; margin: 0 auto; height: auto; } ul{ height: 300px; margin-left: -35px; margin-top:-15px; } li{ list-style: none; float: left; display: block; height: 120px; width: 80px; margin-left: 15px; margin-top: 30px; } a{ text-decoration: none; } nav :first-child { border-left: 2px solid #1A2D27; } nav a { border-right: 2px solid #1A2D27; padding-right: 6px; background: #FF6E97; height: 30px; line-height: 30px; color: #1A2D27; } li { display: block; width: 100px; height: 120px; } li span{ color:#1A2D27; height: 30px; line-height: 30px; background: #FF6E97; margin-top: 0px; } li img{ width:80px; height:80px; cursor: pointer; border: 2px solid #DB9019; transition: all 2s ease; } .hidden { display: none; } #scissors { position: relative; } #theend { position: absolute; width: 400px; height: 400px; left: 650px; top:-50px; display: none; } .y1 { transform: rotate(30deg); } .y2 { transform: skew(-20deg, 0deg); } .y3 { transform: scale(2,2); } .x3{ transform: scale(0.5,0.5); } .y4 { transform: translate(50%,50%); } .y5 { border-radius:50%; } .y6{ text-shadow: 2px 2px 6px #FFFFFF; box-shadow: 2px 2px 6px #000000 inherit; }
2.成品图
版权声明：本文为srwk原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。