標籤：click 作用 blog contain char 事件 doc padding 過程
<!DOCTYPE html><html><head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>慕課七夕主題</title> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <style type="text/css"> * { padding: 0; margin: 0; } ul, li { list-style-type: none; } #content { width: 100%; height: 100%; /* top: 20%; left: 20%; */ overflow: hidden; position: absolute; } .content-wrap { position: relative; } .content-wrap > li { background: #CAE1FF; color: red; float: left; overflow: hidden; position: relative; } li:nth-child(2) { background: #9BCD9B; } li:nth-child(3) { background: yellow; } button { width: 100px; height: 50px; } .button { position: absolute; bottom: 0; } </style></head><body> <div id=‘content‘> <ul class=‘content-wrap‘> <!-- 第一副畫面 --> <li> 頁面1 </li> <!-- 第二副畫面 --> <li> 頁面2 </li> <!-- 第三副畫面 --> <li> 頁面3 </li> </ul> <div class="button"> <button>點擊切換頁面</button> </div> </div> <script type="text/javascript"> var container = $("#content"); // 擷取第一個子節點 var element = container.find(":first"); // li頁面數量 var slides = element.find("li"); // 擷取容器尺寸 var width = container.width(); var height = container.height(); // 設定li頁面總寬度 element.css({ width: (slides.length * width) + ‘px‘, height: height + ‘px‘ }); // 設定每一個頁面li的寬度 $.each(slides, function(index) { var slide = slides.eq(index); // 擷取到每一個li元素 slide.css({ // 設定每一個li的尺寸 width: width + ‘px‘, height: height + ‘px‘ }); }); // 綁定一個事件，觸發通過 $(‘button‘).click(function() { // 在5秒的時間內，移動X的位置，為2個頁面單位 //? element.css({ ‘transition-timing-function‘: ‘linear‘, ‘transition-duration‘: ‘10000ms‘, ‘transform‘: ‘translate3d(-‘ + (width * 2) + ‘px,0px,0px)‘ //設定頁面X軸移動}); }); </script></body></html>
在頁面子項目單一的情況下通過設定父元素的定位實現頁面切換會比設定子項目簡單
transform屬性是靜態屬性，不是動畫屬性，一旦寫到style裡面，將會直接顯示作用，無任何變化過程
通過設定transition的一些參數，讓translate3d這個屬性發生變化
使用css3屬性transition實現頁面滾動
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
