jquery realizes beautiful practical merchandise picture tips box effect (no picture arrows + shadows) _jquery

This article illustrates the effect of jquery to achieve beautiful practical product picture tips box. Share to everyone for your reference, specific as follows:

The screenshot of the running effect is as follows:

The specific code is as follows:

<! 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;p adding:1px;top:-3px;left:-3px; Tip {Width:82px;height:82px;border:1px solid #DDD;} </style> <script type= "Text/javascript" > $ (Function () {$ ('. Tip '). MouseOver (function () {var $ti p = $ (' <div id= "Tip" ><div class= "T_box" ><div><s><i></i></s></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 +) + "px"})}) }) </script> <p> </p> <a href= "#" ></a> <a href=" # "></a> <a href= "#" ></a>

 

More interested readers of jquery-related content can view this site: "jquery switching effects and tips summary", "jquery drag and drop effects and tips summary", "JQuery Extended Skills Summary", "jquery common Classic Effects summary", " jquery animation and special effects usage summary, "jquery selector usage Summary" and "jquery commonly used plug-in and usage summary"

I hope this article will help you with the jquery program design.