原创力文档- 1、本文档共3页，可阅读全部内容。
- 2、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
- 3、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
查看更多
使用JQuery响应鼠标放大和缩小图片
我们在很多网站上，都可以看到把鼠标放在一些图片上，然后图片就会放大显示出来，这样的效果给浏览的人一种很奇妙的感觉，这样的效果很受人喜欢，在此，本人经过一段时间的学习，也做出了小小效果，希望大家一起学习学习
只要大家把下面图片的路径改一下就可以了，还有图片的名字，
主要的就是li标签里的路径和名称
这些我相信大家都懂的，就不多说了，效果代码如下：
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd
html xmlns=/1999/xhtml
head
meta http-equiv=Content-Type content=text/html; charset=utf-8 /
title无标题文档/title
script type=text/javascript src= HYPERLINK view-source:file:///F:/Javascript/jQuery/jQueryTest/js/jquery-1.6.1.min.js js/jquery-1.6.1.min.js/script
script type=text/javascript
$(function(){
var x=20;
var y=10;
$(#myul li a.myprompt).mouseover(function(e){
this.mytitle=this.title;
this.title=;
var imgtitle=this.mytitle? br /+this.mytitle:;
var mytit=div id=propmtBoximg src=+this.href+ alt=图片预览 /+imgtitle+/div;
$(body).append(mytit);
$(#propmtBox).css({
top:+(e.pageY+y)+px,
left:+(e.pageX+x)+px
}).show(2000);
$(#propmtBox img).css({
width:500px,
height:400px
})
}).mouseout(function(e){
this.title=this.mytitle;
$(#propmtBox).remove();
}).mousemove(function(e){
$(#propmtBox).css({
top:+(e.pageY+y)+px,
left:+(e.pageX+x)+px
})
})
})
/script
style type=text/css
#myul li{
list-style:none;
float:left;}
#myul img{
width:150px;
height:100px;
border:none;
}
#propmtBox{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:2px;
display:none;
color:#fff;
}
/style
/head
body
ul id=myul
lia class=myprompt href= HYPERLINK view-source:file:///F:/Javascript/jQuery/jQueryTest/images/50feb50d6b1b3ac7aa645739.jpg images/50feb50d6b1b3ac7aa645739.jpg title=my图一img src= HYPERLINK view-source:file:///F:/Javascript/jQuery/jQueryTest/images/50feb50d6b1b3ac7aa645739.jpg images/50feb50d6b1b3ac7aa645739.jpg alt=图一/a/li
lia class=myprompt href= HYPERLINK view-source:file:///F:/Javascript/jQuery/jQueryTest/images/2009228185618307.jpg images/2009228185618307.jpg title=my图二img src= HYPERLINK view-source:file:///F:
文档评论（0）