jquery图片提示
2016-02-25 10:22
525 查看
<html> <head> <meta charset="utf-8"> <title>3-2-0</title> <script type="text/javascript" src="../jquery-1.8.2.min.js"></script> <style> body{ margin:0; padding:40px; background:#fff; font:80% Arial, Helvetica, sans-serif; color:#555; line-height:180%; } img{border:none;} ul,li{ margin:0; padding:0; } li{ list-style:none; float:left; display:inline; margin-right:10px; border:1px solid #AAAAAA; } /* tooltip */ #tooltip{ position:absolute; border:1px solid #ccc; background:#333; padding:2px; display:none; color:#fff; } </style> <script type="text/javascript"> $(function(){ var x = 10; var y = 20; $("a.tooltip").mouseover(function(e){ this.myTitle = this.title; this.title = ""; var imgTitle = this.myTitle? "<br/>" + this.myTitle : ""; var tooltip = "<div id='tooltip'><img src='"+ this.href +"' alt='产品预览图'/>"+imgTitle+"<\/div>"; //创建 div 元素 $("body").append(tooltip); //把它追加到文档中 $("#tooltip") .css({ "top": (e.pageY+y) + "px", "left": (e.pageX+x) + "px" }).show("fast"); //设置x坐标和y坐标,并且显示 }).mouseout(function(){ this.title = this.myTitle; $("#tooltip").remove(); //移除 }).mousemove(function(e){ $("#tooltip") .css({ "top": (e.pageY+y) + "px", "left": (e.pageX+x) + "px" }); }); }) </script> </head> <body> <h3>有效果:</h3> <ul> <li><a href="images/apple_1_bigger.jpg" class="tooltip" title="苹果 iPod"><img src="images/apple_1.jpg" alt="苹果 iPod" /></a></li> <li><a href="images/apple_2_bigger.jpg" class="tooltip" title="苹果 iPod nano"><img src="images/apple_2.jpg" alt="苹果 iPod nano"/></a></li> <li><a href="images/apple_3_bigger.jpg" class="tooltip" title="苹果 iPhone"><img src="images/apple_3.jpg" alt="苹果 iPhone"/></a></li> <li><a href="images/apple_4_bigger.jpg" class="tooltip" title="苹果 Mac"><img src="images/apple_4.jpg" alt="苹果 Mac"/></a></li> </ul> <br/><br/><br/><br/> <br/><br/><br/><br/> <h3>无效果:</h3> <ul> <li><a href="images/apple_1_bigger.jpg" title="苹果 iPod"><img src="images/apple_1.jpg" alt="苹果 iPod" /></a></li> <li><a href="images/apple_2_bigger.jpg" title="苹果 iPod nano"><img src="images/apple_2.jpg" alt="苹果 iPod nano"/></a></li> <li><a href="images/apple_3_bigger.jpg" title="苹果 iPhone"><img src="images/apple_3.jpg" alt="苹果 iPhone"/></a></li> <li><a href="images/apple_4_bigger.jpg" title="苹果 Mac"><img src="images/apple_4.jpg" alt="苹果 Mac"/></a></li> </ul> </body> </html>
效果图:
相关文章推荐
- jquery文字提示
- jquery ztree实现模糊搜索功能
- jQuery实现从身份证号中获取出生日期和性别的方法分析
- jquery实现列表上下移动功能
- jquery ztree实现树的搜索功能
- 【经典】jQuery使用大全
- 使用jquery插件实现图片延迟加载--懒加载技术
- jquery ztree异步搜索(搜叶子)实践
- JQuery ztree 异步加载实例讲解
- 使用jQuery页面加载函数启动定时任务
- 解决jquery zclip 插件点击无效的问题
- jquery中trigger引发自定义方法
- jQuery使用contains过滤器实现精确匹配方法详解
- [置顶] jQuery判断checkbox,radio是否选中的3种方法
- jquery中各个事件执行顺序如下:
- 简易jQuery插件
- 利用jQuery中的ajax分页实现代码
- jquery zTree异步加载简单实例讲解
- jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)
- Jquery zTree 树控件异步加载操作