您好,欢迎来到jQuery吧!QQ群:193687763(钱端开发)

jQuery吧-Write Less, Do More | 注重前端开发

首页 > jQuery > jQuery特效 > jQuery弹出提示特效 > 正文

jquery滑过图片显示提示框信息效果

2014-03-18 10:03:22 作者:天外飞仙 人气:1512 Views

jquery滑过图片显示提示框信息效果
jquery滑过图片显示提示框信息效果
js代码

<script type="text/javascript"> $(function() { var a; $(".cover-list li").hover(function() { if (a) { window.clearTimeout(a) } var c = this; a = window.setTimeout(function() { var g = $(".detail-frame", c).html(); var i = $("img", c).offset().left; var h = $("img", c).offset().top; if ($(c).width() == 150) { var j = 160 } else { var j = $("img", c).width() + 10 } $("body").append('<div class="detail-tip"></div>'); if ($(c).hasClass("r-end")) { $(".detail-tip").html(g).append('<span class="arrow-right"></span>').css("left", i + j - 492).css("top", h); } else { $(".detail-tip").html(g).append('<span class="arrow-left"></span>').css("left", i + j).css("top", h); } }, 200) }, function() { if (a) { window.clearTimeout(a) } $(".detail-tip").remove() }); });</script>

下载地址
预览地址

链接:http://www.jqueryba.com/3104.html(转载时请注明本文出处及文章链接)

jQuery吧-Write Less, Do More | 注重前端开发

jQuery吧-Write Less, Do More | 注重前端开发

Copyright © 2013 jqueryba.com, All Rights Reserved.奔跑在阿里云

免责声明:本站所有内容来源于互联网。如果本站部分内容侵犯您的权益,请您告知,站长会立即处理 苏ICP备12059471号

站内所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!