jQuery实现漂亮实用的商品图片技巧提示框效果（无图片箭头阴影)

本文实例讲述了框架实现漂亮实用的商品图片技巧提示框效果。分享给大家供大家参考，具体如下：

运行效果截图如下：

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD '脚本类型=' text/JavaScript ' src=' http : jquery-1。4 .2 .量滴js '/脚本样式类型=' text/CSS ' # tip { position : absolute；display : none } # tip s { position : absolutetop :40 pxleft :-21px；显示：块；宽度：0 pxheight :0 px font-size :0 px；线高：0 px边框颜色：透明# BBA透明透明；边框样式：虚线实心虚线；边框宽度：10 px} # tips s I { position : absolutetop :-10px；左侧：-8px；显示：块；宽度：0 pxheight :0 px font-size :0 px；线高：0 px边框颜色：透明# fff透明透明；边框样式：虚线实心虚线；边框宽度：10 px} #提示t _ box {位置：相对背景-颜色： # CCCfilter:alpha(不透明度=50);-moz-opa市33600.5；底部：-3px；右：-3px；} #提示t _ box div {相对位置：背景色： # FFF；border:1px固体# ACA 899 padd :1 xtop :-3px；左：-3px；}.tip { width :82 px h8 :82 pxborder :1 px固体# DDD；}/style脚本类型=' text/JavaScript ' $(function(){ $(').提示')。将鼠标悬停在(function(){ var $ tip=$(' div id=' tip ' div class=' t _ box ' div si/I/simg src=' http : ' this。src ' '//div/div/div’)；$(“正文”).追加($ tip)；$('#tip ').show(' fast ')；}).mouseout(函数(){ $('#tip ').移除();}).鼠标移动(函数(e) { $('#tip ').css({ 'top': (e.pageY - 60) 'px '，' left ' :(e . Pagex 30)' px ' }))))))))/script p/pa href=' # ' img class=' tip ' src=' http :http://img 04。淘宝客。com/Bao/uploaded/i4/T1dEBQXipuXXczdj2a _ 091642。jpg _ 310 x310更多关于框架相关内容感兴趣的读者可查看本站专题： 《jQuery切换特效与技巧总结》 、 《jQuery拖拽特效与技巧总结》 、 《jQuery扩展技巧总结》 、 《jQuery常见经典特效汇总》 、 《jQuery动画与特效用法总结》 、 《jquery选择器用法总结》 及《jQuery常用插件及用法总结》

希望本文所述对大家框架程序设计有所帮助。