<script type="text/javascript">
//隐藏第二个段落，点击more显示一个效果
$(document).ready(function(){
$('p:eq(1)').hide();
$('span.more').click(function(){
$('p:eq(1)').animate({height:"show", width:"show", opacity:"show"},'slow');
$(this).hide();
});
//隐藏最后段落，点击倒数第二段落，显示最后一个段落隐藏倒数第二段落 移动效果
$('p:last').css('backgroundColor','#fcf').hide();
$('p:eq(2)').css('backgroundColor','#cff').click(function(){
var $thisPara = $(this);
$thisPara.next().slideDown('slow', function(){
$thisPara.slideUp('slow');
});
})
//按钮向左运动
$('div.label').click(function(){
//计算left距离
var paraWidth = $('div.speech p').width(); //获取段落宽度
var $button = $('div.button'); //获取对象
var buttonWidth = $button.width(); //获取按钮的宽度
var paddingRight = $button.css('paddingRight');
var paddingLeft = $button.css('paddingLeft');
var borderRightWidth = $button.css('borderRightWidth');
var borderLeftWidth = $button.css('borderLeftWidth');
var totalButtonWidth = parseInt(buttonWidth, 10) + parseInt(paddingRight, 10) + parseInt(paddingLeft, 10) + parseInt(borderRightWidth, 10) + parseInt(borderLeftWidth, 10);
var rightSide = paraWidth - totalButtonWidth;
$('div.button').animate({'left':rightSide, height: 20}, 'slow')
});
//按钮向右运动 淡入浅出效果
$('h3').click(function(){
$('div.button')
.fadeTo('slow',0.4)
.animate({'left':650},'slow')
.fadeTo('slow',1.0)
.slideUp('slow');
});
//改变段落字体大小
$('div.button').click(function(){
//获取对象保存变量中
var $speech = $('div.speech');
var currentSize = $speech.css('fontSize');//获取样式属性的值
var num = parseFloat(currentSize,10);
var unit = currentSize.slice(-2);
if(this.id == 'switcher-large'){
num *= 1.4;
} else if (this.id == 'switcher-small') {
num /= 1.4;
}
$speech.css('fontSize', num + unit);
});
//鼠标滑过变色 使用hover方法
$('h3, div.label, div.button, span.more').hover(function(){
$(this).addClass('hover');
}, function(){
$(this).removeClass('hover');
});
});
</script>
<style type="text/css">
.hover {
cursor: pointer;
background: #ffc;
}
</style>
