编程 Javascript

jQuery实现漂亮实用的商品图片tips提示框效果(无图片箭头+阴影)

Posted in Javascript onApril 16, 2016

本文实例讲述了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实现漂亮实用的商品图片tips提示框效果(无图片箭头+阴影)

- Author -

且行且思

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JS 密码强度验证(兼容IE,火狐,谷歌)

Mar 15 Javascript

JS实现简单的Canvas画图实例

Jul 04 Javascript

浅谈Jquery为元素绑定事件

Apr 27 Javascript

BootStrap 弹出层代码

Feb 09 Javascript

jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】

Mar 09 Javascript

关于Promise 异步编程的实例讲解

Sep 01 Javascript

React Native react-navigation 导航使用详解

Dec 01 Javascript

解决layui前端框架 form表单,table表等内置控件不显示的问题

Aug 19 Javascript

ES6的Fetch异步请求的实现方法

Dec 07 Javascript

vue学习笔记之作用域插槽实例分析

Feb 01 Javascript

JavaScript 实现自己的安卓手机自动化工具脚本(推荐)

May 13 Javascript

JS绘图Flot应用图形绘制异常解决方案

Oct 16 Javascript

jQuery实现无限往下滚动效果代码

Apr 16 #Javascript

jQuery遍历json的方法分析

Apr 16 #Javascript

jquery对dom节点的操作【推荐】

Apr 15 #Javascript

Jquery attr()方法属性赋值和属性获取详解

Apr 15 #Javascript

有关jquery与DOM节点操作方法和属性记录

Apr 15 #Javascript

快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突

Apr 15 #Javascript

使用Object.defineProperty实现简单的js双向绑定

Apr 15 #Javascript