js如何显示缩略图和点击放大查看？？？

JavaScript017

js如何显示缩略图和点击放大查看？？？,第1张

所谓的缩略图其实就是设置了一个长宽小点的<img>去存放这张图片，在<img>的点击事件中再去更改它的长宽达到放大效果，当然这样可能会打乱页面布局，所以你可以做成像QQ空间那样，点击图片后利用遮罩层显示放大的图片。

这是我做的：

<html>

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=UTF-8">

<script type="text/javascript" src=js/jquery.js></script>

<script type="text/javascript" src=js/jquery.blockUI.js></script>

<script>

function showPropWindow() {

$.blockUI({

message : '<div><img src="1.png" /></div>',

css : {

cursor : 'auto'

}

})

}

</script>

<title>图片展示</title>

</head>

<body>

<div style="cursor: pointer">

<img onclick="showPropWindow()" src="1.png" style="width:100pxheight:100px"/>

</div>

</body>

</html>

你试试，记得把jquery.js和jquery.blockUI.js这两个js导入，如果你那里没有这两个js，去网上下一个