当前位置：文江博客话题详情

作者是如何在文字中做出均衡器效果的？

发布于 2024-12-28 10:25:15 字数 223 浏览 2 评论 0原文

http://www.chris-wang.com/

如果您将鼠标悬停在此处的文本导航词上页面，您会看到它在文本内从左到右改变颜色。我不明白这个人是怎么做到的，甚至不知道他使用了什么技术来做到这一点。

他是用画布来做的吗？有谁知道这个效果是怎么做出来的吗？文本不是图像，而是可选择的文本。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

澉约 2025-01-04 10:25:15

它是 javascript 和 jquery：

function onOver(){
        //var txtwidth = $(this).document.getElementsByClassName("nav_over").clientWidth;
        //var txtwidth = $(this).children(".nav_over").offsetWidth;
        var txtWidth = $(this).children(".project_header").children(".nav_btn").children(".nav_base").width();
        //var txtWidth = document.getElementByClass("nav_base").offsetWidth
        //var txtWidth = $(document).width();
        $(this).children(".project_header").children(".nav_btn").children(".nav_overlay").stop();
        $(this).children(".project_header").children(".nav_btn").children(".nav_overlay").animate({
            width:txtWidth
        }, speed,"easeOutExpo");
    };
function onOut(){
        $(this).children(".project_header").children(".nav_btn").children(".nav_overlay").stop();
        $(this).children(".project_header").children(".nav_btn").children(".nav_overlay").animate({
            width: "0px"
        }, speed,"easeOutExpo");
};

本质上只是 2 个具有相同文本但两种不同颜色的 div。当鼠标悬停在上方时，橙色的动画会覆盖白色的动画。

It's javascript with jquery:

function onOver(){
        //var txtwidth = $(this).document.getElementsByClassName("nav_over").clientWidth;
        //var txtwidth = $(this).children(".nav_over").offsetWidth;
        var txtWidth = $(this).children(".project_header").children(".nav_btn").children(".nav_base").width();
        //var txtWidth = document.getElementByClass("nav_base").offsetWidth
        //var txtWidth = $(document).width();
        $(this).children(".project_header").children(".nav_btn").children(".nav_overlay").stop();
        $(this).children(".project_header").children(".nav_btn").children(".nav_overlay").animate({
            width:txtWidth
        }, speed,"easeOutExpo");
    };
function onOut(){
        $(this).children(".project_header").children(".nav_btn").children(".nav_overlay").stop();
        $(this).children(".project_header").children(".nav_btn").children(".nav_overlay").animate({
            width: "0px"
        }, speed,"easeOutExpo");
};

Essentially just 2 divs with the same text but two different colors. When moused over, the orange one is animated to cover over the white one.

回复收藏 0 原文

北座城市 2025-01-04 10:25:15

他使用 jQuery 来实现这种效果。具体来说：

$(".nav_button").mouseover(onOver);
$(".nav_button").mouseout(onOut);

和：

function onOver(){
        //var txtwidth = $(this).document.getElementsByClassName("nav_over").clientWidth;
        //var txtwidth = $(this).children(".nav_over").offsetWidth;
        var txtWidth = $(this).children(".project_header").children(".nav_btn").children(".nav_base").width();
        //var txtWidth = document.getElementByClass("nav_base").offsetWidth
        //var txtWidth = $(document).width();
        $(this).children(".project_header").children(".nav_btn").children(".nav_overlay").stop();
        $(this).children(".project_header").children(".nav_btn").children(".nav_overlay").animate({
            width:txtWidth
        }, speed,"easeOutExpo");
    };
function onOut(){
        $(this).children(".project_header").children(".nav_btn").children(".nav_overlay").stop();
        $(this).children(".project_header").children(".nav_btn").children(".nav_overlay").animate({
            width: "0px"
        }, speed,"easeOutExpo");

He's using jQuery to make that effect. Specifically:

$(".nav_button").mouseover(onOver);
$(".nav_button").mouseout(onOut);

and:

function onOver(){
        //var txtwidth = $(this).document.getElementsByClassName("nav_over").clientWidth;
        //var txtwidth = $(this).children(".nav_over").offsetWidth;
        var txtWidth = $(this).children(".project_header").children(".nav_btn").children(".nav_base").width();
        //var txtWidth = document.getElementByClass("nav_base").offsetWidth
        //var txtWidth = $(document).width();
        $(this).children(".project_header").children(".nav_btn").children(".nav_overlay").stop();
        $(this).children(".project_header").children(".nav_btn").children(".nav_overlay").animate({
            width:txtWidth
        }, speed,"easeOutExpo");
    };
function onOut(){
        $(this).children(".project_header").children(".nav_btn").children(".nav_overlay").stop();
        $(this).children(".project_header").children(".nav_btn").children(".nav_overlay").animate({
            width: "0px"
        }, speed,"easeOutExpo");

回复收藏 0 原文

~没有更多了~