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