版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u010285684/article/details/38305617
实例要求:
一,鼠标进入图片上时,会有一张新的图片跟随在鼠标右下方,并且该图片放大了.
二,当鼠标离开图片时,对应的放大图片就消失了.
工具包:jquery-1.11.1.js
下面是我的过程:
1.html页面中有几张图片
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片的放大</title>
<link href="css/pic_pig.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
</head>
<body>
<ul id="myimg">
<li>
<img alt="宝" src="img/lyf.jpg">
</li>
<li>
<img alt="贝" src="img/p01.jpg">
</li>
<li>
<img alt="不" src="img/p02.jpg">
</li>
<li>
<img alt="要" src="img/p03.jpg">
</li>
<li>
<img alt="跑" src="img/p04.jpg">
</li>
</ul>
</body>
</html>页面如下:2.这个页面在没有加入样式的时候还是列排的,不是横排的,所以我又加入CSS样式
@CHARSET "UTF-8";
#myimg img {
border: 1px dotted red;
}
ul li {
float: left;
margin: 10px;
list-style-type: none;
}3.在页面和样式都写好后,下页面就是我写的javascript的代码
$("ul img").mouseover(function(event) {//鼠标进入图片,放大的图片跟随鼠标的移动
//折分字符,因为图片的路径是src="img/lyf.jpg",所以我们用split来折分
//attr方法:设置或返回被选元素的属性值。
var name1 = $(this).attr("src").split(".")[0] + ".jpg";
//把放大的图片,图片的说明放到一起,放在一个面板上面
//append:向每个匹配的元素内部追加内容。
$(document.body).append("<img src='" + name1 + "' id='myimgbig'>");
//wrap方法:把标签组合起来,包在一起
$("#myimgbig").wrap("<div id='wrap'></div>");
$("#wrap").append("<br>" + $(this).attr("alt"));
//写到这里,页面自动生成了<div id="wrap"></div>,但是我们还没有对这个标签进行样式整合,下面我们又添加了wrap的CSS
//因为他的坐标是跟随鼠标移动的，所以去我把这个动态的位置css没有写进css文件中
$("#wrap").css({
top : event.pageY + 15,
left : event.pageX + 15
});
}).mouseout(function() {//鼠标移出图片,跟随的放大的图片消失
//这里的remove方法是移除生成的包容页面的所有的属性
$("#wrap").remove();
}).mousemove(function() {
$("#wrap").css({
top : event.pageY + 15,
left : event.pageX + 15
});
});下面是id=wrap的csssu样式:<pre name="code" class="css">#wrap {
position: absolute;
background-color: red;
border: 2px, solid, black;
color: white;
}4.下面是运行的结果:
到此写完了..
下面是我的css样式和javascript和html标签没有分离时的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>图片的放大并跟随鼠标移动</title>
<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
<style type="text/css">
#myimg img {
border: 1px dotted red;
}
#wrap {
position: absolute;
background-color: red;
border: 2px, solid, black;
color: white;
}
ul li {
float: left;
margin: 10px;
list-style-type: none;
}
</style>
</head>
<body>
<ul id="myimg">
<li>
<img alt="宝" src="img/lyf.jpg">
</li>
<li>
<img alt="贝" src="img/p01.jpg">
</li>
<li>
<img alt="不" src="img/p02.jpg">
</li>
<li>
<img alt="要" src="img/p03.jpg">
</li>
<li>
<img alt="跑" src="img/p04.jpg">
</li>
</ul>
<script type="text/javascript">
$("ul img").mouseover(function(event) {//鼠标进入图片,放大的图片跟随鼠标的移动
//折分字符,因为图片的路径是src="img/lyf.jpg",所以我们用split来折分
//attr方法:设置或返回被选元素的属性值。
var name1 = $(this).attr("src").split(".")[0] + ".jpg";
//把放大的图片,图片的说明放到一起,放在一个面板上面
//append:向每个匹配的元素内部追加内容。
$(document.body).append("<img src='" + name1 + "' id='myimgbig'>");
//wrap方法:把标签组合起来,包在一起
$("#myimgbig").wrap("<div id='wrap'></div>");
$("#wrap").append("<br>" + $(this).attr("alt"));
//写到这里,页面自动生成了<div id="wrap"></div>,但是我们还没有对这个标签进行样式整合,下面我们又添加了wrap的CSS
//因为他的坐标是跟随鼠标移动的，所以去我把这个动态的位置css没有写进css文件中
$("#wrap").css({
top : event.pageY + 15,
left : event.pageX + 15
});
}).mouseout(function() {//鼠标移出图片,跟随的放大的图片消失
//这里的remove方法是移除生成的包容页面的所有的属性
$("#wrap").remove();
}).mousemove(function() {
$("#wrap").css({
top : event.pageY + 15,
left : event.pageX + 15
});
});
</script>
</body>
</html>