jQuery基础教程笔记-样式和动画

来源：互联网发布：阿里云功能编辑：程序博客网时间：2024/06/07 06:20

1.position:relative; 相对定位，元素"相对于"它的原始起点进行移动。（相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其他框）。

2.position:absolute; 绝对定位，位置将依据浏览器左上角开始计算。

3.父容器使用相对定位，子元素使用绝对定位后，子元素的位置相对于父容器左上角。

4.相对定位和绝对定位需要配合top、right、bottom、left使用来定位具体位置。这四个属性同时只能使用相邻的两个，即上和下，左和右不能同时使用。

code view&课后练习:

$(document).ready(function() {   var $speech = $('div.speech');  var defaultSize = $speech.css('fontSize');  $('#switcher button').click(function() {    var num = parseFloat($speech.css('fontSize'));    switch (this.id) {      case 'switcher-large':        num *= 1.4;        break;      case 'switcher-small':        num /= 1.4;        break;      default:        num = parseFloat(defaultSize);    }    $speech.animate({fontSize: num + 'px'}, 'slow');  });//switch button function--larg/small speech  var $firstPara = $('p').eq(1);  $firstPara.hide();  $('a.more').click(function() {    $firstPara.animate({      opacity: 'toggle',      height: 'toggle'    }, 'slow');    var $link = $(this);    if ($link.text() == 'read more') {      $link.text('read less');    } else {      $link.text('read more');    }    return false;  });//展开/隐藏，注意toggle的使用  $('div.label').click(function() {    var paraWidth = $('div.speech p').outerWidth();    var $switcher = $(this).parent();    var switcherWidth = $switcher.outerWidth();    $switcher      .css({position: 'relative'})      .fadeTo('fast', 0.5)      .animate({        left: paraWidth - switcherWidth      }, {        duration: 'slow',        queue: false      })      .fadeTo('slow', 1.0)      .slideUp('slow', function() {        $switcher.css({backgroundColor: '#f00'});      })      .slideDown('slow');  });//多效果并行和队列    $('p').eq(2)    .css('border', '1px solid #333')    .click(function() {      var $clickedItem = $(this);      $clickedItem.next().slideDown('slow', function() {        $clickedItem.slideUp('slow');      });    });//回调机制，实现队列效果  $('p').eq(3).css('backgroundColor', '#ccc').hide();    /*1) 修改样式表，一开始先隐藏页面内容，当页面加载后，慢慢地淡入内容*/  $('#container').hide();  $('#container').fadeIn("slow");   /*(2) 在鼠标悬停到段落上面时，给段落应用黄色背景*/  var rgb = $('p').css('backgroundColor');  $('p').hover(function() {        $(this).css({backgroundColor:'#FFFF00'});  },function(){    $(this).css({backgroundColor:rgb})  });    /*(3)单击标题（<h2>）使其不透明度变为25%，同时添加20px的左外边距，当这两个效果完  成后，把讲话文本变成50%的不透明度；*/  $('h2').click(function() {    $(this)      .animate({        opacity:0.25,            marginLeft: "20px"  //左外距      });      $('div.speech p').fadeTo('slow',0.5);  });  /*(4)按下方向键时，使样式转换器向相应的方向平滑移动20像素*/  $(document).keyup(function(event) {    $('#switcher').css({position:'relative'});    $switcher = $('#switcher')    switch (event.keyCode){      case 37:        $switcher.animate({          left:"-=20px"        });        break;      case 38:        $switcher.animate({          top:"-=20px"        });        break;      case 39:        $switcher.animate({          left:"+=20px"        });        break;      case 40:        $switcher.animate({          top:"+=20px"        });        break;      default:        break;    }  });  });

更多内容关注:

请关注微信订阅号,码农的秘密花园

id:HackerGarden

0 0