Today, the src attribute of the alphaimageloader filter is the protagonist. It uses an absolute or relative url address to specify the background image. If this parameter is omitted, the filter will have no effect.
< ;/title> <br><style type="text/css tutorial"> <br>#picshow <br>{ <br>filter:progid:dximagetransform.microsoft.alphaimageloader(sizingmethod=scale); <br> width:88px; <br>height:125px; <br>} <br></style> <br><script type="text/webpage special effects" language="javascript"> <br><! -- <BR>function upimg(imgfile) <BR>{ <BR>var picshow = document.getelementbyid("picshow"); <BR>picshow.filters.item("dximagetransform.microsoft.alphaimageloader").src = imgfile .value; <BR>picshow.style.width = "88px"; <BR>picshow.style.height = "125px"; <BR>} <BR>--> <br></script> <br></head> <br><body> <br><div id="picshow"></div> <br><p>Select picture:<input type="file" size ="20" onchange="upimg(this);" /></p> <br></body> <br></html> <br>
</div> <br>Example 2. At the same time Compatible with ie6, ie7, ie8 and firefox. <br><div class="codetitle">
<span><a style="CURSOR: pointer" data="40251" class="copybut" id="copybut40251" onclick="doCopy('code40251')"><u>Copy code</u></a></span> The code is as follows:</div>
<div class="codebody" id="code40251"> <br><!doctype html public "-//w3c/ /dtd xhtml 1.0 transitional//en" <BR>"http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <br><html xmlns="http:// www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <br><head> <br><meta http-equiv="content-type" content="text /html; charset=utf-8" /> <br><script> <br>var picpath; <br>var image; <br>// preview picture <br>function preview() <br>{ <br>document.getelementbyid('preview').style.display = 'none'; <br>// The following code is used to obtain the image size so that the image can be displayed normally under IE <br>document.getelementbyid('box' ).innerhtml <br>= "<img width='" image.width "' height='" image.height "' id='apic' src='" picpath "'>"; <br>} <br>// show view button <br>function buttonshow() <br>{ <br>/* <br>This is used to solve the preview failure caused by image loading delay. <br>A brief explanation, when the image object When the src attribute changes, JavaScript will reload the image content to the image. <br>This usually takes some time. If you want to display the image before the loading is completed, it will cause an error, so we <br>pass the width and width of the image. height to determine whether the image has been loaded successfully, and the preview button will be displayed only after the loading is completed. <br>I still have a confusion here, the preview effect occasionally fails under IE7. <br>*/ <br>if ( image.width == 0 || image.height == 0 ) { <br>settimeout(buttonshow, 1000); <br>} else { <br>document.getelementbyid('preview').style.display = 'block'; <br>} <br>} <br>function loadimage(ele) { <br>picpath = getpath(ele); <br>image = new image(); <br>image.src = picpath; <br>settimeout( buttonshow, 1000); <br>} <br>function getpath(obj) <br>{ <br>if(obj) <br>{ <br>//ie <br>if (window.navigator.useragent.indexof ("msie")>=1) <br>{ <br>obj.select(); <br>// Get the local path of the image under ie <br>return document.selection.createrange().text; <br>} <br>//firefox <br>else if(window.navigator.useragent.indexof("firefox")>=1) <br>{ <br>if(obj.files) <br>{ <br>// What is obtained under firefox is the image data <br>return obj.files.item(0).getasdataurl(); <br>} <br>return obj.value; <br>} <br>return obj .value; <br>} <br>} <br></script> <br></head> <br><body> <br><input type="file" name="pic" id="pic" onchange='loadimage(this)' /> <br><input id='preview' type='button' value='preview' style='display:none;' onclick='preview( );'> <br><div id='box'></div> <br></body> <br></html> <br>
</div>
</div>
</div>
<div class="wzconShengming_sp">
<div class="bzsmdiv_sp">Statement of this Website</div>
<div>The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn</div>
</div>
</div>
<ins class="adsbygoogle"
style="display:block"
data-ad-format="autorelaxed"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="2507867629"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<div class="AI_ToolDetails_main4sR">
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="3653428331"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!-- <div class="phpgenera_Details_mainR4">
<div class="phpmain1_4R_readrank">
<div class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hotarticle2.png" alt="" />
<h2>Hot Article</h2>
</div>
<div class="phpgenera_Details_mainR4_bottom">
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/faq/1796785841.html" title="Assassin's Creed Shadows: Seashell Riddle Solution" class="phpgenera_Details_mainR4_bottom_title">Assassin's Creed Shadows: Seashell Riddle Solution</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>1 months ago</span>
<span>By DDD</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/faq/1796789525.html" title="What's New in Windows 11 KB5054979 & How to Fix Update Issues" class="phpgenera_Details_mainR4_bottom_title">What's New in Windows 11 KB5054979 & How to Fix Update Issues</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>3 weeks ago</span>
<span>By DDD</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/faq/1796785857.html" title="Where to find the Crane Control Keycard in Atomfall" class="phpgenera_Details_mainR4_bottom_title">Where to find the Crane Control Keycard in Atomfall</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>1 months ago</span>
<span>By DDD</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/faq/1796793874.html" title="How to fix KB5055523 fails to install in Windows 11?" class="phpgenera_Details_mainR4_bottom_title">How to fix KB5055523 fails to install in Windows 11?</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>2 weeks ago</span>
<span>By DDD</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/faq/1796787760.html" title="InZoi: How To Apply To School And University" class="phpgenera_Details_mainR4_bottom_title">InZoi: How To Apply To School And University</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>3 weeks ago</span>
<span>By DDD</span>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR3_more">
<a href="https://www.php.cn/article.html">Show More</a>
</div>
</div>
</div> -->
<div class="phpgenera_Details_mainR3">
<div class="phpmain1_4R_readrank">
<div class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hottools2.png" alt="" />
<h2>Hot AI Tools</h2>
</div>
<div class="phpgenera_Details_mainR3_bottom">
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411540686492.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undresser.AI Undress" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_title">
<h3>Undresser.AI Undress</h3>
</a>
<p>AI-powered app for creating realistic nude photos</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411552797167.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Clothes Remover" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_title">
<h3>AI Clothes Remover</h3>
</a>
<p>Online AI tool for removing clothes from photos.</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173410641626608.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undress AI Tool" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_title">
<h3>Undress AI Tool</h3>
</a>
<p>Undress images for free</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411529149311.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Clothoff.io" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_title">
<h3>Clothoff.io</h3>
</a>
<p>AI clothes remover</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173414504068133.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Video Face Swap" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_title">
<h3>Video Face Swap</h3>
</a>
<p>Swap faces in any video effortlessly with our completely free AI face swap tool!</p>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR3_more">
<a href="https://www.php.cn/ai">Show More</a>
</div>
</div>
</div>
<script src="https://sw.php.cn/hezuo/cac1399ab368127f9b113b14eb3316d0.js" type="text/javascript"></script>
<div class="phpgenera_Details_mainR4">
<div class="phpmain1_4R_readrank">
<div class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hotarticle2.png" alt="" />
<h2>Hot Article</h2>
</div>
<div class="phpgenera_Details_mainR4_bottom">
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/faq/1796785841.html" title="Assassin's Creed Shadows: Seashell Riddle Solution" class="phpgenera_Details_mainR4_bottom_title">Assassin's Creed Shadows: Seashell Riddle Solution</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>1 months ago</span>
<span>By DDD</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/faq/1796789525.html" title="What's New in Windows 11 KB5054979 & How to Fix Update Issues" class="phpgenera_Details_mainR4_bottom_title">What's New in Windows 11 KB5054979 & How to Fix Update Issues</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>3 weeks ago</span>
<span>By DDD</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/faq/1796785857.html" title="Where to find the Crane Control Keycard in Atomfall" class="phpgenera_Details_mainR4_bottom_title">Where to find the Crane Control Keycard in Atomfall</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>1 months ago</span>
<span>By DDD</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/faq/1796793874.html" title="How to fix KB5055523 fails to install in Windows 11?" class="phpgenera_Details_mainR4_bottom_title">How to fix KB5055523 fails to install in Windows 11?</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>2 weeks ago</span>
<span>By DDD</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/faq/1796787760.html" title="InZoi: How To Apply To School And University" class="phpgenera_Details_mainR4_bottom_title">InZoi: How To Apply To School And University</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>3 weeks ago</span>
<span>By DDD</span>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR3_more">
<a href="https://www.php.cn/article.html">Show More</a>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR3">
<div class="phpmain1_4R_readrank">
<div class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hottools2.png" alt="" />
<h2>Hot Tools</h2>
</div>
<div class="phpgenera_Details_mainR3_bottom">
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/toolset/development-tools/92" title="Notepad++7.3.1" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab96f0f39f7357.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Notepad++7.3.1" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/toolset/development-tools/92" title="Notepad++7.3.1" class="phpmain_tab2_mids_title">
<h3>Notepad++7.3.1</h3>
</a>
<p>Easy-to-use and free code editor</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/toolset/development-tools/93" title="SublimeText3 Chinese version" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97a3baad9677.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 Chinese version" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/toolset/development-tools/93" title="SublimeText3 Chinese version" class="phpmain_tab2_mids_title">
<h3>SublimeText3 Chinese version</h3>
</a>
<p>Chinese version, very easy to use</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/toolset/development-tools/121" title="Zend Studio 13.0.1" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97ecd1ab2670.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Zend Studio 13.0.1" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/toolset/development-tools/121" title="Zend Studio 13.0.1" class="phpmain_tab2_mids_title">
<h3>Zend Studio 13.0.1</h3>
</a>
<p>Powerful PHP integrated development environment</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d0e0fc74683535.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Dreamweaver CS6" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_title">
<h3>Dreamweaver CS6</h3>
</a>
<p>Visual web development tools</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/toolset/development-tools/500" title="SublimeText3 Mac version" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d34035e2757995.png?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 Mac version" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/toolset/development-tools/500" title="SublimeText3 Mac version" class="phpmain_tab2_mids_title">
<h3>SublimeText3 Mac version</h3>
</a>
<p>God-level code editing software (SublimeText3)</p>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR3_more">
<a href="https://www.php.cn/ai">Show More</a>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR4">
<div class="phpmain1_4R_readrank">
<div class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hotarticle2.png" alt="" />
<h2>Hot Topics</h2>
</div>
<div class="phpgenera_Details_mainR4_bottom">
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/faq/gmailyxdlrkzn" title="Where is the login entrance for gmail email?" class="phpgenera_Details_mainR4_bottom_title">Where is the login entrance for gmail email?</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>7755</span>
</div>
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>15</span>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/faq/java-tutorial" title="Java Tutorial" class="phpgenera_Details_mainR4_bottom_title">Java Tutorial</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1643</span>
</div>
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>14</span>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/faq/cakephp-tutor" title="CakePHP Tutorial" class="phpgenera_Details_mainR4_bottom_title">CakePHP Tutorial</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1399</span>
</div>
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>52</span>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/faq/laravel-tutori" title="Laravel Tutorial" class="phpgenera_Details_mainR4_bottom_title">Laravel Tutorial</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1293</span>
</div>
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>25</span>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/faq/php-tutorial" title="PHP Tutorial" class="phpgenera_Details_mainR4_bottom_title">PHP Tutorial</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1234</span>
</div>
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>29</span>
</div>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR3_more">
<a href="https://www.php.cn/faq/zt">Show More</a>
</div>
</div>
</div>
</div>
</div>
<div class="Article_Details_main2">
<div class="phpgenera_Details_mainL4">
<div class="phpmain1_2_top">
<a href="javascript:void(0);" class="phpmain1_2_top_title">Related knowledge<img
src="/static/imghw/index2_title2.png" alt="" /></a>
</div>
<div class="phpgenera_Details_mainL4_info">
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/faq/593046.html" title="How to implement image scrolling and thumbnail preview in Vue?" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/887/227/169233788794822.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="How to implement image scrolling and thumbnail preview in Vue?" />
</a>
<a href="https://www.php.cn/faq/593046.html" title="How to implement image scrolling and thumbnail preview in Vue?" class="phphistorical_Version2_mids_title">How to implement image scrolling and thumbnail preview in Vue?</a>
<span class="Articlelist_txts_time">Aug 18, 2023 pm 01:51 PM</span>
<p class="Articlelist_txts_p">How to implement image scrolling and thumbnail preview in Vue? In Vue projects, we often need to display a large number of pictures, and hope that users can browse and preview these pictures easily. This article will introduce how to use Vue components to implement image scrolling and thumbnail preview functions. First, we need to install and introduce the appropriate Vue library to facilitate image scrolling and thumbnail preview. In this example, we will use vue-awesome-swiper and vue-image-preview two libraries to implement</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/faq/681484.html" title="How to post pictures on Douyin comments" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/887/227/170831943697842.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="How to post pictures on Douyin comments" />
</a>
<a href="https://www.php.cn/faq/681484.html" title="How to post pictures on Douyin comments" class="phphistorical_Version2_mids_title">How to post pictures on Douyin comments</a>
<span class="Articlelist_txts_time">Feb 19, 2024 pm 01:10 PM</span>
<p class="Articlelist_txts_p">As one of the most popular short video sharing platforms in the world, Douyin has attracted hundreds of millions of users to join it. When looking at other people's wonderful works, we are often moved by some dynamic, interesting or meaningful moments in them. At this time, we can not only express our opinions and thoughts through text comments, but also express our emotions more vividly through picture comments. So, how to post picture comments on TikTok? First, open the Douyin APP and enter the video you are interested in. Next, we need to determine the operating system of the mobile phone according to the different</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/faq/571497.html" title="Early Access to Future Features Safari Technology Preview 173 Released" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/887/227/168827625952237.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Early Access to Future Features Safari Technology Preview 173 Released" />
</a>
<a href="https://www.php.cn/faq/571497.html" title="Early Access to Future Features Safari Technology Preview 173 Released" class="phphistorical_Version2_mids_title">Early Access to Future Features Safari Technology Preview 173 Released</a>
<span class="Articlelist_txts_time">Jul 02, 2023 pm 01:37 PM</span>
<p class="Articlelist_txts_p">Apple today released Safari Technology Preview version 173, which covers some features that may be launched in Safari 17. This version is suitable for macOS Sonoma beta version and macOS Ventura system. Interested users can download it from the official website. Safari Technology Preview version 173 adds a feature flag block in settings, replacing the experimental feature in the original development menu. This section allows developers to quickly search for specific features and marks the status as "stable", "available for testing", "preview" or "developer" in different ways. The redesigned development menu makes it easier for creators to find key tools for building web pages, web apps, web content in other apps,</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/faq/590398.html" title="How to implement form image upload and preview in Vue form processing" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/887/227/169163983471805.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="How to implement form image upload and preview in Vue form processing" />
</a>
<a href="https://www.php.cn/faq/590398.html" title="How to implement form image upload and preview in Vue form processing" class="phphistorical_Version2_mids_title">How to implement form image upload and preview in Vue form processing</a>
<span class="Articlelist_txts_time">Aug 10, 2023 am 11:57 AM</span>
<p class="Articlelist_txts_p">How to implement form image upload and preview in Vue form processing Introduction: In modern web applications, form processing is a very common requirement. One common requirement is to allow users to upload images and preview them in a form. As a front-end framework, Vue.js provides us with a wealth of tools and methods to achieve this requirement. In this article, I will show you how to implement image upload and preview functions in Vue form processing. Step 1: Define Vue components First, we need to define a Vue group</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/faq/593822.html" title="How to upload and preview images through Vue?" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/465/014/169245155887463.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="How to upload and preview images through Vue?" />
</a>
<a href="https://www.php.cn/faq/593822.html" title="How to upload and preview images through Vue?" class="phphistorical_Version2_mids_title">How to upload and preview images through Vue?</a>
<span class="Articlelist_txts_time">Aug 19, 2023 pm 09:25 PM</span>
<p class="Articlelist_txts_p">How to upload and preview images through Vue? Overview: In modern web applications, image uploading and previewing are a common requirement. Vue, as a popular JavaScript framework, provides a convenient way to achieve this function. This article will introduce how to use Vue to upload and preview images, including the design of the front-end interface and the processing of the back-end interface. Front-end interface design: First, we need to design a front-end interface to select and upload images. In Vue, we can use <i</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/faq/621391.html" title="How to implement image upload and preview in uniapp" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/887/227/169786011147906.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="How to implement image upload and preview in uniapp" />
</a>
<a href="https://www.php.cn/faq/621391.html" title="How to implement image upload and preview in uniapp" class="phphistorical_Version2_mids_title">How to implement image upload and preview in uniapp</a>
<span class="Articlelist_txts_time">Oct 21, 2023 am 11:48 AM</span>
<p class="Articlelist_txts_p">How to implement image upload and preview in uniapp In modern social network and e-commerce applications, image upload and preview functions are very common requirements. This article will introduce how to implement the image upload and preview functions in uniapp, and give specific code examples. 1. Implementation of the image upload function In the uniapp project, you first need to add an image upload component to the page, as shown below: <template><view><im</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/faq/501570.html" title="What should I do if everything cannot be displayed when previewing and printing?" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/202303/01/2023030114401593089.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="What should I do if everything cannot be displayed when previewing and printing?" />
</a>
<a href="https://www.php.cn/faq/501570.html" title="What should I do if everything cannot be displayed when previewing and printing?" class="phphistorical_Version2_mids_title">What should I do if everything cannot be displayed when previewing and printing?</a>
<span class="Articlelist_txts_time">Mar 01, 2023 pm 02:45 PM</span>
<p class="Articlelist_txts_p">Solution to the problem that everything cannot be displayed when previewing and printing: 1. Open the WPS Office form and click "Print Preview" in the upper left corner of the workbar area; 2. Enter the print preview page and click "Scale Ratio"; 3. In the drop-down list that appears Select the applicable ratio from "Landscape" or "Portrait".</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/faq/650664.html" title="Solve the error reporting problem of win11 preview program" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/887/227/170522478994022.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Solve the error reporting problem of win11 preview program" />
</a>
<a href="https://www.php.cn/faq/650664.html" title="Solve the error reporting problem of win11 preview program" class="phphistorical_Version2_mids_title">Solve the error reporting problem of win11 preview program</a>
<span class="Articlelist_txts_time">Jan 14, 2024 pm 05:33 PM</span>
<p class="Articlelist_txts_p">We can update and upgrade the windows 11 system in the preview program of the windows system, but many friends have encountered the error code 0x0 when joining the preview program. This is because our system is missing part of the registry. You can re-export it. To solve it, let’s take a look at it together. How to deal with errors in the win11 preview program. Method 1: 1. If our system is not the latest version of the system, we can try to update it in the system update. Method 2: 1. The error may also be a problem with the registry. We can try to use the registry repair tool to repair it. Method three: 1. Download the win11 system directly from this site and install it. 2. After downloading, just install it according to the tutorial provided on this site.</p>
</div>
</div>
<a href="https://www.php.cn/web-designer.html" class="phpgenera_Details_mainL4_botton">
<span>See all articles</span>
<img src="/static/imghw/down_right.png" alt="" />
</a>
</div>
</div>
</div>
</main>
<footer>
<div class="footer">
<div class="footertop">
<img src="/static/imghw/logo.png" alt="">
<p>Public welfare online PHP training，Help PHP learners grow quickly！</p>
</div>
<div class="footermid">
<a href="https://www.php.cn/about/us.html">About us</a>
<a href="https://www.php.cn/about/disclaimer.html">Disclaimer</a>
<a href="https://www.php.cn/update/article_0_1.html">Sitemap</a>
</div>
<div class="footerbottom">
<p>
© php.cn All rights reserved
</p>
</div>
</div>
</footer>
<input type="hidden" id="verifycode" value="/captcha.html">
<script>layui.use(['element', 'carousel'], function () {var element = layui.element;$ = layui.jquery;var carousel = layui.carousel;carousel.render({elem: '#test1', width: '100%', height: '330px', arrow: 'always'});$.getScript('/static/js/jquery.lazyload.min.js', function () {$("img").lazyload({placeholder: "/static/images/load.jpg", effect: "fadeIn", threshold: 200, skip_invisible: false});});});</script>
<script src="/static/js/common_new.js"></script>
<script type="text/javascript" src="/static/js/jquery.cookie.js?1745742419"></script>
<script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script>
<link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' type='text/css' media='all' />
<script type='text/javascript' src='/static/js/viewer.min.js?1'></script>
<script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script>
<script type="text/javascript" src="/static/js/global.min.js?5.5.53"></script>
<script>
var _paq = window._paq = window._paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function () {
var u = "https://tongji.php.cn/";
_paq.push(['setTrackerUrl', u + 'matomo.php']);
_paq.push(['setSiteId', '9']);
var d = document,
g = d.createElement('script'),
s = d.getElementsByTagName('script')[0];
g.async = true;
g.src = u + 'matomo.js';
s.parentNode.insertBefore(g, s);
})();
</script>
<script>
// top
layui.use(function () {
var util = layui.util;
util.fixbar({
on: {
mouseenter: function (type) {
layer.tips(type, this, {
tips: 4,
fixed: true,
});
},
mouseleave: function (type) {
layer.closeAll("tips");
},
},
});
});
document.addEventListener("DOMContentLoaded", (event) => {
// 定义一个函数来处理滚动链接的点击事件
function setupScrollLink(scrollLinkId, targetElementId) {
const scrollLink = document.getElementById(scrollLinkId);
const targetElement = document.getElementById(targetElementId);
if (scrollLink && targetElement) {
scrollLink.addEventListener("click", (e) => {
e.preventDefault(); // 阻止默认链接行为
targetElement.scrollIntoView({
behavior: "smooth"
}); // 平滑滚动到目标元素
});
} else {
console.warn(
`Either scroll link with ID '${scrollLinkId}' or target element with ID '${targetElementId}' not found.`
);
}
}
// 使用该函数设置多个滚动链接
setupScrollLink("Article_Details_main1L2s_1", "article_main_title1");
setupScrollLink("Article_Details_main1L2s_2", "article_main_title2");
setupScrollLink("Article_Details_main1L2s_3", "article_main_title3");
setupScrollLink("Article_Details_main1L2s_4", "article_main_title4");
setupScrollLink("Article_Details_main1L2s_5", "article_main_title5");
setupScrollLink("Article_Details_main1L2s_6", "article_main_title6");
// 可以继续添加更多的滚动链接设置
});
window.addEventListener("scroll", function () {
var fixedElement = document.getElementById("Article_Details_main1Lmain");
var scrollTop = window.scrollY || document.documentElement.scrollTop; // 兼容不同浏览器
var clientHeight = window.innerHeight || document.documentElement.clientHeight; // 视口高度
var scrollHeight = document.documentElement.scrollHeight; // 页面总高度
// 计算距离底部的距离
var distanceToBottom = scrollHeight - scrollTop - clientHeight;
// 当距离底部小于或等于300px时，取消固定定位
if (distanceToBottom <= 980) {
fixedElement.classList.remove("Article_Details_main1Lmain");
fixedElement.classList.add("Article_Details_main1Lmain_relative");
} else {
// 否则，保持固定定位
fixedElement.classList.remove("Article_Details_main1Lmain_relative");
fixedElement.classList.add("Article_Details_main1Lmain");
}
});
</script>
<script>
document.addEventListener('DOMContentLoaded', function() {
const mainNav = document.querySelector('.Article_Details_main1Lmain');
const header = document.querySelector('header');
if (mainNav) {
window.addEventListener('scroll', function() {
const scrollPosition = window.scrollY;
if (scrollPosition > 84) {
mainNav.classList.add('fixed');
} else {
mainNav.classList.remove('fixed');
}
});
}
});
</script>
</body>
</html> 
Web Front-end
