<!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 元素
源代码是
點(diǎn)擊查看更多內(nèi)容
為 TA 點(diǎn)贊
評論
評論
共同學(xué)習(xí)，寫下你的評論
評論加載中...
作者其他優(yōu)質(zhì)文章
正在加載中
感謝您的支持，我會繼續(xù)努力的～
掃碼打賞，你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃，即可進(jìn)行掃碼打賞哦