标签：系统 round 函数 panel func animate slide tin ...
jQuery是什么？
jQuery是一个快速、简洁的JavaScript框架，它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
JQuery效果-隐藏和显示
.show()让隐藏的元素显示。效果为：同时修改元素的高度、宽度、opacity属性
.hide()让显示的元素隐藏，与show相反
.toggle() 方法用来切换 hide() 和 show() 方法。显示被隐藏的元素，并隐藏已显示的元素
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript" src="js/jquery-3.1.1.js" ></script> 7 <script type="text/javascript"> 8 $(document).ready(function(){ 9 $("#hide").click(function(){ 10 $("p").hide(); 11 }); 12 $("#show").click(function(){ 13 $("p").show(); 14 }); 15 }); 16 </script> 17 </head> 18 <body> 19 <p>如果你点击“隐藏” 按钮，我将会消失。</p> 20 <button id="hide">隐藏</button> 21 <button id="show">显示</button> 22 </body> 23 </html>
JQuery效果-淡入淡出
.fadeIn() 让隐藏的元素淡入显示
.fadeOut() 让显示的元素淡出隐藏，修改透明度
. fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。
.fadeTo(时间,最终透明度,函数)同fadeToggle，接受第二个参数，表示达到最终透明度
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript" src="js/jquery-3.1.1.js" ></script> 7 <script type="text/javascript"> 8 $(document).ready(function(){ 9 $("button").click(function(){ 10 $("#div1").fadeToggle(); 11 $("#div2").fadeToggle("slow"); 12 $("#div3").fadeToggle(3000); 13 }); 14 }); 15 </script> 16 </head> 17 <body> 18 <p>实例演示了 fadeToggle() 使用了不同的 speed(速度) 参数。</p> 19 <button>点击淡入/淡出</button> 20 <br><br> 21 <div id="div1" style="width:80px;height:80px;background-color:red;"></div> 22 <br> 23 <div id="div2" style="width:80px;height:80px;background-color:green;"></div> 24 <br> 25 <div id="div3" style="width:80px;height:80px;background-color:blue;"></div> 26 </body> 27 </html>
JQuery效果-滑动
.slideDown() 让隐藏的元素显示，效果为从上往下，增加高度；
.slideUp() 让显示的元素隐藏，效果为从下往上，减小高度；
. slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。如果元素向下滑动，则 slideToggle() 可向上滑动它们。如果元素向上滑动，则 slideToggle() 可向下滑动它们。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript" src="js/jquery-3.1.1.js" ></script> 7 <style type="text/css"> 8 #panel,#flip 9 { 10 padding:5px; 11 text-align:center; 12 background-color:#e5eecc; 13 border:solid 1px #c3c3c3; 14 } 15 #panel 16 { 17 padding:50px; 18 display:none; 19 } 20 </style> 21 <script type="text/javascript"> 22 $(document).ready(function(){ 23 $("#flip").click(function(){ 24 $("#panel").slideToggle("slow"); 25 }); 26 }); 27 </script> 28 29 </head> 30 <body> 31 <div id="flip">点我，显示或隐藏面板。</div> 32 <div id="panel">Hello world!</div> 33 </body> 34 </html>
JQuery效果-animate()方法
.animate({最终样式属性，键值对对象},
动画事件,
动画效果("linear","swing"),
动画执行完后的回调函数)
自定义动画注意事项：
参数一的对象中，键必须使用驼峰法则
只有数值类型的属性能够使用动画，非数值类型的属性不能使用动画
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript" src="js/jquery-3.1.1.js" ></script> 7 <script type="text/javascript"> 8 $(document).ready(function(){ 9 $("button").click(function(){ 10 var div=$("div"); 11 div.animate({left:‘100px‘},"slow"); 12 div.animate({fontSize:‘3em‘},"slow"); 13 }); 14 }); 15 </script> 16 17 </head> 18 <body> 19 <button>开始动画</button> 20 <p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。 21 如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p> 22 <div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div> 23 24 </body> 25 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1,user-scalable=no"/> 7 8 <style type="text/css"> 9 *{ 10 margin: 0px; 11 padding: 0px; 12 } 13 14 #body{ 15 width: 100%; 16 height: 700px; 17 max-width: 500px; 18 margin: 0 auto; 19 background-color: #FAE738; 20 overflow: hidden; 21 } 22 23 #tips{ 24 margin-top: 40px; 25 text-align: center; 26 color: white; 27 font-size: 36px; 28 font-weight: bold; 29 } 30 31 #imgs{ 32 width: 90%; 33 margin: 20px auto; 34 display: flex; 35 justify-content: space-around; 36 } 37 38 #jieguo{ 39 width: 90%; 40 margin: 30px auto; 41 display: flex; 42 justify-content: space-around; 43 } 44 45 #jieguo .jieguo div{ 46 height: 30px; 47 width: 89px; 48 line-height: 30px; 49 text-align: center; 50 color: white; 51 } 52 53 #jieguo .jieguo img{ 54 height: 89px; 55 } 56 57 #jieguo .pk{ 58 height: 120px; 59 line-height: 120px; 60 font-size: 48px; 61 font-weight: bold; 62 } 63 64 #score,#scoreFen{ 65 text-align: center; 66 font-size: 24px; 67 color: red; 68 padding-top: 10px; 69 } 70 71 </style> 72 </head> 73 <body> 74 <div id="body"> 75 <div id="tips"> 76 请选择 77 </div> 78 79 <div id="imgs"> 80 <img src="img/jiandao.png" id="jiandao" /> 81 <img src="img/shitou.png" id="shitou" /> 82 <img src="img/bu.png" id="bu" /> 83 </div> 84 85 <div id="jieguo"> 86 <div class="jieguo"> 87 <div>您选择了</div> 88 <img src="img/daiding.png" id="myImg" /> 89 </div> 90 91 <div class="pk">PK</div> 92 93 <div class="jieguo"> 94 <div>系统选择了</div> 95 <img src="img/daiding.png" id="computer" /> 96 </div> 97 </div> 98 99 <div id="score"> 100 等待结果中.... 101 </div> 102 103 <div id="scoreFen"> 104 <span>00</span>：<span>00</span> 105 </div> 106 </div> 107 108 <script type="text/javascript" src="js/jquery-3.1.1.js" ></script> 109 <script type="text/javascript"> 110 $("#imgs img").click(function(){ 111 //console.log($(this).attr("src")); //点击获取img的src 112 var src1=$(this).attr("src"); 113 //console.log(src1); 114 imgSrc(src1); //调用函数 115 }); 116 var imgs=["img/jiandao.png","img/shitou.png","img/bu.png"]; 117 function imgSrc(src1){ 118 $("#myImg").attr("src",src1); 119 120 var id=setInterval(function(){ 121 var num=parseInt(Math.random()*3); 122 console.log(num); 123 $("#computer").attr("src",imgs[num]); 124 },20); 125 126 setTimeout(function(){ 127 clearInterval(id); 128 129 var my=imgs.indexOf(src1); 130 var com=imgs.indexOf($("#computer").attr("src")); 131 if(my==0&&com==2 || my==1&&com==0 || my==2&&com==1){ 132 $("#score").html("恭喜您赢了"); 133 var count=parseInt($("#scoreFen span:eq(0)").text())+1;//每赢一次分数加1 134 count=count<10?"0"+count:count; 135 $("#scoreFen span:eq(0)").text(count);//显示分数 136 }else if(my==0&&com==0 || my==1&&com==1 || my==2&&com==2){ 137 $("#score").html("平局！再战一轮吧！"); 138 }else{ 139 $("#score").html("哈哈你输啦！！！"); 140 var cf = parseInt($("#scoreFen span:eq(1)").text())+1; 141 cf = cf<10 ? "0"+cf : cf; 142 $("#scoreFen span:eq(1)").text(cf); 143 } 144 145 },500); 146 } 147 </script> 148 </body> 149 </html>
一款简洁而强大的前端框架JQUery—动画效果及剪刀石头布小游戏
标签：系统 round 函数 panel func animate slide tin ...
原文地址：http://www.cnblogs.com/lgc-17862800193/p/7583250.html
