jQuery melaksanakan petua gambar produk yang cantik dan praktikal kesan kotak segera (tiada anak panah gambar + bayang)

jQuery melaksanakan petua gambar produk yang cantik dan praktikal kesan kotak segera (tiada anak panah gambar + bayang)_jquery

WBOY

Lepaskan： 2016-05-16 15:05:12

asal

1669 orang telah melayarinya

Contoh dalam artikel ini menerangkan pelaksanaan kesan kotak gesaan petua gambar produk yang cantik dan praktikal menggunakan jQuery. Kongsikan dengan semua orang untuk rujukan anda, butirannya adalah seperti berikut:

Tangkapan skrin kesan berjalan adalah seperti berikut:

Kod khusus adalah seperti berikut:

<!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>

Salin selepas log masuk

Pembaca yang berminat dengan lebih banyak kandungan berkaitan jQuery boleh menyemak topik khas di tapak ini: "Kesan penukaran JQuery dan ringkasan teknik", "Kesan seretan jQuery dan ringkasan teknik ", "Ringkasan kemahiran sambungan JQuery", "ringkasan kesan khas klasik biasa jQuery", "ringkasan penggunaan animasi jQuery dan kesan khas", " ringkasan penggunaan pemilih jquery " dan "Ringkasan pemalam dan penggunaan biasa jQuery "

Saya harap artikel ini akan membantu semua orang dalam pengaturcaraan jQuery.