您好,登錄后才能下訂單哦!
這篇文章主要介紹了使用css實現(xiàn)圖片滑動效果的方法,具有一定借鑒價值,需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。
下面給大家舉一個簡單的css圖片滑動效果示例(自下而上滑動):
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>css怎么實現(xiàn)圖片滑動</title> <style type="text/css"> img{ height: 200px; width: 200px; } .slider { overflow-y: hidden; max-height: 500px; /* 最大高度 */ background: pink; height: 200px; width: 200px; /* Webkit內(nèi)核瀏覽器:Safari and Chrome*/ -webkit-transition-property: all; -webkit-transition-duration: .5s; -webkit-transition-timing-function: cubic-bezier(0, 1, 0.5, 1); /* Mozilla內(nèi)核瀏覽器:firefox3.5+*/ -moz-transition-property: all; -moz-transition-duration: .5s; -moz-transition-timing-function: cubic-bezier(0, 1, 0.5, 1); /* Opera*/ -o-transition-property: all; -o-transition-duration: .5s; -o-transition-timing-function: cubic-bezier(0, 1, 0.5, 1); /* IE9*/ -ms-transition-property: all; -ms-transition-duration: .5s; -ms-transition-timing-function: cubic-bezier(0, 1, 0.5, 1); } .slider.closed { max-height: 0; } </style> </head> <body> <div style="height: 200px; width: 200px; border: 1px solid #ccc;"> <div class="slider" id="slider"> <img src="2.png"> </div> </div> <button onclick="document.getElementById('slider').classList.toggle('closed');">點擊試試</button> </body> <html>
上述代碼可直接復(fù)制在本地測試效果如下圖:
只要鼠標(biāo)點擊下面的按鈕,就會出現(xiàn)圖片自下而上的滑動效果。其中有一個onclick 屬性,由元素上的鼠標(biāo)點擊觸發(fā),即當(dāng)點擊按鈕時執(zhí)行一段 JavaScript。
注釋:onclick 屬性不適用以下元素:<base>、<bdo>、<br>、<head>、<html>、<iframe>、<meta>、<param>、<script>、<style> 或 <title>。
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享使用css實現(xiàn)圖片滑動效果的方法內(nèi)容對大家有幫助,同時也希望大家多多支持億速云,關(guān)注億速云行業(yè)資訊頻道,遇到問題就找億速云,詳細(xì)的解決方法等著你來學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。