*YouTube 教學頻道* *影像布落格*
首頁
初學者技能教案專區
布落格寫作
數位影音專題寫作
西洋哲學史導讀
老子探義導讀
《論語》小談
flickr圖像集

2014年11月26日 星期三

向左、向右移動:easy jQuery




2017年版,純CSS的做法


後現代風格
遮住文字→
形成 想讀張力
移動圖像→
進行閱讀過程

現代性與後現性之間的矛盾只是一個更大的歷史過程中的一個階段,而不是一個固定的有中心的靜止的結構; 尋找矛盾,發現矛盾,或甚「建構」矛盾, 正是布萊希特的「方法」的核心。
詹姆遜,《布萊希特與方法》陳永國譯。






jQuery:

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(function() {
var flag1126 = 'a';

$('#d112601').click(function() {

if(flag1126 == 'a') {
$(this).animate({'left': '-=600px'}, {duration: 1400});
flag1126 = 'b';
}

else {
$(this).animate({'left': '+=600px'}, {duration: 1400});
flag1126 = 'a';
}
});
});
</script>




基 礎概念講解
實戰操作過程







使用CSS的 方法


如果想要:click一下咖啡杯,物件可以移動。這 樣的互動模態之文本形式,可以使用jQuery程 式外,另一種更方使的作法是和CSS配合使用。
我們可以看到簡單的運用jQuery的toggleClass(),再配合使用css trnsition以及transform之語法,就可以創造補間形式的動態效果。
這一作用更直覺,更適合一般人的直覺寫作思考。



CSS:

<style>
.clicsstt170101 {
-webkit-transition: 1s linear;
-moz-transition: 1s linear;
-o-transition: 1s linear;
-ms-transition: 1s linear;
transition: 1s linear;
cursor: pointer;
}

.clicsstt170101add01 {
transform: translate(-350px, -140px);
}
</style>


jQuery: click

$(this).toggleClass('clicsstt170101add01');


影音教學:


按一下
下面的圖像就會自動的移開。
以利閱讀的進行!


沒有留言:

張貼留言