上一篇
下一篇
jQuery高亮显示文本中重要的关键字
作者:rainweb 日期:2010-05-28
很久没有更新了，工作忙，还有就是前端的一些效果，基本在Rainweb上面都找得到了，期待更新的。。。
网页中往往有些特殊的关键字，要引起用户的注意，先看下demo效果
demo地址：http://www.rainweb.cn/JavaScript/fadefocus/index.html
实现原理：
将要高亮显示的文字加上段落标记， class=”mask”的div 做为遮罩层，使此遮罩层位于文字内容之上（z-index属性），使用Jquery给段落动态添加样式类。
CSS，html代码就不说了，直接解释下jquery代码：
Javascript代码
- jQuery(document).ready(function($) {
- // mask source 控制mask的动画效果
- var maskSource = jQuery('.mask');
- jQuery('.entity-results').hover(function() {
- maskSource.animate({opacity:0.7},1).fadeIn('750');
- }, function() {
- maskSource.fadeOut('1000');
- });
- // match hover 控制段落的高亮显示
- var sample1 = jQuery('span.d1');
- var sample2 = jQuery('span.d2');
- var sample3 = jQuery('span.d3');
- jQuery('a.d1').hover(function() {
- sample1.addClass('show'); //给段落添加类
- }, function() {
- sample1.removeClass('show'); //移除段落类
- });
- jQuery('a.d2').hover(function() {
- sample2.addClass('show');
- }, function() {
- sample2.removeClass('show');
- });
- jQuery('a.d3').hover(function() {
- sample3.addClass('show');
- }, function() {
- sample3.removeClass('show');
- });
- });
动画函数animate(params, [duration], [easing], [callback])
Params：一组包含作为动画属性和终值的样式属性和及其值的集合
duration (可选)：种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)
easing (可选)：要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".
callback (可选)：在动画完成时执行的函数
淡入效果函数：fadeIn(speed, [callback])
Speed：三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)
callback (可选)：(Optional) 在动画完成时执行的函数
淡出效果函数：fadeOut解释同fadeIn
文章来自: 
引用通告: 
Tags: 
相关日志:
评论: 0 | 引用: 0 | 查看次数: -
发表评论
