|
Абсолютное фиксированное расположение блока-div или картинки
|
|
|
| Дата: Воскресенье, 27.05.2012, 12:30 | Сообщение # 1 |
|
Группа: Администраторы
Сообщений: 1530
| Абсолютное(position:absolute) фиксированное(position:fixed) расположение(позиционирование) блока(div) или картинки(img) относительно центра браузера, в том числе и Интернет Эксплорер(IE) достигается следующим образом:
<html>
<body style="height:1000px;">
<div id="fixblock" style="display:none;position:absolute;z-index:10;"></div>
<img src="http://photoshedevr.3dn.ru/_ph/18/2/432661235.jpg" style="width:50px;" onclick="top_wind('http://photoshedevr.3dn.ru/_ph/18/2/432661235.jpg')" />
<script>
window.onscroll = function(){
var scroll = document.documentElement.scrollTop || document.body.scrollTop;
fixblock.style.top = scroll + 30+'px';
}
function top_wind(pic_src) {
var fixblock=document.getElementById("fixblock");
fixblock.style.left=document.body.clientWidth/2-250; //250 - ширина картинки
fixblock.style.top=document.body.scrollTop+30;
fixblock.innerHTML="<img src='"+pic_src+"' width='500' style='border:10px solid #f7f6f5;cursor:pointer;' onclick=fixblock.style.display='none'; alt='Описание' />";
fixblock.style.display='block';
}
</script>
</body>
</html>
|
| |
| |
|
| Дата: Воскресенье, 27.05.2012, 13:29 | Сообщение # 2 |
|
Группа: Администраторы
Сообщений: 1530
| + Добавим рамке тени
<style>
#fixblock {
-webkit-box-shadow: 5px 5px #ccc;
-moz-box-shadow: 5px 5px #ccc;
box-shadow: 5px 5px #ccc;
}
</style>
|
| |
| |
Играйте бесплатно в 
