图片点击放大缩小

最新推荐文章于 2021-03-10 15:17:18 发布

守护大白菜

最新推荐文章于 2021-03-10 15:17:18 发布

阅读量558

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_34625397/article/details/67639008

版权

JavaScript 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>js实现大小图切换</title>
    <script src="./jquery-1.10.2.min.js"></script>
   <script src="./jquery-zclip-master/jquery.zclip.js"></script>
</head>
   <body>
       <img src="http://img2.cf8.com.cn/upload/forum/origin/2017/0328/2222079_14906685061869.jpg" width="50px" height="50px" class="image">
       <img src="http://img2.cf8.com.cn/upload/forum/origin/2017/0328/2222079_14906685079703.jpg" width="50px" height="50px" class="image">
   </body>
</html>
<script>
   var flag=true;
   $(".image").click(function(){
       if(flag){
           //图片为正常状态
           flag = false;//把状态设为放大状态
           $(this).attr('height','autho');
           $(this).attr('width','autho');
       }else{
           //图片为放大状态,设置图片缩略宽高为现在宽高
           flag = true;//把状态设为正常状态
           $(this).attr('height','50px');
           $(this).attr('width','50px');
       }
   });
</script>

下面是源代码:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>js实现大小图切换</title>
    <script src="./jquery-1.10.2.min.js"></script>  
	<script src="./jquery-zclip-master/jquery.zclip.js"></script> 
</head>
	<body>
		<img src="http://img2.cf8.com.cn/upload/forum/origin/2017/0328/2222079_14906685061869.jpg" width="50px" height="50px" class="image">
		<img src="http://img2.cf8.com.cn/upload/forum/origin/2017/0328/2222079_14906685079703.jpg" width="50px" height="50px" class="image">
	</body>
</html>
<script>  
	var flag=true;
	$(".image").click(function(){
		if(flag){
		   //图片为正常状态
		   flag = false;//把状态设为放大状态
		   $(this).attr('height','autho');
		   $(this).attr('width','autho');
		}else{
		   //图片为放大状态,设置图片缩略宽高为现在宽高
		   flag = true;//把状态设为正常状态
		   $(this).attr('height','50px');
		   $(this).attr('width','50px');
		}
	});
</script>