下面給大家舉一個簡單的css圖片滑動效果樣本（自下而上滑動）：
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>css怎麼實現圖片滑動</title> <style type="text/css"> img{ height: 200px; width: 200px; } .slider { overflow-y: hidden; max-height: 500px; /* 最大高度 */ background: pink; height: 200px; width: 200px; /* Webkit核心瀏覽器：Safari and Chrome*/ -webkit-transition-property: all; -webkit-transition-duration: .5s; -webkit-transition-timing-function: cubic-bezier(0, 1, 0.5, 1); /* Mozilla核心瀏覽器：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>
上述代碼可直接複製在本地測試效果如：
只要滑鼠點擊下面的按鈕，就會出現圖片自下而上的滑動效果。其中有一個onclick 屬性，由元素上的滑鼠點擊觸發，即當點擊按鈕時執行一段 JavaScript。
注釋：onclick 屬性不適用以下元素：<base>、<bdo>、<br>、<head>、<html>、<iframe>、<meta>、<param>、<script>、<style> 或 <title>。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
