jQuery实现漂亮实用的商品图片tips提示框效果(无图片箭头+阴影)
更新时间：2016年04月16日 12:00:54 作者：且行且思
这篇文章主要介绍了jQuery实现漂亮实用的商品图片tips提示框效果,具有鼠标滑过显示动态提示框的效果,涉及针对鼠标事件的响应及页面元素动态操作技巧,需要的朋友可以参考下
本文实例讲述了jQuery实现漂亮实用的商品图片tips提示框效果。分享给大家供大家参考，具体如下：
运行效果截图如下：
具体代码如下：
<!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>
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery切换特效与技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
相关文章
据统计，目前全世界57.3%的网站使用它。也就是说，10个网站里面，有6个使用jQuery。如果只考察使用工具库的网站，这个比例就会上升到惊人的91.7%2013-06-06
大家在qq聊天或者是玩微信时发表自己的心情，都会允许加入表情，大家知道qq表情是怎么实现的吗，接下来，通过本篇文章给大家实例讲解基于jQuery实现的QQ表情插件，需要的朋友可以参考下2015-08-08
下面小编就为大家分享一篇jQuery实现左右滑动的toggle方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
$(document).ready(function() {})不执行初始化脚本
今天发现一个页面始终不执行$(document).ready(function() {})初始化脚本，下面是解决方法2014-06-06
这篇文章主要介绍了jQuery实现当拉动滚动条到底部加载数据的方法,结合实例形式分析了jQuery针对滚动事件的监听、响应及数据加载相关操作技巧,需要的朋友可以参考下2019-01-01
这篇文章主要介绍了JQuery搜索框自动补全(模糊匹配)功能实现示例没使用JQuery UI的autocomplete插件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-01-01
解决3.01版的jquery.form.js中文乱码问题的解决方法
最近用到了jquery的一个fom插件，是一个全面支持表单的jQuery插件。昨天在用ajaxSubmit进行Form Post提交的时候，发现服务器端取回的中文数据居然是乱码。这个可能是因为jquery是utf-8，不支持gb23122012-03-03
这篇文章主要介绍了jQuery实现的点击显示隐藏下拉菜单功能,结合完整实例形式分析了jQuery事件响应及页面元素属性动态操作简单实现技巧,需要的朋友可以参考下2019-05-05
jquery.simple.tree插件 更简单，兼容性更好的无限树插件
在这里介绍一款小巧，功能强大，能拖拽，支持异步，且兼容性更高的jquery Tree插件2010-09-09
jQuery在IE下使用未闭合的xml代码创建元素时的Bug介绍
这个偏门Bug是我在更新phZoom 1.29后发现的, 我先将之重现一下2012-01-01
最新评论