• 当前标签:jQuery效果

程序开发 jQuery布局、jQuery效果

jQuery布局 <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>jQuery布局</title>     <style>         div {             width: 300px;             height: 300px;             border: 8px solid red;             padding: 0;             margin: 50px;         }     </style> </head> <body>     <div>         中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文 中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文 中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文     </div>     <button>获取位置</button>     <script src="jquery.js"></script>     <script>         var div = document.querySelector('div')         var btn = document.querySelector('button')         btn.onclick = function () {             console.log(div.clientWidth)         }         console.log($('div').height())         console.log($('div').width())         console.log($('div').innerHeight())         console.log($('div').innerWidth())         console.log($('div').outerHeight())         console.log($('div').position())         // 相对于父元素的偏移     </script> </body> </html> jQuery效果 <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>jQuery效果</title>     <style>         div {             margin: 3px;             width: 40px;             height: 40px;             position: absolute;             left: 0px;             top: 30px;             background: green;             display: none;         }         div.newcolor {             background: blue;         }         span {             color: red;         }     </style> </head> <body>     <h1>jQuery效果</h1>     <small>测试专用小标签</small>     <ul>         <li>第1项</li>         <li>第2项</li>         <li>第3项</li>         <li>第4项</li>         <li>第5项</li>     </ul>     <button id="show">Show Length of Queue</button>     <span></span>     <div></div>     <button id="ff">fff</button>     <script src="jquery.js"></script>     <script src="jqueryColor.js"></script>     <script src="index.js"></script> </body> </html> jQuery要实现动画中颜色的变化,需要加载jQuery.color.js插件 $('ul').click(function () {     // $('ul,small').toggle(5*1000,function () {     //     alert($(this).text() + '动画完成')     // })     // $('ul,small').fadeToggle(5*1000,function () {     //     alert($(this).text() + '动画完成')     // })     // $('ul,small').fadeTo(5*1000,0.5,'linear',function () {     //     alert($(this).text() + '动画完成')     // })     //  $('ul,small').fadeTo(5*1000,0.5,'linear',function () {     //     alert($(this).text() + '动画完成')     // })     //  $('ul,small').slideToggle(5*1000,'linear',function () {     //     alert($(this).text() + '动画完成')     // })     // 自定义动画及链式动画     // 使用Jquery.color.js插件支持颜色动画     var coords = $('ul').offset()     // animate()方法执行css属性集的自定义动画     // $('ul').css('position','absolute').animate({     //     'left':400,     //     'line-height':32,     //     'color':'blue'     //     },5*1000).animate({     //       top:500,     //       lineHeight:'120%',     //       color:'red'       //      },3*1000).animate({     //           left:coords.left,     //           top:coords.top,     //           lineHeight:'1.5rem',     //           color:'#000'     //     },4*1000) //      $('ul').css('position','absolute') //      .fadeTo(3*1000,0.3) //      .animate({ //          left:'+=100', //          widht:['toggle','swing'], //          height:['toggle','linear'] //         // left:300 // },3*1000) // delay方法延迟动画     //    $('ul').slideToggle(2*1000)     //    .delay(3*1000)     //    .slideToggle(2*1000)     // var color = 'red'     // function changeColor(){     //     $('ul').animate({     //         backgroundColor:color,     //     },1000,function(){     //         color = $.Color(color)     //         color = color.hue(color.hue() +60)     //         changeColor()     //     })     // }     // changeColor()     // $('ul').css('position','absolute').animate({     //     left:300,     //     color:'blue'     // },10*1000,function () {     //     alert('left动画完成')     // }).animate({     //     top:400,     // },5*1000,function(){     //     alert('top动画完成')     // }) }) // $(':header').click(function(){ //     console.log('ffffff') //     // $('ul').stop(true,true) //     // $('ul').finish() // }) $("#show").click(function () {       var n = $("div").queue("fx");       $("span").text("Queue length is: " + n.length); });

2017-08-16 19:57:34 33 0 0
阅读详情
  • 1
前往