PDF《在按钮上附加 hover 效果》

在按钮上附加 hover 效果

01 C h a p t e r

0 4 本节的 HTML 例套用了

3 种当滑鼠移入 、移出按钮时的 hover 效果.

下 图共有

12 个按钮, 我们会在同一列按钮套用同一效果, 总共

3 种效果. SampleFile /Chapter04/01/index.html 本节使用的 HTML 例档 本章可以学到以下基础内容. B B 将效果套用至 Web 网页最重要的 「按钮」 元素 B B 针对多个元素 (例如例中各按钮), 个别套用同一效果 B B 更进一步的 animate() 活用方法 在第

2 章中, 我们只针对单一元素 (字串 「Creative jQuery」 ) 做处理, 在 本章则要处理同一页面的多个元素.例的难度会越来越高, 请适时回头复习前 面的内容. 具有 hover 效果的按钮 首先来看如何替按钮加上 hover 效果, 总共有

12 个按钮, 每列的效果都 不同. BUTTONS1 Albatross Bishop Canary Duck Eagle Falcon Goose Hawk Ibis Ibis Jaeger Jaeger Kingfisher Kingfisher Lark Lark html 具hover 效果的按钮 index.html

1 2

3 #buttons1 button { display: block;

float: left;

width: 224px;

height: 80px;

margin:

0 10px 20px;

css hover 效果的 CSS main.css 第1列的按钮从「Albatross」 ~ 「Duck」

1 , 第2列按钮从「Eagle」 ~ 「Hawk」

2 , 第3行按钮从 「Ibis」 ~ 「Lark」

3 , 而只有第

3 列按钮多设定 span 元素 (理由后面会详细说明). 所有元素被 .page-main 类别包住, 并将包含各按钮的子节点 id 设定为 #buttons1, 现阶段请先掌握这样的结构. hover 效果的 CSS 其使用的 CSS 如下, 之后将透过 jQuery 操作 CSS 的属性值以达到各种 效果. $(function(){ var duration = 300;

1 // buttons1 // buttons1 第1列$('#buttons1 button:nth-child(-n+4)') .on('mouseover', function() { $(this).stop(true).animate({ backgroundColor: '#ae5e9b', color: '#fff' }, duration);

}) .on('mouseout', function(){ $(this).stop(true).animate({ backgroundColor: '#fff', color: '#ebc000' }, duration);

});

});

JavaScript 第1列按钮的 JavaScript main.js

2 padding: 0;

font-size: 16px;

letter-spacing: 0.15em;

color: #ebc000;

background-color: #fff;

border: none;

border-radius: 20px;

} 第1列按钮的 JavaScript (jQuery) 接著要附加第

1 列按钮的 hover 效果, 先来预览一下效果. B B 滑鼠移入时, 逐渐改变背景色 B B 滑鼠移出时, 逐渐回复背景色 上面效果的程式如下, 请开启 main.js 并输入 . 第1列按钮的 hover 效果 $('#buttons1 button:nth-child(-n+4)') .on('mouseover', function() { $('#buttons1 button:nth-child(-n+4)').stop(true).animate({ backgroundColor: '#ae5e9b', color: '#fff' }, duration);

}) JavaScript 没有使用 this 的情况 main.js 变数 duration 的使用地方 变数 duration 也可套用於第

2 列、 第3列的按钮, 之后内容如无特别说明, 请 记得此变数用以控制 「动画所需时间」 . Point! 一开始先宣告 duration 并设定 「300」

1 , 这个值之后作为 animate() 方法 的第

2 个参数 (动画所需花费之时间)

2 .将设定给多个元素的值先存入变数, 之后就能作整体性的修改, 例如例中如果修改 duration, 整个例的动画时间 就可一次性的调整, 这是较有效率的程式设计方法. 处理的对象为 '#buttons1 button:nth-child(-n+4)' (即#buttons1 元素中的 第1~4 的元素), 利用 $() 指定元素后再利用 on() 设定滑鼠移入和移出的处理 . 重要on() 方法中的处理第

2 章已介绍过, 详细内容请参考 P.2-18;