Инструменты пользователя

Инструменты сайта


programming:js:float-buttons

Плавающие кнопки управления

<html>
  <head>
    <title>Button over img</title>
    
    
<script type="text/javascript" src="js/jquery.js"></script>
	
 <script type="text/javascript">
$(document).ready(function(){
/*вставка картинок*/
$('#newSS').html('<img src="images/1.jpg" /><img src="images/2.jpg" /><img src="images/3.jpg"  /><img src="images/4.jpg"  /><img src="images/5.jpg"  />');


$('#newSS img').mouseover(
	function(){
	$('#newSS img').removeClass('activeImg');//удаляем для всех картинок класс
	$(this).addClass('activeImg');// для накрытой картинки добавляем класс
				var coopd=$(this).offset();// получаем координаты картинки
				var topB=coopd.top+120;// задаём смещение
				var leftB=coopd.left+10;
$('#blockBtn').css({top:topB,left:leftB,});//выводим кнопки по координатам картинки
$('#blockBtn').css('display','block');//показываем кнопки
});


/*Удаление картинок*/
$('#removeBtn').click(function(){ //кликаем по кнопке удаления
$('.activeImg').remove();//удаляем накрытую картинку 
$('#blockBtn').css('display','none');// прячем кнопки
})

      
    
 });/*end  ready*/
 </script>
<style>
#newSS{
margin-left: 200px;
}
#blockBtn{
position: absolute;
top:0;
left:0;
display:none;
}

</style>	
  </head>
  <body style="margin-top:140px;">
  <h4>Добавление не работает - так как это  задача не только  jQuery, удаление работает.</h4>
<div id="newSS"></div>
<div id="blockBtn"><button id="setBtn">Set</button><button id="removeBtn">Remove</button></div>
 	
  
<!-- copyright (i4) --><div align="center"><a href="http://www.ucoz.ru/" title="Создать сайт бесплатно"><img style="margin:0;padding:0;border:0;" alt="Hosted by uCoz" src="http://s200.ucoz.net/img/cp/8.gif" width="80" height="15" title="Hosted by uCoz" /></a><br /></div><!-- /copyright -->
</body>
</html><div><span id="openstat2323431"></span><script type="text/javascript">var openstat = { counter: 2323431, next: openstat };(function(d, t, p) {var j = d.createElement(t); j.async = true; j.type = "text/javascript";j.src = ("https:" == p ? "https:" : "http:") + "//openstat.net/cnt.js";var s = d.getElementsByTagName(t)[0]; s.parentNode.insertBefore(j, s);})(document, "script", document.location.protocol);</script><script type="text/javascript">new Image().src = "http://counter.yadro.ru/hit;narodcounter?r"+escape(document.referrer)+((typeof(screen)=="undefined")?"":";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";"+Math.random();</script></div>

programming/js/float-buttons.txt · Последнее изменение: 2017/03/27 11:28 — artur

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki