& lt; ! DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt; meta , charset=utf - 8”,/比;
& lt; title>文字提示& lt;/title>
,& lt; !——,,,引入jQuery ——比;
,& lt; script src=" https://www.yisu.com/zixun/scripts/jquery1.7.js ", type=" text/javascript祝辞& lt;/script>
& lt; style type=" text/css "比;
身体{
保证金:0;
填充:40像素;
背景:# fff;
字体:80%,Arial, Helvetica,,无衬线;
颜色:# 555;
行高:180%;
}
img{边界:没有;}
ul,李{
保证金:0;
填充:0;
}
李{
list-style:没有;
浮:左;
显示:内联;
margin-right: 10 px;
边界:1 px solid # AAAAAA;
}
li a img{宽度:100 px;,身高:75 px;}/*,tooltip */#提示{
位置:绝对的;
边界:1 px solid # ccc;
背景:# 333;
填充:2 px;
显示:没有;
颜色:# fff;
}
& lt;/style>
& lt; script type=" text/javascript祝辞
,//鼠标滑动上去显示放大图片效果修改版
$(函数(){
var x =, 10;
var y =, 20;
$ (" .tooltip img) .mouseover(函数(e) {
时间=this.myTitle this.alt;
this.title =,“”;
var imgTitle =, this.myTitle ?,”& lt; br/祝辞”,+,this.myTitle :,“”;
var tooltip =, " & lt; div id=疤崾尽弊４? lt; img src=" " +, this.src +”“, alt=" + imgTitle + "的/在“+ imgTitle +“& lt; \/div>”;,//创建,div 元素
$(“身体”).append(提示);//把它追加到文档中,
$(" #提示”)
. css ({
“顶级”:,(e.pageY + y), +,“像素”,
“左”:,(e.pageX + x),, +,“像素”
}),告诉(“快速”);//才能设置x坐标和y坐标,并且显示
,,,}).mouseout(函数(){
时间=this.title this.myTitle;
$(" #提示”).remove ();,//移除,
,,,}).mousemove(函数(e) {
$(" #提示”)
. css ({
“顶级”:,(e.pageY + y), +,“像素”,
“左”:,(e.pageX + x),, +,“像素”
});
});
}）
& lt;/script>
& lt;/head>
& lt; body>
& lt; h4>有效果:& lt;/h4>
& lt; ul 类="提示"比;
& lt; li> & lt; a href=" https://www.yisu.com/zixun/",, title=捌还?iPod“祝辞& lt; img src=" https://www.yisu.com/zixun/p_w_picpaths/apple_1_bigger.jpg ", alt="苹果,iPod”,/祝辞& lt;/a> & lt;/li>
& lt; li> & lt; a href=" https://www.yisu.com/zixun/",, title=捌还?iPod 纳米“祝辞& lt; img src=" https://www.yisu.com/zixun/p_w_picpaths/apple_2_bigger.jpg ", alt="苹果,iPod 纳米“,/祝辞& lt;/a> & lt;/li>
& lt; li> & lt; a href=" https://www.yisu.com/zixun/", title=捌还?iPhone”祝辞& lt; img src=" https://www.yisu.com/zixun/p_w_picpaths/apple_3_bigger.jpg ", alt="苹果,iPhone”,/祝辞& lt;/a> & lt;/li>
& lt; li> & lt; a href=" https://www.yisu.com/zixun/",类=疤崾尽?title=捌还?Mac”祝辞& lt; img src=" https://www.yisu.com/zixun/p_w_picpaths/apple_4_bigger.jpg ", alt="苹果,Mac”,,/祝辞& lt;/a> & lt;/li>
& lt;/ul>
& lt;/body>
& lt;/html>
注意:
该博客有些代码会转掉,如这篇博客50行处代码:
var tooltip =,“& lt; div id=疤崾尽弊４? lt; img src=" " +, this.src +”“, alt=" + imgTitle + "的/在“+ imgTitle +“& lt; \/div>”;,//创建,div 元素 源代码是
浏览器效果:
