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


Posted in Javascript onApril 16, 2016

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
通过JAVASCRIPT读取ASP设定的COOKIE
Feb 15 Javascript
jQuery开发者都需要知道的5个小技巧
Jan 08 Javascript
浅谈js的setInterval事件
Dec 05 Javascript
Javascript实现多彩雪花从天降散落效果的方法
Feb 02 Javascript
jQuery的基本概念与高级编程
May 14 Javascript
AngularJS中的表单简单入门
Jul 28 Javascript
JavaScript之WebSocket技术详解
Nov 18 Javascript
微信小程序 出现47001 data format error原因解决办法
Mar 10 Javascript
vue.js,ajax渲染页面的实例
Feb 11 Javascript
小程序getLocation需要在app.json中声明permission字段
Apr 04 Javascript
Vertx基于EventBus发送接受自定义对象
Nov 16 Javascript
angular4实现带搜索的下拉框
Mar 25 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
You might like
如何突破PHP程序员的技术瓶颈分析
2011/07/17 PHP
php常用字符串处理函数实例分析
2014/11/22 PHP
php导出生成word的方法
2015/12/25 PHP
php array_values 返回数组的值实例详解
2016/11/17 PHP
PHP设计模式之适配器模式(Adapter)原理与用法详解
2019/12/12 PHP
Javascript 不能释放内存.
2006/09/07 Javascript
Prototype使用指南之ajax
2007/01/10 Javascript
jQuery之网页换肤实现代码
2011/04/30 Javascript
常见JS验证脚本汇总
2015/12/01 Javascript
完美实现八种js焦点轮播图(下篇)
2020/04/20 Javascript
jQuery简单创建节点的方法
2016/09/09 Javascript
JS给swf传参数的实现方法
2016/09/13 Javascript
深入理解React Native原生模块与JS模块通信的几种方式
2017/07/24 Javascript
浅谈vue的踩坑路
2017/08/31 Javascript
Vue中 key keep-alive的实现原理
2018/09/18 Javascript
详解vuex之store拆分即多模块状态管理(modules)篇
2018/11/13 Javascript
vuex state中的数组变化监听实例
2019/11/06 Javascript
element-ui树形控件后台返回的数据+生成组织树的工具类
2020/03/05 Javascript
Vue初始化中的选项合并之initInternalComponent详解
2020/06/11 Javascript
[04:45]DOTA2-DPC中国联赛正赛 iG vs LBZS 赛后选手采访
2021/03/11 DOTA
Python函数中定义参数的四种方式
2014/11/30 Python
学习python之编写简单简单连接数据库并执行查询操作
2016/02/27 Python
python 与GO中操作slice,list的方式实例代码
2017/03/20 Python
Python使用剪切板的方法
2017/06/06 Python
Python自定义线程类简单示例
2018/03/23 Python
python 2.7.13 安装配置方法图文教程
2018/09/18 Python
利用python在excel里面直接使用sql函数的方法
2019/02/08 Python
Python一键安装全部依赖包的方法
2019/08/12 Python
卸载tensorflow-cpu重装tensorflow-gpu操作
2020/06/23 Python
浅谈sklearn中predict与predict_proba区别
2020/06/28 Python
Pycharm调试程序技巧小结
2020/08/08 Python
采用冷却技术的超自然舒适度:GhostBed床垫
2018/09/18 全球购物
销售经理工作职责范文
2013/12/03 职场文书
蛋糕店创业计划书范文
2014/09/21 职场文书
2014旅游局党组书记党建工作汇报材料
2014/11/02 职场文书
Nginx实现会话保持的两种方式
2022/03/18 Servers