js實(shí)現(xiàn)點(diǎn)擊上傳圖片并設(shè)為模糊背景
更新時(shí)間:2020年08月02日 14:55:37 作者:Mr.王征
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)點(diǎn)擊上傳圖片并設(shè)為模糊背景,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了js實(shí)現(xiàn)點(diǎn)擊上傳圖片,同時(shí)設(shè)該圖片為模糊背景,供大家參考,具體內(nèi)容如下
效果展示:
源碼展示:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>js實(shí)現(xiàn)點(diǎn)擊上傳圖片,同時(shí)設(shè)該圖片為模糊背景</title> <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> <style> input { display:block; margin:0 auto; opacity:0; position:absolute; width:100%; height:100%; top:0; z-index:10; cursor:pointer; } p { font-size:14px; line-height:100px; position:absolute; top:0; left:8px; z-index:5; margin:0; } form { margin:0; } .box { width:100px; height:100px; border:1px solid #f60; border-radius:50px; margin:0 auto; overflow:hidden; position:relative; text-align:center; } .big-box { width:100%; height:250px; position:relative; margin-top:10px; overflow:hidden; padding-top:150px; border:1px solid #000000; } .bg-img { position:absolute; width:100%; -webkit-filter:blur(50px); z-index:-1; top:0; } img { width:100%; } </style> </head> <body> <div class="big-box"> <img id="imgPre" src="" class="bg-img"> <form action=""> <div class="box"> <img id="imgPre_1" src=""> <p>點(diǎn)擊上傳圖片</p> <input type="file" name="imgOne" id="imgOne" onchange="preImg(this.id,'imgPre');"> </div> </form> </div> <script> /** * 從 file 域獲取 本地圖片 url */ function getFileUrl(sourceId) { var url; if (navigator.userAgent.indexOf("MSIE") >= 1) { // IE url = document.getElementById(sourceId).value; } else if (navigator.userAgent.indexOf("Firefox") > 0) { // Firefox url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0)); } else if (navigator.userAgent.indexOf("Chrome") > 0) { // Chrome url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0)); } return url; }; /** * 將本地圖片 顯示到瀏覽器上 */ function preImg(sourceId, targetId) { var url = getFileUrl(sourceId); var imgPre = document.getElementById(targetId); imgPre.src = url; imgPre_1.src = url; }; $(function() { $('input').click(function() { $('p').hide(); }); }); </script> <pre style="color:red"> 感: 最近貢獻(xiàn)一下我在教學(xué)中的小案例可以能給你一些幫助 希望繼續(xù)關(guān)注我的博客 --王 </pre> </body> </html>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
您可能感興趣的文章:
- JS實(shí)現(xiàn)上傳圖片的三種方法并實(shí)現(xiàn)預(yù)覽圖片功能
- js實(shí)現(xiàn)圖片上傳并預(yù)覽功能
- Servlet+Jsp實(shí)現(xiàn)圖片或文件的上傳功能具體思路及代碼
- js實(shí)現(xiàn)上傳圖片預(yù)覽的方法
- 上傳圖片預(yù)覽JS腳本 Input file圖片預(yù)覽的實(shí)現(xiàn)示例
- js實(shí)現(xiàn)圖片上傳并正常顯示
- JS中使用FormData上傳文件、圖片的方法
- 微信JSSDK上傳圖片
- js實(shí)現(xiàn)上傳圖片之上傳前預(yù)覽圖片
- Javascript圖片上傳前的本地預(yù)覽實(shí)例
相關(guān)文章
詳解CommonJS和ES6模塊循環(huán)加載處理的區(qū)別
這篇文章主要介紹了詳解CommonJS和ES6模塊循環(huán)加載處理的區(qū)別,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-12-12JavaScript中的this陷阱的最全收集并整理(沒有之一)
這篇文章主要介紹了JavaScript中的this陷阱的最全收集,需要的朋友可以參考下2017-02-02javascript實(shí)現(xiàn)輸入框內(nèi)容提示及隱藏功能
這篇文章主要介紹了javascript實(shí)現(xiàn)輸入框內(nèi)容提示及隱藏功能,實(shí)現(xiàn)方法真的超簡(jiǎn)單,本文通過示例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2021-09-09使用javascript做時(shí)間倒數(shù)讀秒功能的實(shí)例
今天小編就為大家分享一篇關(guān)于使用javascript做時(shí)間倒數(shù)讀秒功能的實(shí)例,小編覺得內(nèi)容挺不錯(cuò)的,現(xiàn)在分享給大家,具有很好的參考價(jià)值,需要的朋友一起跟隨小編來看看吧2019-01-01