jQuery布局、jQuery效果

黄良钵

分类: 程序开发 157 0

jQuery布局

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>jQuery布局</title>
  6.     <style>
  7.         div {
  8.             width: 300px;
  9.             height: 300px;
  10.             border: 8px solid red;
  11.             padding: 0;
  12.             margin: 50px;
  13.         }
  14.     </style>
  15. </head>
  16. <body>
  17.     <div>
  18.         中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文 中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文 中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文
  19.     </div>
  20.     <button>获取位置</button>
  21.     <script src="jquery.js"></script>
  22.     <script>
  23.         var div = document.querySelector('div')
  24.         var btn = document.querySelector('button')
  25.         btn.onclick = function () {
  26.             console.log(div.clientWidth)
  27.         }
  28.         console.log($('div').height())
  29.         console.log($('div').width())
  30.         console.log($('div').innerHeight())
  31.         console.log($('div').innerWidth())
  32.         console.log($('div').outerHeight())
  33.         console.log($('div').position())
  34.         // 相对于父元素的偏移
  35.     </script>
  36. </body>
  37. </html>

jQuery效果

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>jQuery效果</title>
  6.     <style>
  7.         div {
  8.             margin: 3px;
  9.             width: 40px;
  10.             height: 40px;
  11.             position: absolute;
  12.             left: 0px;
  13.             top: 30px;
  14.             background: green;
  15.             display: none;
  16.         }
  17.         div.newcolor {
  18.             background: blue;
  19.         }
  20.         span {
  21.             color: red;
  22.         }
  23.     </style>
  24. </head>
  25. <body>
  26.     <h1>jQuery效果</h1>
  27.     <small>测试专用小标签</small>
  28.     <ul>
  29.         <li>第1项</li>
  30.         <li>第2项</li>
  31.         <li>第3项</li>
  32.         <li>第4项</li>
  33.         <li>第5项</li>
  34.     </ul>
  35.     <button id="show">Show Length of Queue</button>
  36.     <span></span>
  37.     <div></div>
  38.     <button id="ff">fff</button>
  39.     <script src="jquery.js"></script>
  40.     <script src="jqueryColor.js"></script>
  41.     <script src="index.js"></script>
  42. </body>
  43. </html>

jQuery要实现动画中颜色的变化,需要加载jQuery.color.js插件

  1. $('ul').click(function () {
  2.     // $('ul,small').toggle(5*1000,function () {
  3.     //     alert($(this).text() + '动画完成')
  4.     // })
  5.     // $('ul,small').fadeToggle(5*1000,function () {
  6.     //     alert($(this).text() + '动画完成')
  7.     // })
  8.     // $('ul,small').fadeTo(5*1000,0.5,'linear',function () {
  9.     //     alert($(this).text() + '动画完成')
  10.     // })
  11.     //  $('ul,small').fadeTo(5*1000,0.5,'linear',function () {
  12.     //     alert($(this).text() + '动画完成')
  13.     // })
  14.     //  $('ul,small').slideToggle(5*1000,'linear',function () {
  15.     //     alert($(this).text() + '动画完成')
  16.     // })
  17.     // 自定义动画及链式动画
  18.     // 使用Jquery.color.js插件支持颜色动画
  19.     var coords = $('ul').offset()
  20.     // animate()方法执行css属性集的自定义动画
  21.     // $('ul').css('position','absolute').animate({
  22.     //     'left':400,
  23.     //     'line-height':32,
  24.     //     'color':'blue'
  25.     //     },5*1000).animate({
  26.     //       top:500,
  27.     //       lineHeight:'120%',
  28.     //       color:'red'  
  29.     //      },3*1000).animate({
  30.     //           left:coords.left,
  31.     //           top:coords.top,
  32.     //           lineHeight:'1.5rem',
  33.     //           color:'#000'
  34.     //     },4*1000)
  35. //      $('ul').css('position','absolute')
  36. //      .fadeTo(3*1000,0.3)
  37. //      .animate({
  38. //          left:'+=100',
  39. //          widht:['toggle','swing'],
  40. //          height:['toggle','linear']
  41. //         // left:300
  42. // },3*1000)
  43. // delay方法延迟动画
  44.     //    $('ul').slideToggle(2*1000)
  45.     //    .delay(3*1000)
  46.     //    .slideToggle(2*1000)
  47.     // var color = 'red'
  48.     // function changeColor(){
  49.     //     $('ul').animate({
  50.     //         backgroundColor:color,
  51.     //     },1000,function(){
  52.     //         color = $.Color(color)
  53.     //         color = color.hue(color.hue() +60)
  54.     //         changeColor()
  55.     //     })
  56.     // }
  57.     // changeColor()
  58.     // $('ul').css('position','absolute').animate({
  59.     //     left:300,
  60.     //     color:'blue'
  61.     // },10*1000,function () {
  62.     //     alert('left动画完成')
  63.     // }).animate({
  64.     //     top:400,
  65.     // },5*1000,function(){
  66.     //     alert('top动画完成')
  67.     // })
  68. })
  69. // $(':header').click(function(){
  70. //     console.log('ffffff')
  71. //     // $('ul').stop(true,true)
  72. //     // $('ul').finish()
  73. // })
  74. $("#show").click(function () {
  75.       var n = $("div").queue("fx");
  76.       $("span").text("Queue length is: " + n.length);
  77. });
  78. function runIt() {
  79.       $("div").show("slow");
  80.       $("div").animate({left:'+=200'},2000);
  81.       $("div").slideToggle(1000);
  82.       $("div").slideToggle("fast");
  83.       $("div").animate({left:'-=200'},1500);
  84.       $("div").hide("slow");
  85.       $("div").show(1200);
  86.       $("div").dequeue()
  87.     //   $("div").slideUp("normal", runIt);
  88. }
  89. $('#ff').click(function(){
  90.     runIt();
  91. })
  • 0人 Love
  • 0人 Haha
  • 0人 Wow
  • 0人 Sad
  • 0人 Angry
jQuery、jQuery布局、jQuery效果

作者简介:黄良钵

打赏

博客站长,前端开发工程师

共 0 条评论关于 “jQuery布局、jQuery效果”

Loading...