PDF《02 利用新增/ 删除类别制作动画》

} 初始状态的按钮样式 .bdrRadius { border-radius: 15px;

} 动画后的按钮样式 JavaScript JavaScript 的部分除附加 / 移除的类别名称不同外 , 其他皆相同. js/script2.js $('

.cssAnim'

).hover(function(){ $(this).addClass('

bdrRadius'

);

}, function(){ $(this).removeClass('

bdrRadius'

);

});

例3的说明旋转按钮 接著当滑鼠移入时将按钮以垂直方向、水平方向旋转. HTML 准备两个按钮分别执行垂直方向 / 水平方向旋转. CCCCCCCCCCC C C C C C C C C C C C C C sample3.html BUTTON1 BUTTON2 CSS CSS 中除按钮初始状态的样式外 , 还要设定垂直旋转动画的类别选择器「rotateX」, 及水平旋转动画的「rotateY」. css/style3.css .cssAnim1, .cssAnim2 { margin:

0 10px;

padding: 15px 0;

width: 150px;

color: #000;

font-weight: bold;

text-align: center;

display: inline-block;

overflow: hidden;

background-color: #cfcfcf;

border: #999 1px solid;

transition: all 1s ease-in-out;

} 初始状态的按钮样式 .rotateX { transform: rotateX(360deg);

} 垂直旋转动画 .rotateY { transform: rotateY(360deg);

} 水平旋转动画 旋转动画利用 CSS3 的transform 属性控制 rotateX 函式与 rotateY 实作 , 例中设定旋转角度为「360deg」, 表示将按钮旋转一圈 , 以数字控制旋转的角度. JavaScript 例中虽然多了一个按钮 , 但基本上都差不多. js/script3.js $('

.cssAnim1'

).hover(function(){ $(this).addClass('

rotateX'

);

? }, function(){ $(this).removeClass('

rotateX'

);

? });

$('

.cssAnim2'

).hover(function(){ $(this).addClass('

rotateY'

);

? }, function(){ $(this).removeClass('

rotateY'

);

? });

当滑鼠游标分别移入 jQuery 物件「.cssAnim1」、「.cssAnim2」时,在1附加旋转 动画的类别 , 以实作旋转设定角度的动画. 滑鼠移出时 , 在2会再次执行旋转动画 , 接著移除

1 附加的类别. 例4的说明放大效果する HTML HTML 中配置要使用的按钮. sample4.html CSS CSS 中撰写初始样式、按钮图片样式以及放大动画的样式. css/style4.css .cssAnim { width: 200px;

height: 200px;

display: inline-block;

overflow: hidden;

background-color: #ccc;

border: #333 2px solid;

position: relative;

} 按钮样式 .cssAnim img { top: 0;

left: 0;

width: 100%;

position: absolute;

transition: all 0.3s linear;

} 按钮中图片样式 CCCCCCCCCCC C C C C C C C C C C C C C .imgScale img { transform: scale(1.5);

} 放大动画 按钮图片的样式「cssAnim img」中,position 属性设定「absolute」, 让图片置中显示. 动画用的选择器「imgScale img」中,transform 属性以 scale 函式设定 , 并传入参数 15, 表示图片放大 1.5 倍,修改 scale 函式的参数可改变放大率. JavaScript JavaScript 的内容与先前的例相同 , 利用 addClass() / removeClass() 方法控制动画 的类别 , 动画类别「imgScale」的附加目标为按钮 (cssAnim) 而非图片. js/script4.js $('

.cssAnim'

).hover(function(){ $........