javascript中引用jquery写的图片放大跟随小实例

来源：互联网发布：英文翻译最好的软件编辑：程序博客网时间：2024/06/05 03:55

实例要求:

一,鼠标进入图片上时,会有一张新的图片跟随在鼠标右下方,并且该图片放大了.
二,当鼠标离开图片时,对应的放大图片就消失了.

工具包: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;}

下面是加入css样式后的页面

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>

最好还是要把CSS,javascript,html分开,养成好的习惯

0 0

javascript中引用jquery写的图片放大跟随小实例

实例要求:

一,鼠标进入图片上时,会有一张新的图片跟随在鼠标右下方,并且该图片放大了.二,当鼠标离开图片时,对应的放大图片就消失了.

工具包:jquery-1.11.1.js

1.html页面中有几张图片

2.这个页面在没有加入样式的时候还是列排的,不是横排的,所以我又加入CSS样式

3.在页面和样式都写好后,下页面就是我写的javascript的代码

下面是我的css样式和javascript和html标签没有分离时的代码

一,鼠标进入图片上时,会有一张新的图片跟随在鼠标右下方,并且该图片放大了.
二,当鼠标离开图片时,对应的放大图片就消失了.