不是最好的與jquery,有人可以建議一個通用的方法,我想實現的請嗎?我有一張照片網格,當他們被點擊時,一張不透明的疊加層將在整個圖片之上進行動畫,疊加層將包含一些動態設置的文本。我有圖像,onclick處理程序正在工作,只是試圖找出應用疊加層的最佳方式。謝謝Jquery覆蓋當圖片點擊
1
A
回答
3
不是很漂亮的語義,但應該完成工作: 假設你的圖片是200x200。
<div class='imgcontain'>
<img src='yourimg' alt='' width='200' height='200'>
<p>Your text>/p>
</div>
<div class='imgcontain'>
<img src='yourimg' alt='' width='200' height='200'>
<p>Your text>/p>
</div>
<div class='imgcontain'>
<img src='yourimg' alt='' width='200' height='200'>
<p>Your text>/p>
</div>
//等等......
然後,CSS:
.imgcontain
{
position: relative;
width: 200px;
height: 200px;
overflow: hidden; // not sure you want to makes the overlay just show or slide from top. This is useful only if it should slide.
}
.imgcontain img
{
position: absolute;
width: 200px;
height: 200px;
top: 0px;
left: 0px;
z-index: 2;
}
.imgcontain p
{
position: absolute;
display: block;
width: 200px;
height: 200px;
top: 0px; // if slide from top, -200px
left: 0px;
background: rgba(0,0,0,0.5) // or a background image like a transparent png with repeat
z-index: 1;
}
.imgcontain:hover p
{
z-index: 3; // if slide from top, top: 0px
}
這是一個純CSS的解決方案,沒有動畫,工程與JavaScript的用戶。
如果你想,然後使用jQuery製作動畫:
$(.imgcontain p).hide().css('z-index','3'); // on ready, hide the overlay. Maybe throw the .css() in callback.
然後,在點擊/鼠標懸停
$(.imgcontain).click(function()
{
$(.imgcontain p).show();
});
1
檢查這個網站可能是幫助你。 http://flowplayer.org/tools/overlay/index.html
相關問題
- 1. 覆蓋jQuery的。點擊事件
- 2. jQuery覆蓋點擊事件觸發導航點擊
- 3. Android ImageView可點擊覆蓋
- 4. Javascript和jQuery中可點擊的網格覆蓋圖像
- 5. 覆蓋現有圖片
- 6. 覆蓋兩張圖片
- 7. 單擊覆蓋。模擬點擊使用Jquery
- 8. 點擊jQuery圖片縮略圖更改
- 9. 捕捉覆蓋圖片的照片
- 10. 點擊圖片
- 11. 當div點擊時更改圖片
- 12. 當點擊一個div更改圖片
- 13. 當我點擊圖片時移動UIButtons
- 14. 谷歌地圖:更新圖片覆蓋
- 15. 圖片或圖像覆蓋Java
- 16. Kinect帶屏幕截圖,覆蓋圖片
- 17. jQuery的定義點擊功能將覆蓋所有的點擊功能
- 18. 點擊小圖像和覆蓋更大的圖像
- 19. 當點擊菜單(並刪除邊框)時覆蓋
- 20. jQuery:.load圖片,然後fadeIn()失敗,當點擊兩次!
- 21. 覆蓋覆蓋背景圖片的頂部的清晰文字?
- 22. jQuery覆蓋/幻燈片實現!
- 23. jQuery覆蓋:關閉當前覆蓋並打開另一個?
- 24. 覆蓋點擊顏色/可繪製
- 25. 點擊覆蓋中心位置
- 26. 覆蓋默認的點擊噪聲?
- 27. sIFR - 覆蓋鏈接點擊onRelease?
- 28. 使覆蓋背景點擊可以
- 29. div覆蓋textarea捕捉鼠標點擊
- 30. UWP:UserControl覆蓋GridView項目點擊