`
tw5566
  • 浏览: 458869 次
  • 性别: Icon_minigender_1
  • 来自: 长沙
社区版块
存档分类
最新评论

图片放大的js

js 
阅读更多
/**
*<img src="" zoomImg="1"/>
*<script language="javascript" type="text/javascript" src="/js/zoomImg.js"></script>
*/
(function zoomImg(){
	var d = document,e = d.getElementsByTagName("IMG");
	if(e){
		for(var i=0; i<e.length; i++){
			try{
				var is = e[i] && e[i].getAttribute && e[i].getAttribute("zoomImg") && e[i].getAttribute("zoomImg") == "1";
				if(is){
					var oImage = new Image();
						oImage.onload = function(){
							var w = this.width;
							var h = this.height;
							var oImg = this.linkObj;
							var _w = oImg.width;
							var _h = oImg.height;
							
							if(_w && _h){
								if(parseInt(w)>_w || parseInt(h)>_h){
									var r = _h/parseInt(h);
									if( r > (_w/parseInt(w)) ){
										r = _w/parseInt(w);
									}
									oImg.style.width = (parseInt(w)*r)+"px";
									oImg.style.height = (parseInt(h)*r)+"px";
								}else{
									oImg.style.width = w+"px";
									oImg.style.height = h+"px";
								}
							}
						}
						oImage.linkObj = e[i];
						oImage.src = e[i].src;
						
				}
			}
			catch(b){}
		}
	}
})();
2
1
分享到:
评论

相关推荐

    淘宝图片放大JS效果

    总的来说,淘宝图片放大JS效果是一个结合了HTML、CSS和JavaScript的综合应用,展示了前端开发中的交互设计和动态效果实现。通过理解和掌握这些技术,开发者可以创建更加丰富、生动的用户体验,尤其是在电商领域,这...

    js打开图片放大js

    二、图片放大JS实现 1. 获取图片元素:首先,我们需要获取到用户点击的图片元素,这可以通过`document.querySelector`或`document.getElementById`等方法实现。 ```javascript let imgElement = document....

    图片放大js源码

    "图片放大js源码"指的是使用JavaScript编写的代码,用于实现图片的放大功能。JavaScript是一种广泛应用于客户端Web开发的编程语言,它允许在浏览器端动态处理内容,包括处理图像。 在JavaScript中,图片放大可以...

    js特效(大全),图片切换JS 图片放大JS

    "js特效(大全),图片切换JS 图片放大JS"这个压缩包文件显然包含了用于创建动态图像展示的JavaScript代码示例,这对于我们理解JavaScript在网页中的应用至关重要。 首先,让我们深入了解一下“图片切换JS”。图片切换...

    hoverbox 图片放大JS

    "Hoverbox 图片放大JS" 是一种常见的网页交互效果,用于在用户将鼠标悬停在图片上时,自动放大图片以提供更清晰的查看体验。这个功能主要通过JavaScript实现,通常结合CSS进行样式控制,以实现平滑且响应式的图片...

    图片放大js前端控件

    总结起来,“图片放大js前端控件”是一种提升网页图片展示体验的重要工具,它通过JavaScript和CSS实现图片的放大镜和点击放大效果。Zoomify等库提供了便捷的实现方式,通过预处理、动态加载和组合显示小图,实现高效...

    精美的图片放大js

    本话题聚焦于“精美的图片放大js”,这是一项旨在提升用户体验的技术,通常用于电商网站,如淘宝商城,使得用户可以更清晰地查看商品细节。 在淘宝商城等大型电商平台上,图片放大功能是必不可少的,它允许用户通过...

    js实现单击图片放大

    创建一个名为`jquery-图片放大.js`的文件,并输入以下JavaScript代码: ```javascript $(document).ready(function(){ // 当图片被点击时 $("#myImg").click(function(){ var img = $(this); var modal = $("#...

    js 产品图片放大预览

    这篇博客《js 产品图片放大预览》探讨了如何使用原生JavaScript或者第三方库来实现这一功能。 首先,我们可以通过HTML5的`&lt;img&gt;`标签来展示图片,并通过`src`属性设置图片源。在用户点击图片时,我们可以监听`click...

    js实现点击图片放大照片

    总结来说,利用JavaScript实现点击图片放大功能主要涉及事件监听、DOM操作和CSS样式调整。而生成缩略图则可以通过服务器端处理、前端`canvas`绘制或CSS样式控制来实现。在实际开发中,根据项目需求和性能考虑,可以...

    js图片放大可以设置放大的倍数

    在JavaScript(JS)中,图片放大是一个常见的需求,特别是在网页开发中,可能需要对用户上传的图片或页面上的图片进行动态调整。标题“js图片放大可以设置放大的倍数”和描述“js图片放大;可以设置放大的倍数,非常...

    h5实现点击图片,放大当前图片并轮播图片

    在H5页面开发中,有时候我们需要实现一个...通过以上步骤,我们可以实现H5页面中点击图片放大并轮播同级图片的功能。在实际开发中,还可以根据项目需求添加更多细节,如图片预加载、懒加载等优化策略,以提高页面性能。

    html 几个常用的 点击图片放大的 js代码

    JavaScript库如jQuery或纯JavaScript插件如`lightbox2`也可以方便地实现图片放大功能。例如,引入`lightbox2`库后,只需为图片添加一个`data-lightbox`属性: ```html ``` 这样,当用户点击图片时,`lightbox2...

    JS图片局部放大效果

    在网页设计中,为了...总的来说,"JS图片局部放大效果"是前端开发中的一个实用技巧,它利用JavaScript和CSS实现了类似京东的图片放大体验,提升了用户对产品细节的查看效率,对于电商网站来说是一个不可或缺的功能。

    图片放大,js放大图片

    本文将深入探讨如何使用JavaScript实现图片放大功能,并提供相关技术点及其实现方法。 首先,我们需要理解图片放大的基本原理。通常,图片放大是通过改变图片元素的尺寸来实现的,这可以通过修改CSS样式中的`width`...

    JS放大镜,JavaScript图片放大代码.rar

    JS放大镜,JavaScript图片放大代码.rarJS放大镜,JavaScript图片放大代码.rarJS放大镜,JavaScript图片放大代码.rarJS放大镜,JavaScript图片放大代码.rarJS放大镜,JavaScript图片放大代码.rarJS放大镜,JavaScript图片...

    JS实现点击图片放大效果

    在图片放大效果中,我们通常会创建一个新的元素(如`&lt;div&gt;`)来显示放大的图片,并通过CSS调整其样式。例如,可以设置`position: absolute`使其脱离文档流,然后通过修改`left`, `top`, `width`, `height`等属性来...

    js+css点击弹出遮罩层图片放大展示demo

    综上所述,这个"js+css点击弹出遮罩层图片放大展示demo"通过结合JavaScript和CSS的力量,实现了优雅的图片放大查看功能,为用户带来了更直观、更具沉浸感的浏览体验。在实际项目中,可以根据需求进行调整和优化,以...

    js图片放大缩小效果 商品展示 一

    FancyZoom是一款轻量级的JavaScript插件,专为网页上的图片放大效果设计。它允许用户通过简单的鼠标点击或触控操作,将图片放大以查看细节,同时保持页面布局的整洁。FancyZoom的核心原理是通过创建一个新的弹出层...

    放大图片局部 JS+css

    总结一下,"放大图片局部 JS+css"是一个实用的网页交互技术,通过结合CSS的样式控制和JavaScript的动态交互,能为用户提供清晰的图片局部查看体验。这个案例不仅适用于相册展示,还可以应用于各种需要展现细节的产品...

Global site tag (gtag.js) - Google Analytics