Question

我正在尝试创建与网站http://tracelytics.github.io/pageguide/中类似的效果，当您将鼠标悬停在屏幕左侧的“页面指南”图标上时，它会进一步扩展并显示另一个级别的信息用它。

我怎样才能获得这种效果？我也想使用相同的图标。

我不知道从哪里开始。任何样本小提琴或插件都会对我有所帮助。感谢。

Answer 1

这是我创建的一个非常简单的实现，可以模拟您在该插件中看到的内容。

var old;
$(".hover").hover(
function(){
    old = $(this).css("right");
    $(this).animate({right:"0"},100);  
}, function() {
    $(this).animate({right:old},100);  
}
)

Answer 2

你可以用css和只有jquery来打开模态。这篇文章首先只有css（我没有放图像，但如果你有一些css知识，你可以添加自己的图像）。

http://jsfiddle.net/cornelas/9sH3v/

body {
 overflow: hidden;
}
#page_tab {
 background: #ccc;
 width: 150px;
 height: 50px;
 position: absolute;
 right: -5em;
 transition: all .5s ease;    
}
#page_tab:hover {
 right: 0;
 transition: all .5s ease;
}

<div id="page_tab"></div>

这里是JQUERY

http://jsfiddle.net/cornelas/9sH3v/1/

$('#page_tab').click(function () {
function buildFrame() {
    if ($('#mid').length > 0) {} else {
        $('body').append("<div id='mid'></div>");
        $('#mid').css({
            height: "100%",
            width: "100%",
            position: "absolute",
            top: "0",
                "backgroundColor": "rgba(51, 51, 51, .5)"

        });
    }
    if ($('#info').length > 0) {} else {
        $('#mid').append("<div id='info'></div>");
        $('#info').css({
            position: "absolute",
            top: "35%",
            left: "35%",
            fontSize: "6em",
            color: "#fff"
        });
    }
}
buildFrame();
$('#info').empty().append("YOUR CONTENT");
});

Answer 3

使用CSS3动画已实现此效果。您必须在CSS中声明transition属性，这里有一个示例代码：

-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
-ms-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;

这里有一个jsfiddle的例子：

http://jsfiddle.net/elchininet/Zm9uc/

Answer 4

我可能会慢一点，但是......她走了。你必须像这样使用css transitions

-webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    -ms-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;

。我做了一个小提琴。

http://jsfiddle.net/Davidicus/BpAL5/

鼠标悬停时双层滑动DIV

4 个答案: