小猿圈Linux之通過shell腳本循環進入目錄執行命令的方法
對於學習Linux的同學來說，最難過的就是linux的命令吧，不僅多的數不清楚還有些記得特別混亂，下面小猿圈Linux講師總結了通過shell腳本循環進入...
今天給大家帶來的純js寫的一個圖片放大的例子,對於鍛鍊思路有很大幫助的,用到的定時器,if嵌套
不多說了 下面貼代碼
1、
html佈局很簡單
<div class="one">
<div class="onte">
<img src="6-160ZQ2403c95.jpg" id="img">
</div>
<input type="button" id="bt1" value="放大">
</div>
佈局沒什麼好說的,一看就明白
2、
樣式就一行
<style>
.one{margin: 150px auto;width: 900px;}
</style>
有需要的可以自己弄的漂亮些
下面開始寫腳本
var one=document.getElementById('bt1')
找到按鈕id
one.onclick= function () {
funim();
};
開始寫funim方法
var img=document.getElementById('img');獲取下圖片的id
這裡需要開個定時器
var timer=setInterval(function () {
img.width = img.width * 1.05//每次放大105%
img.height = img.height * 1.05
},50)
這樣會發現 圖片會無限放大 所以要給一個範圍
var imgWidth=img.width*1.3;//最大到圖片的130%就停止
var imgHeight=img.height*1.3;
通過if判斷
if(img.width<imgWidth){
img.width = img.width * 1.05//每次放大105%
img.height = img.height * 1.05
｝else{
clearInterval(timer);
}
也可在最後加一個 最大尺寸
var imgWid=img.width*2;//圖片極限寬度,是本身圖片的兩倍
var imgHei=img.height*2;//圖片極限高度
下面是全部代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.one{margin: 150px auto;width: 900px;}
</style>
</head>
<body>
<div>
<div>
<img src="6-160ZQ2403c95.jpg" id="img">
</div>
<input type="button" id="bt1" value="放大">
<input type="button" id="bt2" value="縮小">
</div>
<script>
window.onload= function () {
var one=document.getElementById('bt1')
one.onclick= function () {
funim();
};
var img=document.getElementById('img');
var imgWid=img.width*2;//圖片極限寬度,是本身圖片的兩倍
var imgHei=img.height*2;//圖片極限高度
/**
圖片每次 放大105% 到了圖片130%的就停止 最大到圖片的二倍停止
*/
function funim(){
var imgWidth=img.width*1.3;//最大到圖片的130%就停止
var imgHeight=img.height*1.3;
var timer=setInterval(function () {
if(img.width<imgWidth){
if(img.width<imgWid) {
img.width = img.width * 1.05//每次放大105%
img.height = img.height * 1.05
}else{
clearInterval(timer);
}
}else{
clearInterval(timer);
}
},50)
}
}
</script>
</body>
</html>
小編這裡只寫了放大的效果，有興趣的小夥伴可以把縮小，停止這些都加上，美化下css.
喜歡的點下關注,每天更新的東都是可以幫助鍛鍊思維的基礎性東西，當然難度會越來越高的，一起進步。一起學習了
相關推薦
'通過js獲得當前頁面路由參數的方法'
"通過js獲得當前頁面路由參數，是一個常用的方法，即使是靜態的html頁面，也可以藉此獲得傳來的參數，達到動態頁面一般的效果。window.location我們需要用到的就是window.location的幾個屬性，下面從這個簡單的測試代碼中可以看到詳細的用法：建立一個ht...
Excel指量插入圖片，你還在一張張的導入？快學此方法！
在日常工作中，如製造職工名冊、產品介紹表的時候常常要在Excel中插入許多和文字對應的圖片。慣例的辦法是一張一張將相片插入到對應的隊伍中，然後再調鉅細。如...
web前端開發中的JS選項卡/頁籤/tab的實現方法
歡迎關注！Tab(Module-Tabs)Tab(Module-Tabs)，也稱選項卡、頁籤。是指將多個分類內容放置在同一個佈局塊內，但每次只有一個分類的...
HTML5與JS製作非常炫酷的3D立體圖片相冊展示代碼
更多特效代碼請添加HTML5前端交流群581549454廢話不多說，上代碼！源代碼：<!DOCTYPE html PUBLIC "-//W3C//D...
php實現點擊驗證碼圖片即可自動更換方法
點擊驗證碼換一張：點擊讓瀏覽器重新請求一次驗證碼生成的腳本方法：更新img標籤src屬性，使得瀏覽器能夠發現src變更了，從而重新發出請求（如果變更之後的...
網頁圖片預加載實現的幾個方法解析
網頁中預加載圖片是提高用戶體驗的一個很好方法。圖片預先加載到瀏覽器中，訪問者便可順利地在你的網站上衝浪，並享受到極快的加載速度。這對圖片畫廊及圖片佔據很大...
帶動畫的Tab切換純js實現
今天帶來的是用面向對象實現的tab切換內容是淡入淡出,上面的選項帶過渡動畫,這個例子是在網上看到的他用的jq寫的,= =js的面向對象改進了下,有助於學習...
四種方法教你完美突破網頁禁止複製權限，簡單實用小技巧
很多網站會禁止剪切和複製文字，右鍵完全被禁用，無法使用。這種網站有的是為保護版權，防止被抄襲，有的則是為了提高網站的訪問量，讓用戶每次需要的時候都去網站查...
JS編程小練習
使用數組輸出特定的圖案代碼如下，希望大家多多指導<!DOCTYPE HTML><html ><head><met...
原生JS實現data方法
首先需要一段HTML片段:在開發中經常會在DOM上存儲一些自定義數據，我們可以通過setAttribute方法來實現。但是當數據為引用類型時，存儲後的數據...
純js的炫酷照片牆效果，思維簡單易學
今天給大家帶來的純js實現的照片牆效果,代碼可能比較多 小編會一步步為大家講解,下面開始1、html佈局很簡單就是一組圖片和一個按鈕控制圖片的特效<...
為什麼要學習JS及輸出方法？
一、網站解析原理無論任何高級編程語言，比如PHP，最終都會調用環境解析成HTML+CSS+JS。換個意思來說：瀏覽器只能識別HTML+CSS+JS！！二、...
推薦中...