Свойство inherit ( CSS ) Фото от клика постепенно увеличивается Фото в закругленном обрамлении

1997

Библиотека JAVASCRIPT SE@RCHER

Javascript + CSS ::• блок • текст • линк • меню • фото • окно • кнопка • фон • видео • таблица

Библиотека javascript SE@RCHER ИЗБРАННЫЕ ПРИМЕРЫ 2013 г. ФЕВРАЛЬ >>>

HTML ↴

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Свойство inherit  ( CSS )</title>
<style type="text/css">
    body { display:inline; }/*Элемент генерирует коробку в строку (нет разрыва строки до и после элемента)*/
     p.le { display:inherit; border-bottom:2px solid red}
     p.pr { display:inherit; border-bottom:2px solid green}
img{border-radius: 8px;border:2px solid blue;margin:8px;}
</style>
<script type="text/javascript">
/*увеличение фото*/
function ImageExpander(oThumb,sImgSrc)
{this.oThumb=oThumb;this.oThumb.expander=this;this.oThumb.onclick=function(){this.expander.expand();}
this.smallWidth=oThumb.offsetWidth;this.smallHeight=oThumb.offsetHeight;this.bExpand=true;this.bTicks=false;if(!window.aImageExpanders)
{window.aImageExpanders=new Array();}
window.aImageExpanders.push(this);this.oImg=new Image();this.oImg.expander=this;this.oImg.onload=function(){this.expander.onload();}
this.oImg.src=sImgSrc;}
ImageExpander.prototype.onload=function()
{this.oDiv=document.createElement("div");document.body.appendChild(this.oDiv);this.oDiv.appendChild(this.oImg);this.oDiv.style.position="absolute";this.oDiv.expander=this;this.oDiv.onclick=function(){this.expander.toggle();};this.oImg.title="Click to reduce.";this.bigWidth=this.oImg.width;this.bigHeight=this.oImg.height;if(this.bExpand)
{this.expand();}
else
{this.oDiv.style.visibility="hidden";this.oImg.style.visibility="hidden";}}
ImageExpander.prototype.toggle=function()
{this.bExpand=!this.bExpand;if(this.bExpand)
{for(var i in window.aImageExpanders)
if(window.aImageExpanders[i]!==this)
window.aImageExpanders[i].reduce();}}
ImageExpander.prototype.expand=function()
{this.bExpand=true;for(var i in window.aImageExpanders)
if(window.aImageExpanders[i]!==this)
window.aImageExpanders[i].reduce();if(!this.oDiv)return;this.oThumb.style.visibility="hidden";this.x=this.oThumb.offsetLeft;this.y=this.oThumb.offsetTop;this.w=this.oThumb.clientWidth;this.h=this.oThumb.clientHeight;this.oDiv.style.left=this.x+"px";this.oDiv.style.top=this.y+"px";this.oImg.style.width=this.w+"px";this.oImg.style.height=this.h+"px";this.oDiv.style.visibility="visible";this.oImg.style.visibility="visible";if(!this.bTicks)
{this.bTicks=true;var pThis=this;window.setTimeout(function(){pThis.tick();},25);}}
ImageExpander.prototype.reduce=function()
{this.bExpand=false;}
ImageExpander.prototype.tick=function()
{var cw=document.body.clientWidth;var ch=document.body.clientHeight;var cx=document.body.scrollLeft+cw/2;var cy=document.body.scrollTop+ch/2;var tw,th,tx,ty;if(this.bExpand)
{tw=this.bigWidth;th=this.bigHeight;if(tw>cw)
{th*=cw/tw;tw=cw;}
if(th>ch)
{tw*=ch/th;th=ch;}
tx=cx-tw/2;ty=cy-th/2;}
else
{tw=this.smallWidth;th=this.smallHeight;tx=this.oThumb.offsetLeft;ty=this.oThumb.offsetTop;}
var nHit=0;var fMove=function(n,tn)
{var dn=tn-n;if(Math.abs(dn)<3)
{nHit++;return tn;}
else
{return n+dn/10;}}
this.x=fMove(this.x,tx);this.y=fMove(this.y,ty);this.w=fMove(this.w,tw);this.h=fMove(this.h,th);this.oDiv.style.left=this.x+"px";this.oDiv.style.top=this.y+"px";this.oImg.style.width=this.w+"px";this.oImg.style.height=this.h+"px";if(!this.bExpand&&(nHit==4))
{this.oImg.style.visibility="hidden";this.oDiv.style.visibility="hidden";this.oThumb.style.visibility="visible";this.bTicks=false;}
if(this.bTicks)
{var pThis=this;window.setTimeout(function(){pThis.tick();},25);}}
</script>
</head>
<body>
<p class="le"><img src="../2013-03/001.jpg" border="0" onClick="new ImageExpander(this, '../2013-03/001.jpg');" width=200 title="фото 1"></p>
<p class="pr"><img src="../2013-03/002.jpg" border="0" onClick="new ImageExpander(this, '../2013-03/002.jpg');" width=200 title="фото 2"></p>
<p class="le"><img src="../2013-03/003.jpg" border="0" onClick="new ImageExpander(this, '../2013-03/003.jpg');" width=200 title="фото 3"></p>
<p class="pr"><img src="../2013-03/004.jpg" border="0" onClick="new ImageExpander(this, '../2013-03/004.jpg');" width=200 title="фото 4"></p>
 <script type="text/javascript" > (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); ym(53156500, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true }); </script> <noscript><div><img src="https://mc.yandex.ru/watch/53156500" style="position:absolute; left:-9999px;" alt="" /></div></noscript> </body>
</html>

HTML ↴

размер Kb

ПРИМЕР ↴(пример надо смотреть в полном окне)

✔ пример в полном окне