在鼠標懸停上滑動DIV的雙重級別

-1

我試圖創建一個類似於網站http://tracelytics.github.io/pageguide/的效果，當您將鼠標懸停在屏幕左側的「頁面指南」圖標上時，它會進一步延伸並顯示另一個隨之而來的信息水平。在鼠標懸停上滑動DIV的雙重級別

我該如何得到這種效果？我也想使用相同的圖標。

我不知道從哪裏開始。任何樣品小提琴或插件將幫助我。謝謝。

來源

2014-01-14 user3195347

只是好奇，爲什麼你不希望使用Pageguide插件，而不是創建自己的？ – ElliotM

我不打算使用該插件。我正在嘗試創建該插件所具有的效果。 – user3195347

http://jsfiddle.net/fenderistic/SqjfT/

這裏是一個非常簡單的實現，我創建模擬你在該插件看到。

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

來源

2014-01-14 19:16:47 ElliotM

如何在我分享的網站中添加圖片？ – user3195347

你可以用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"); 
});

來源

2014-01-14 19:17:11 Cam

謝謝。我正在學習CSS和jQuery ..我可以理解這個代碼的一小部分。如何在我分享的鏈接中添加圖片上方的圖片？再次感謝。 – user3195347

你想添加它作爲背景，你可以將它放置在文本上方，你可以將它作爲一個img，但我通常喜歡做它作爲背景。 – Cam

這是一個更新的版本。 http://jsfiddle.net/cornelas/9sH3v/2/ – Cam

這種效應已與CSS3動畫來實現的。你必須在你的CSS聲明的過渡性質，在這裏你有一個例子代碼：

-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/

來源

2014-01-14 19:19:41 ElChiniNet

如何在我分享的網站中添加圖片？ – user3195347

也用CSS。使用background-image屬性。我用頁面使用的相同圖標更新了de jsfiddle：http：// jsfiddle。net/elchininet/Zm9uc/3/ – ElChiniNet

當我與圖像一起使用文本時，它們都會疊加。如何使它在CSS中的新行？ – user3195347

我可能會很慢，使提琴但是......她走了。你必須像這樣使用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/

來源

2014-01-14 19:27:50 Davidicus

這看起來很接近我在找什麼。謝謝。如何在我分享的網站中添加圖片？ – user3195347

有幾種方法，但我用一個僞元素來放置一個紅色框。你可以檢查更新的小提琴http://jsfiddle.net/Davidicus/BpAL5/的標記和樣式。只需改變你的圖像路徑的「紅色」，你就可以走了。如果我的答案有幫助，你可以將其標記爲正確的？ – Davidicus

在鼠標懸停上滑動DIV的雙重級別

回答

相關問題