• 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; 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; 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.成品图

  • 相关阅读:
    robotframework-requests--中文注解版
    Python猜数小游戏
    走进Selenium新世界
    HTML
    Web测试方法_02
    3.线程死锁
    2.线程--线程安全(synchronized)
    1.线程--线程创建方式
    使用Android-studio开发移动app与weex结合开发详细步骤
    Weex 简介
  • 原文地址:https://www.cnblogs.com/srwk/p/11652142.html
Copyright © 2020-2023  润新知