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中的排序算法代码
Feb 22 Javascript
jQuery的运行机制和设计理念分析
Apr 05 Javascript
script的async属性以非阻塞的模式加载脚本
Jan 15 Javascript
用jQuery toggleClass 实现鼠标移上变色
May 14 Javascript
基于jquery实现页面滚动到底自动加载数据的功能
Dec 19 Javascript
vue分页组件table-pagebar使用实例解析
Nov 15 Javascript
使用node.js中的Buffer类处理二进制数据的方法
Nov 26 Javascript
微信小程序 仿猫眼实现实例代码
Mar 14 Javascript
Vue中Table组件Select的勾选和取消勾选事件详解
Mar 19 Javascript
vue中使用 pako.js 解密 gzip加密字符串的方法
Jun 10 Javascript
浅谈vue中使用编辑器vue-quill-editor踩过的坑
Aug 03 Javascript
Vue向后台传数组数据,springboot接收vue传的数组数据实例
Nov 12 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
解决表单中第一个非隐藏的元素获得焦点的一个方案
2009/10/26 Javascript
纯JavaScript实现的完美渐变弹出层效果代码
2010/04/02 Javascript
Javascript实现带关闭按钮的网页漂浮广告代码
2014/01/12 Javascript
table对象中的insertRow与deleteRow使用示例
2014/01/26 Javascript
原生javascript实现隔行换色
2015/01/04 Javascript
详谈jQuery操纵DOM元素属性 attr()和removeAtrr()方法
2015/01/22 Javascript
深入浅析Node.js 事件循环
2015/12/20 Javascript
js操作DOM--添加、删除节点的简单实例
2016/07/08 Javascript
图文详解JavaScript的原型对象及原型链
2016/08/02 Javascript
分享JavaScript监听全部Ajax请求事件的方法
2016/08/28 Javascript
微信小程序 获取设备信息 API实例详解
2016/10/02 Javascript
Bootstrap选项卡动态切换效果
2016/11/28 Javascript
纯JS实现图片验证码功能并兼容IE6-8(推荐)
2017/04/19 Javascript
vue.js中created方法作用
2018/03/30 Javascript
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
2018/04/27 jQuery
浅谈在node.js进入文件目录的问题
2018/05/13 Javascript
微信小程序登录session的使用
2019/03/17 Javascript
微信小程序上传多图到服务器并获取返回的路径
2019/05/05 Javascript
Vue 实现前进刷新后退不刷新的效果
2019/06/14 Javascript
ES6 Promise对象的含义和基本用法分析
2019/06/14 Javascript
微信小程序实现星星评分效果
2020/11/01 Javascript
[18:20]DOTA2 HEROS教学视频教你分分钟做大人-昆卡
2014/06/11 DOTA
使用Python的判断语句模拟三目运算
2015/04/24 Python
Django接受前端数据的几种方法总结
2016/11/04 Python
python保存二维数组到txt文件中的方法
2018/11/15 Python
python生成requirements.txt的两种方法
2019/09/18 Python
Python的in,is和id函数代码实例
2020/04/18 Python
用html5实现语音搜索框的方法
2014/03/18 HTML / CSS
美国知名的旅游网站:OneTravel
2018/10/09 全球购物
FC-Moto瑞典:欧洲最大的摩托车服装和头盔商店之一
2018/11/27 全球购物
西班牙多品牌鞋店连锁店:Krack
2018/11/30 全球购物
Solaris操作系统的线程机制
2012/12/23 面试题
关于Java finally的面试题
2016/04/27 面试题
与UNIX有关的几个名词
2015/09/17 面试题
设计专业自荐信
2014/06/19 职场文书
蔬果开业典礼发言稿应该怎么写?
2019/09/03 职场文书