suchen

Heim  >  Artikel  >  Web-Frontend  >  jQuery implementiert schöne und praktische Produktbildtipps-Eingabeaufforderungsbox-Effekte (kein Bildpfeil + Schatten)_jquery

jQuery implementiert schöne und praktische Produktbildtipps-Eingabeaufforderungsbox-Effekte (kein Bildpfeil + Schatten)_jquery

WBOY
WBOYOriginal
2016-05-16 15:05:121656Durchsuche

Das Beispiel in diesem Artikel beschreibt die Implementierung eines schönen und praktischen Prompt-Box-Effekts mit Produktbildtipps mithilfe von jQuery. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Der Screenshot des Laufeffekts sieht wie folgt aus:

Der spezifische Code lautet wie folgt: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<style type="text/css"> 
#tip  {position:absolute;display:none;}
#tip s  {position:absolute;top:40px;left:-21px;display:block;width:0px;height:0px;font-size:0px;line-height:0px;border-color:transparent #BBA transparent transparent;border-style:dashed solid dashed dashed;border-width:10px;}
#tip s i {position:absolute;top:-10px;left:-8px;display:block;width:0px;height:0px;font-size:0px;line-height:0px;border-color:transparent #fff transparent transparent;border-style:dashed solid dashed dashed;border-width:10px;}
#tip .t_box {position:relative;background-color:#CCC;filter:alpha(opacity=50);-moz-opacity:0.5;bottom:-3px;right:-3px;}
#tip .t_box div {position:relative;background-color:#FFF;border:1px solid #ACA899;padding:1px;top:-3px;left:-3px;}
.tip  {width:82px;height:82px;border:1px solid #DDD;}
</style>
<script type="text/javascript">
  $(function () {
    $('.tip').mouseover(function () {
      var $tip = $('<div id="tip"><div class="t_box"><div><s><i></i></s><img src="' + this.src + '" /></div></div></div>');
      $('body').append($tip);
      $('#tip').show('fast');
    }).mouseout(function () {
      $('#tip').remove();
    }).mousemove(function (e) {
      $('#tip').css({ "top": (e.pageY - 60) + "px", "left": (e.pageX + 30) + "px" })
    })
  })
</script>
<p> </p>
<a href="#" ><img class="tip" src="http://img04.taobaocdn.com/bao/uploaded/i4/T1dEBQXipuXXczdj2a_091642.jpg_310x310.jpg" /></a>
<a href="#" ><img class="tip" src="http://img03.taobaocdn.com/bao/uploaded/i3/T1JrxRXhVjXXXPQgc2_044150.jpg_310x310.jpg" /></a>
<a href="#" ><img class="tip" src="http://img03.taobaocdn.com/bao/uploaded/i3/T1tDNOXfNeXXXkeTI8_102031.jpg_310x310.jpg" /></a>

Leser, die an weiteren jQuery-bezogenen Inhalten interessiert sind, können sich die speziellen Themen auf dieser Website ansehen: „Zusammenfassung der JQuery-Umschalteffekte und -Techniken“, „Zusammenfassung der jQuery-Drag-Effekte und -Techniken ", "Zusammenfassung der Fähigkeiten der JQuery-Erweiterung", "Zusammenfassung allgemeiner klassischer Spezialeffekte von jQuery", "Zusammenfassung der Verwendung von jQuery-Animationen und Spezialeffekten", " Zusammenfassung der Verwendung des jQuery-Selektors “ und „Zusammenfassung der allgemeinen jQuery-Plug-ins und Verwendung “

Ich hoffe, dass dieser Artikel allen in der jQuery-Programmierung hilfreich sein wird.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Zusammenfassung der von jQuery_jquery implementierten Countdown-EffektbeispieleNächster Artikel：Zusammenfassung der von jQuery_jquery implementierten Countdown-Effektbeispiele

In Verbindung stehende Artikel

Mehr sehen