3D悬停文字效果?

时间:2012-11-08 05:24:32

标签: javascript hover

我发现这种很酷的javascript / css效果可以在悬停在链接上时创建3D立方体滚轮效果。问题是,当我尝试实现它时,我无法让它工作(也许我的noobish javascript技能)。

这是效果:

http://jsfiddle.net/hakim/Ht6Ym/

这是我的样式表:

和我的网站:

http://goo.gl/1KbHb

我使用的JS是:

<script type='text/javascript'>

    var supports3DTransforms =  document.body.style['webkitPerspective'] !== undefined || 
                                document.body.style['MozPerspective'] !== undefined;

    function linkify( selector ) {
        if( supports3DTransforms ) {

            var nodes = document.querySelectorAll( selector );

            for( var i = 0, len = nodes.length; i < len; i++ ) {
                var node = nodes[i];

                if( !node.className || !node.className.match( /roll/g ) ) {
                    node.className += ' roll';
                    node.innerHTML = '<span data-title="'+ node.text +'">' + node.innerHTML + '</span>';
                }
            };
        }
    }

    linkify( 'a' ); 
    </script>

2 个答案:

答案 0 :(得分:0)

删除最后一行js代码(linkify( 'a' );)并重写。这是jsfiddle和所有网站的问题[甚至是StackOverFlow]。那里有一些隐藏的unicode字符,使函数调用非法。

答案 1 :(得分:0)

我只用纯粹的CSS做了同样的事情。阅读教程: - http://www.howtokickblogger.com/2012/11/post-links-hover-effect.html

演示&gt; http://bit.ly/14AHwcc

玩得开心:)