<!DOCTYPE html><html lang="en"><head><meta charset=utf-8" /><title>文字提示</title> <!-- 引入jQuery --> <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="scripts/jquery1.7.js" type="text/javascript"></script><style type="text/css">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;}li a img{width:100px; height:75px;}/* 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; $(".tooltip img").mouseover(function(e){ this.myTitle = this.alt; this.title = ""; var imgTitle = this.myTitle? "<br/>" + this.myTitle : ""; var tooltip = "<div id='tooltip'><img src='"+ this.src+"' alt='"+imgTitle+"'/>"+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 class="tooltip"> <li><a href="#" title="苹果 iPod"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/apple_1_bigger.jpg" alt="苹果 iPod" /></a></li> <li><a href="#" title="苹果 iPod nano"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/apple_2_bigger.jpg" alt="苹果 iPod nano" /></a></li> <li><a href="#" title="苹果 iPhone"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/apple_3_bigger.jpg" alt="苹果 iPhone" /></a></li> <li><a href="#" class="tooltip" title="苹果 Mac"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/apple_4_bigger.jpg" alt="苹果 Mac" /></a></li> </ul></body></html>注意：
该博客有些代码会转掉，如这篇博客50行处代码：
var tooltip = "<div id='tooltip'><img src='"+ this.src+"' alt='"+imgTitle+"'/>"+imgTitle+"<\/div>"; //创建 div 元素
源代码是
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦