jq图片点击放大代码（jquery点击图片放大）

本篇文章给大家谈谈jq图片点击放大代码，以及jquery点击图片放大对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、js或是jquery代码怎么写让图片在一个div里实现由远到近的渐变效果，即图片慢慢放大，超出div的部分不显示
• 2、jquery图片放大镜代码解析注释
• 3、淘宝图片放大镜的代码jQuery
• 4、基于jQuery的图片放大镜jQZoom ,页面中img标签的jqimg下有黄色波浪线警告
• 5、如何用JS/JQ实现，点击小图片显示大图片及详细信息的功能？
• 6、求js或者jq代码：鼠标滚轮控制图片大小，并且控制放大次数。

js或是jquery代码怎么写让图片在一个div里实现由远到近的渐变效果，即图片慢慢放大，超出div的部分不显示

由远到仅需要做图片的效果（或者用css3效果也行，但目前的兼容性不行）

div固定大小

js，jquery只用setTimeout、setInterval函数进行图片由小变大，宽度到底指定宽度后停止放大

jquery图片放大镜代码解析注释

(function($){//定义作用域

$.fn.imagezoom=function(options){/*自定义插件imageszoom，options代表形参（属性自定义）*/

var settings={

xzoom: 350, /*放大图的宽度(默认是 350)*/

yzoom: 350, /*放大图的高度(默认是 350)*/

offset: 10, /*离原图的距离(默认是 10)*/

position: "right", /*放大图的定位(默认是 "right")*/

preload:1

};

if(options){

$.extend(settings,options);

}

var noalt='';

var self=this;

$(this).bind("mouseenter",function(ev){/*鼠标经过时添加一个事件处理程序*/

var imageLeft=$(this).offset().left;

var imageTop=$(this).offset().top;

var imageWidth=$(this).get(0).offsetWidth;

var imageHeight=$(this).get(0).offsetHeight;

var boxLeft=$(this).parent().offset().left;

var boxTop=$(this).parent().offset().top;

var boxWidth=$(this).parent().width();

var boxHeight=$(this).parent().height();

noalt=$(this).attr("alt");

var bigimage=$(this).attr("rel");

$(this).attr("alt",'');

if($("div.zoomDiv").get().length==0){

$(document.body).append("div class='zoomDiv'img class='bigimg' src='"+bigimage+"'//div"+

"div class='zoomMask' /div");

}

if(settings.position=="right"){

if(boxLeft+boxWidth+settings.offset+settings.xzoomscreen.width){

leftpos=boxLeft-settings.offset-settings.xzoom;

}else{

leftpos=boxLeft+boxWidth+settings.offset;

}

}else{

leftpos=imageLeft-settings.xzoom-settings.offset;

if(leftpos0){

leftpos=imageLeft+imageWidth+settings.offset;

}

}

$("div.zoomDiv").css({top:boxTop,left:leftpos});

$("div.zoomDiv").width(settings.xzoom);

$("div.zoomDiv").height(settings.yzoom);

$("div.zoomDiv").show();

$(this).css('cursor','crosshair');/*光标呈现十字线*/

$(document.body).mousemove(function(e){/*当移动鼠标时*/

mouse=new MouseEvent(e);

if(mouse.ximageLeft||mouse.ximageLeft+imageWidth||mouse.yimageTop||mouse.yimageTop+imageHeight){

mouseOutImage();/*判断鼠标是否超出图片范围*/

return;

}

var bigwidth=$(".bigimg").get(0).offsetWidth;/*最大宽度*/

var bigheight=$(".bigimg").get(0).offsetHeight;/*最大高度*/

var scaley='x';/*x轴比例 */

var scalex='y';/*y轴比例 */

/*随鼠标移动显示大图*/

if(isNaN(scalex)|isNaN(scaley)){/*x、y轴比例不是数字时*/

var scalex=(bigwidth/imageWidth);

var scaley=(bigheight/imageHeight);

$("div.zoomMask").width((settings.xzoom)/scalex);

$("div.zoomMask").height((settings.yzoom)/scaley);

$("div.zoomMask").css('visibility','visible');/*规定元素可见*/

}

xpos=mouse.x-$("div.zoomMask").width()/2;

ypos=mouse.y-$("div.zoomMask").height()/2;

xposs=mouse.x-$("div.zoomMask").width()/2-imageLeft;

yposs=mouse.y-$("div.zoomMask").height()/2-imageTop;

xpos=(mouse.x-$("div.zoomMask").width()/2imageLeft)

? imageLeft:(mouse.x+$(".zoomMask").width()/2imageWidth+imageLeft)

? (imageWidth+imageLeft-$("div.zoomMask").width()):xpos;

ypos=(mouse.y-$("div.zoomMask").height()/2imageTop)

? imageTop:(mouse.y+$("div.zoomMask").height()/2imageHeight+imageTop)

? (imageHeight+imageTop-$("div.zoomMask").height()):ypos;

$("div.zoomMask").css({top:ypos,left:xpos});

$("div.zoomDiv").get(0).scrollLeft=xposs*scalex;

$("div.zoomDiv").get(0).scrollTop=yposs*scaley;

});

});

function mouseOutImage(){/*定义鼠标离开图片方法*/

$(self).attr("alt",noalt);

$(document.body).unbind("mousemove");/*移除在页面中鼠标指针事件*/

$("div.zoomMask").remove();/*移除所有的div.zoomMask*/

$("div.zoomDiv").remove();/*移除所有的div.zoomDiv*/

}

count=0;

if(settings.preload){

/*在boby元素的结尾（仍然在内部）插入指定内容*/

$('body').append("div style='display:none;' class='jqPreload"+count+"'/div");

$(this).each(function(){/*规定为每个匹配元素规定运行的函数*/

var imagetopreload=$(this).attr("rel");/*图片预加载*/

var content=jQuery('.jqPreload'+count+'').html();

jQuery('.jqPreload'+count+'').html(content+'img src=\"'+imagetopreload+'\"');

});

}

}

})(jQuery);

function MouseEvent(e){/*记录鼠标x，y坐标*/

this.x=e.pageX;/*鼠标指针位置*/

this.y=e.pageY;

}

淘宝图片放大镜的代码jQuery

网上很多啊 一搜便是 你若要可以发你 但效果需和你页面设计有关

基于jQuery的图片放大镜jQZoom ,页面中img标签的jqimg下有黄色波浪线警告

你是不是落什么了，用法是没错的。除了要导入jqzoom包还要写一个js才可以。

html

head

若干包，jquery.js啥的~

script type="text/javascript"

$(document).ready(function(){

$(".jqzoom").jqueryzoom({

xzoom: 300,

yzoom: 300,

offset: 10,

position: "right",

preload: 1

});

});

/script

/head

body

div class="jqzoom" style='margin-right:5px;float:left;'img src="images/0.jpg" alt="scarpa" jqimg（**此处有警告线提示**）="images/11.jpg" //div

/body

/html

这样就ok啦~

如何用JS/JQ实现，点击小图片显示大图片及详细信息的功能？

这个一般是用css来显示特定内容的。

譬如有张图片icon.png，里面有很多内容，便可以在css中这么用。

.sa

{width:20px;

height:20px;

overflow:hidden;

background:url(icon.png)

no-repeat

-20px

-30px;}

注解：

宽度和高度是控制显示范围的

overflow:hidden是确保不会有多余显示

background:url(icon.png)是使用图片作为背景显示，并且也只能作为背景显示才能达到这种做法的目的

no-repeat是不会重复，这个不是必须的，不过有会规范一些

-20px

-30px是图片的定位，显示时会将图片按这个坐标来定位

上面只是针对固定大小的显示内容来定义的，如果大小不固定，在background属性中有可能需要更改设置。不过重点是这种方式是这么使用的。

如果大小不固定，也可以这样定义，让背景自适应：

.sa

{width:auto;

height:20px;

overflow:hidden;

background:url(icon.png)

no-repeat

right

bottom;}

对于图片2(首页标签)的内容，也是这么使用的：

.a

{width:100px;

height:25px;

overflow:hidden;

background:url(2.png)

no-repeat

left

center;}

.a:hover

{background-position:right

center;}

这样一来，当鼠标移到元素时，背景定位发生变化，显示的内容便由左边的变成右边的了。

不过你应该对css这方面还不是很了解，目前可能还没有很便捷的方式对这些css进行快速定义，所以也只能告诉你是这么一回事，但未必能帮得上你。

求js或者jq代码：鼠标滚轮控制图片大小，并且控制放大次数。

htmlheadscript language="javascript" var count = 10; function resizeimg(oImage) { count = Counting(count); Resize(oImage, count); return false; } function Counting(newzoom) { if (event.wheelDelta = 120) newzoom++; else if (event.wheelDelta = -120) newzoom--; if (newzoom 2) newzoom = 2; ////只允许缩小到20% if (newzoom 50) newzoom = 50; ////只允许放大到500% return newzoom; } function Resize(oImage, newzoom) { oImage.style.zoom = newzoom + '0%'; count = newzoom; } /script/head body img src="images/sunny.png" onDblClick="return Resize(this,10);return false;" onmousewheel="return resizeimg(this)" / /body/html

jq图片点击放大代码的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于jquery点击图片放大、jq图片点击放大代码的信息别忘了在本站进行查找喔。