网站前端,web前端,前端脚本,前端优化|时代前端 » 显示 http://www.52shidai.com 网站前端研究中心 Thu, 02 Feb 2012 03:36:54 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 高亮显示文本中重要关键字（Jquery ） http://www.52shidai.com/javascript/jquery/549.html http://www.52shidai.com/javascript/jquery/549.html#comments Thu, 01 Jul 2010 09:47:48 +0000 admin http://www.52shidai.com/?p=549 一、界面预览
 
  鼠标放到右边的Tab按钮上，文字透明度降低，同时一段文字高亮显示，效果如下：
 
  很绚丽的效果幺！
二、实现原理
 
  将要高亮显示的文字加上<span>段落标记， class=”mask”的div 做为遮罩层，使此遮罩层位于文字内容之上（z-index属性，使用Jquery给段落动态添加样式类。
 
三、HTML代码
<div class=”wrapper”>
    <ul>
        <li><a href=”#”>Summary</a></li>
        <li><a href=”#”>Avatar</a></li>
        <li><a href=”#”>Formats</a></li>
    </ul>
    <div>
        <h2>
            Avatar (2009 film)</h2>
        <div>
            <img src=”images/avatar.jpg” alt=”Avatar poster” />
            <p>
                Avatar, also known as James Cameron’s Avatar, is an American 3-D science fiction
                epic film written and directed by <a href=”http://en.wikipedia.org/wiki/James_Cameron”>
                    James Cameron</a>, and was released on December 16, 2009 by 20th Century Fox.
                The film is co-produced by <a href=”http://en.wikipedia.org/wiki/Lightstorm_Entertainment”>
                    Lightstorm Entertainment</a>, and <span>focuses on an epic conflict on Pandora</span>,
                an inhabited Earth-sized moon of Polyphemus, one of three fictional gas giants orbiting
                <a href=”http://en.wikipedia.org/wiki/Alpha_Centauri_A”>Alpha Centauri A</a>. On
                Pandora, human colonists and the sentient humanoid indigenous inhabitants of Pandora,
                the Na’vi, engage in a war over the planet’s resources and the latter’s continued
                existence. The film’s title refers to <span>an avatar, a representation of
                    a real person in a virtual world</span>.</p>
            <p>
                <span>The film was released in 2D and 3D formats</span>, along with an
                IMAX 3D release in selected theaters. The film is being touted as a breakthrough
                in terms of filmmaking technology, for its development of 3D viewing and stereoscopic
                filmmaking with cameras that were specially designed for the film’s production.</p>
            <p>
                Read the rest of the <a href=”http://en.wikipedia.org/wiki/Avatar_(2009_film)”>original
                    Wikipedia page about Avatar</a></p>
            <div>
            </div>
        </div>
    </div>
</div>
 
entity-results类中显示了Tab按钮，每个按钮控制左边文字的透明度，段落文字的高亮显示。
entity-source类中有三个段落span Calss分别为 d1 d2 d3，也就是高亮文字段落。
class=”mask”的空div放到最后，此Div也就是一个遮罩层。
四、CSS关键代码
.entity-source, .entity-source span.show
{
    position: relative;
}
.entity-source .mask
{
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 1;
}
.entity-source span
{
    z-index: 2;
}
.entity-source span.show
{
    background: #ffc;
    color: #000;
}
 
 
类mask中的z-index:1 使得<div class=”mask”> 覆盖在左边文字内容之上。
z-nidex：2又使得span段落覆盖在<div class=”mask”>之上。从而显示实现了段落文字高亮显示。
五、Jquery代码
 
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

您可能感兴趣的文章

]]> http://www.52shidai.com/javascript/jquery/549.html/feed 0 wordpress 作者显示作者相关函数 http://www.52shidai.com/wordpress/34.html http://www.52shidai.com/wordpress/34.html#comments Mon, 25 Jan 2010 06:55:43 +0000 admin http://52shidai.com/?p=34 这句是用来读取WordPress后台设定的作者昵称，如果不愿意使用昵称而要使用名字，也可以使用其它函数：the_author显示作者名字；the_author_login显示作者登录名；the_author_url显示作者的网站地址。

显示发布时间

显示文章分类。

如果作者就是博客管理员，则会在登录状态下显示edit编辑按钮

the_author 显示文章的作者

the_author_description 显示文章作者的描述（作者个人资料中的描述）

the_author_login 显示文章作者的登录名

the_author_firstname 显示文章作者的firstname（名）

the_author_lastname 显示文章作者的lastname（姓）

the_author_nickname 显示文章作者的昵称

the_author_ID 显示文章作者的ID号

the_author_email 显示文章作者的电子邮箱

the_author_url 显示文章作者的网站地址

the_author_link (添加于2.1版本) 显示一个以文章作者名为链接名，链接地址为文章作者的网址的链接。

the_author_icq (不推荐使用) 显示文章作者的icq

the_author_aim 显示文章作者的aim

the_author_yim 显示文章作者的yim

the_author_msn (不推荐使用) 显示文章作者的msn

the_author_posts 显示文章作者已发表文章的篇数

the_author_posts_link 显示一个链接到文章作者已发表文章列表的链接

list_authors (不推荐使用) 显示blog所有作者和他们的相关信息。完整函数如下：

参数：

optioncount：是否显示各作者已发表文章的篇数，可选值为：TRUE 和 FALSE（默认值）

exclude_admin：是否不列出管理员，可选值为：TRUE（默认值） 和 FALSE

show_fullname ：是否显示各作者的全名，可选值为：TRUE 和 FALSE（默认值）

hide_empty：是否不显示发表文章数为0的作者，可选值为：TRUE（默认值） 和 FALSE

feed：链接到各个作者发表文章的RSS供稿种子链接名，默认为空，不显示RSS供稿种子

feed_image：供稿种子的图片地址，如果提供此项，则覆盖上面的feed，默认为空

例如：

代表不显示各个作者的发布文章数，列出管理员，显示各作者的全名，显示发布文章数为0的作者和不显示RSS供稿种子。

wp_list_authors 显示blog作者列表，如果作者发表过文章，则他的名字将链接到他发表的文章列表中。可定义是否显示其他信息。

参数：

optioncount：是否显示各个作者发表文章数，可选值：true 和 false（默认值）

exclude_admin：是否不显示“admin”用户，可选值：true（默认值） 和 false

show_fullname：是否显示各个作者的全名，如果不显示，将显示昵称。可选值：true 和 false（默认值）

hide_empty：是否不显示发表文章数为0的作者，可选值：true（默认值） 和 false

feed：链接到各个作者发表文章的RSS供稿种子链接名，默认为空，不显示RSS供稿种子

feed_image：供稿种子的图片地址，如果提供此项，则覆盖上面的feed，默认为空

您可能感兴趣的文章

]]> http://www.52shidai.com/wordpress/34.html/feed 0