JQuery 图片放大代码
2011-10-30 12:54
309 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <title>图片放大代码</title> <script src="../scripts/jquery-1.4.4-vsdoc.js"></script> <style type="text/css"> #tip {position:absolute;color:#333;display:none;} #tip s {position:absolute;top:40px;left:-20px;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;background:#FFF;padding:1px;top:-3px;left:-3px;} .tip {width:200px;height:200px;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="1.jpg" /></a> <a href="#"><img class="tip" src="2.jpg" /></a> <a href="#" ><img class="tip" src="3.jpg" /></a>
相关文章推荐
- jQuery实现图片放大预览实现原理及代码
- jQuery简易图片放大特效示例代码
- jquery图片滚动放大代码分享(1)
- jquery 图片放大效果(放大镜代码)
- jquery图片滚动放大代码分享(2)
- 可拖拽、拼接、放大图片的jQuery相册特效代码
- jquery图片滚动放大代码分享(2)
- 无需JS和jQuery代码实现CSS3鼠标浮动放大图片
- jQuery简易图片放大特效示例代码
- 基于Jquery的仿照flash放大图片效果代码
- 基于Jquery的仿照flash放大图片效果代码
- jquery图片滚动放大代码分享
- 简单的鼠标滑动上去图片放大Jquery特效代码
- jQuery实现图片放大预览实现原理及代码
- Jquery实现代码列表,包含全选删除图片的放大
- 可拖拽、拼接、放大图片的jQuery相册特效代码
- 图片放大 jquery代码手写
- 代码: 仿淘宝商品详情页左上,图片鼠标浮上去,图片部分区域放大 (页面布局:图片列表)