blocks|key|4148390|text|在每个div中添加in，并在JS中进行编辑：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4148391|​|4148392|function+increase(id)+{
++++element+=+document.getElementById(id);
++++width+=+element.clientWidth;
++++element.style.width+=+String(width%2B10)%2B"px"
}|code-block|syntax|javascript|4148393|<div+class="container">
	<div+class="row">
		<img+id+=+"1"+onclick="increase('1')"+class="col-xs-3+paddingtop1"+src="img.jpg">
+		<img+id+=+"2"+onclick="increase('2')"class="col-xs-3+paddingtop1"+src="img3.jpeg">
++		<img+id+=+"3"+onclick="increase('3')"+class="col-xs-3+paddingtop1"+src="img4.jpg">
		<img+id+=+"4"+onclick="increase('4')"+class="col-xs-3+paddingtop1"+src="img5.jpg">
		<img+id+=+"5"+onclick="increase('5')"+class="col-xs-3+paddingtop"+src="img7.jpg">
		<img+id+=+"6"+onclick="increase('6')"+class="col-xs-3+paddingtop"+src="img8.jpg">
		<img+id+=+"7"+onclick="increase('7')"+class="col-xs-3+paddingtop"+src="img9.jpg">
+++		<img+id+=+"8"+onclick="increase('8')"+class="col-xs-3+paddingtop"+src="img10.jpg">
+++		<img+id+=+"9"+onclick="increase('9')"+class="col-xs-3+paddingtop"+src="img11.jpg">
+++		<img+id+=+"10"+onclick="increase('10')"+class="col-xs-3+paddingtop"+src="img2.jpg">
+++		<img+id+=+"11"+onclick="increase('11')"+class="col-xs-3+paddingtop"+src="img6.jpg">
+++		<img+id+=+"12"+onclick="increase('12')"+class="col-xs-3+paddingtop"+src="smilecup.jpg">
	</div>
</div>|4148394|4148395|而对于全屏：|4148396|4148397|function+increase(id)+{
++++element+=+document.getElementById(id);
++++element.style.width+=+window.innerWidth%2B"px"
}|4148398|<div+class="container">
	<div+class="row">
		<img+id+=+"1"+onclick="increase('1')"+class="col-xs-3+paddingtop1"+src="img.jpg">
+		<img+id+=+"2"+onclick="increase('2')"class="col-xs-3+paddingtop1"+src="img3.jpeg">
++		<img+id+=+"3"+onclick="increase('3')"+class="col-xs-3+paddingtop1"+src="img4.jpg">
		<img+id+=+"4"+onclick="increase('4')"+class="col-xs-3+paddingtop1"+src="img5.jpg">
		<img+id+=+"5"+onclick="increase('5')"+class="col-xs-3+paddingtop"+src="img7.jpg">
		<img+id+=+"6"+onclick="increase('6')"+class="col-xs-3+paddingtop"+src="img8.jpg">
		<img+id+=+"7"+onclick="increase('7')"+class="col-xs-3+paddingtop"+src="img9.jpg">
+++		<img+id+=+"8"+onclick="increase('8')"+class="col-xs-3+paddingtop"+src="img10.jpg">
+++		<img+id+=+"9"+onclick="increase('9')"+class="col-xs-3+paddingtop"+src="img11.jpg">
+++		<img+id+=+"10"+onclick="increase('10')"+class="col-xs-3+paddingtop"+src="img2.jpg">
+++		<img+id+=+"11"+onclick="increase('11')"+class="col-xs-3+paddingtop"+src="img6.jpg">
+++		<img+id+=+"12"+onclick="increase('12')"+class="col-xs-3+paddingtop"+src="smilecup.jpg">
	</div>
</div>|4148399|4148400|entityMap^0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|W|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|X|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|Z|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|10|8|@]|9|@]|A|$]]|$1|N|3|C|5|6|7|11|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|12|8|@]|9|@]|A|$G|H]]|$1|Q|3|R|5|F|7|13|8|@]|9|@]|A|$G|H]]|$1|S|3|C|5|6|7|14|8|@]|9|@]|A|$]]|$1|T|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|U|$]]

<p>Add IDs to each div and edit them in JS:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function increase(id) {
    element = document.getElementById(id);
    width = element.clientWidth;
    element.style.width = String(width+10)+"px"
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
	&lt;div class="row"&gt;
		&lt;img id = "1" onclick="increase('1')" class="col-xs-3 paddingtop1" src="img.jpg"&gt;
 		&lt;img id = "2" onclick="increase('2')"class="col-xs-3 paddingtop1" src="img3.jpeg"&gt;
  		&lt;img id = "3" onclick="increase('3')" class="col-xs-3 paddingtop1" src="img4.jpg"&gt;
		&lt;img id = "4" onclick="increase('4')" class="col-xs-3 paddingtop1" src="img5.jpg"&gt;
		&lt;img id = "5" onclick="increase('5')" class="col-xs-3 paddingtop" src="img7.jpg"&gt;
		&lt;img id = "6" onclick="increase('6')" class="col-xs-3 paddingtop" src="img8.jpg"&gt;
		&lt;img id = "7" onclick="increase('7')" class="col-xs-3 paddingtop" src="img9.jpg"&gt;
   		&lt;img id = "8" onclick="increase('8')" class="col-xs-3 paddingtop" src="img10.jpg"&gt;
   		&lt;img id = "9" onclick="increase('9')" class="col-xs-3 paddingtop" src="img11.jpg"&gt;
   		&lt;img id = "10" onclick="increase('10')" class="col-xs-3 paddingtop" src="img2.jpg"&gt;
   		&lt;img id = "11" onclick="increase('11')" class="col-xs-3 paddingtop" src="img6.jpg"&gt;
   		&lt;img id = "12" onclick="increase('12')" class="col-xs-3 paddingtop" src="smilecup.jpg"&gt;
	&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>And for full screen:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function increase(id) {
    element = document.getElementById(id);
    element.style.width = window.innerWidth+"px"
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
	&lt;div class="row"&gt;
		&lt;img id = "1" onclick="increase('1')" class="col-xs-3 paddingtop1" src="img.jpg"&gt;
 		&lt;img id = "2" onclick="increase('2')"class="col-xs-3 paddingtop1" src="img3.jpeg"&gt;
  		&lt;img id = "3" onclick="increase('3')" class="col-xs-3 paddingtop1" src="img4.jpg"&gt;
		&lt;img id = "4" onclick="increase('4')" class="col-xs-3 paddingtop1" src="img5.jpg"&gt;
		&lt;img id = "5" onclick="increase('5')" class="col-xs-3 paddingtop" src="img7.jpg"&gt;
		&lt;img id = "6" onclick="increase('6')" class="col-xs-3 paddingtop" src="img8.jpg"&gt;
		&lt;img id = "7" onclick="increase('7')" class="col-xs-3 paddingtop" src="img9.jpg"&gt;
   		&lt;img id = "8" onclick="increase('8')" class="col-xs-3 paddingtop" src="img10.jpg"&gt;
   		&lt;img id = "9" onclick="increase('9')" class="col-xs-3 paddingtop" src="img11.jpg"&gt;
   		&lt;img id = "10" onclick="increase('10')" class="col-xs-3 paddingtop" src="img2.jpg"&gt;
   		&lt;img id = "11" onclick="increase('11')" class="col-xs-3 paddingtop" src="img6.jpg"&gt;
   		&lt;img id = "12" onclick="increase('12')" class="col-xs-3 paddingtop" src="smilecup.jpg"&gt;
	&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


<p>I've got an image gallery and I want to make it so that when you click on an individual picture it gets bigger, fullscreen etc.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
	&lt;div class="row"&gt;
		&lt;img class="col-xs-3 paddingtop1" src="img.jpg"&gt;
 		&lt;img class="col-xs-3 paddingtop1" src="img3.jpeg"&gt;
  		&lt;img class="col-xs-3 paddingtop1" src="img4.jpg"&gt;
		&lt;img class="col-xs-3 paddingtop1" src="img5.jpg"&gt;
		&lt;img class="col-xs-3 paddingtop" src="img7.jpg"&gt;
		&lt;img class="col-xs-3 paddingtop" src="img8.jpg"&gt;
		&lt;img class="col-xs-3 paddingtop" src="img9.jpg"&gt;
   		&lt;img class="col-xs-3 paddingtop" src="img10.jpg"&gt;
   		&lt;img class="col-xs-3 paddingtop" src="img11.jpg"&gt;
   		&lt;img class="col-xs-3 paddingtop" src="img2.jpg"&gt;
   		&lt;img class="col-xs-3 paddingtop" src="img6.jpg"&gt;
   		&lt;img class="col-xs-3 paddingtop" src="smilecup.jpg"&gt;
	&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


How to create an image that get bigger as you click it

我有一个图片库，我想让它当你点击一个单独的图片时，它会变得更大，全屏等等。​<div class="container"><div class="row"><img class="col-xs-3 paddingtop1" src="img.jpg"> <img class="col-xs-3 paddingtop1"...

问如何创建单击时变大的图像
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何创建单击时变大的图像EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何创建单击时变大的图像
EN