js实现单击图片放大图片的方法

JavaScript016

js实现单击图片放大图片的方法,第1张

这篇文章主要介绍了js实现单击图片放大图片的方法,涉及javascript操作图片的技巧与onclick事件的用法,需要的朋友可以参考下

本文实例讲述了js实现单击图片放大图片的方法。分享给大家供大家参考。具体实现方法如下：

代码如下:

<html>

<title>单击图片即可放大图片</title>

<body>

点击图片预览效果。<br>

<img

src="/images/m01.jpg"

onclick="this.width+=50this.height+=50"

onclick="javascript:window.open(this.src)"

style="cursor:pointer"/>

<img

src="/images/m02.jpg"

onclick="this.style.zoom='2'"

onclick="javascript:window.open(this.src)"

style="cursor:pointer"/>

</body>

</html>

希望本文所述对大家的javascript程序设计有所帮助。

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<style type="text/css">

#divid {

position:fixed

z-index:2000

left:50%

top:50%

transform:translate(-50%,-50%)

}

#imgid {

width:1000px

height:500px

}

</style>

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.js"></script>

<script >

function myFunction(){

var src=$("#imgip").attr("src")

$("#imgid").attr("src",src)

$("#divid").css("display","block")

}

function myFunc(){

$("#divid").css("display","none")

}

</script>

</head>

<body>

<img id="imgip" onclick="myFunction()" src=""/>

<div style="display:none" id="divid" >

<img onclick="myFunc()" src="" id="imgid" />

</div>

</body>

</html>

你可以使用layer.js，layer.photos({...............})

这个是网址，有最新版本，你可以使用最新版本的

效果大概如下