abstrakt:總結(jié):向右滑動(dòng)的效果出不來(lái),跟文檔一模一樣的也出不來(lái),我明天再試試把。代碼:<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <style type="text/css"> .d1, .d2
總結(jié):
向右滑動(dòng)的效果出不來(lái),跟文檔一模一樣的也出不來(lái),我明天再試試把。
代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.d1, .d2, .d3, .d4{
width:100px; height:100px; background-color:#ffe411;
}
.box1{
width: 100px; height:100px; background: red;
}
button{
margin-bottom: 10px; border:none; width:100px;
}
.main{
width:150px; height:200px; float:left;
}
</style>
<script type="text/javascript" src="jq.js"></script>
<script type="text/javascript">
// jQuery顯示/隱藏
// hide() 隱藏顯示的元素
// $(selector).hide(speed,callback)
// speed 元素隱藏的速度,默認(rèn)為零
// callback hide函數(shù)執(zhí)行后,要執(zhí)行的函數(shù)
// show() 顯示隱藏的元素
// $(selector).show(speed, callback)
// speed 元素顯示的速度,默認(rèn)為零
// callback show函數(shù)執(zhí)行后,要執(zhí)行的函數(shù)
// $(document).ready(function(){
// $('#btn1').click(function(){
// $('p').hide(1500);
// })
// $('#btn2').click(function(){
// $('p').show(1500);
// })
// })
// jQuery滑動(dòng)
// jQuery是通過(guò)高度的變化 (向某個(gè)方向增大或縮小)來(lái)動(dòng)態(tài)的顯示所匹配的元素
// slideDown(speed, callback)通過(guò)高度的變化,向下增大的動(dòng)態(tài)效果 下滑效果
// speed: 下滑顯示過(guò)程的速度 英文值或者毫秒
// callback: 動(dòng)畫完成時(shí)執(zhí)行的函數(shù)
// slideUp(speed, callback) 通過(guò)高度的變化,向上減小的動(dòng)態(tài)效果 上滑效果
// speed:上滑顯示過(guò)程的速度 英文值或者毫秒
// callback:動(dòng)畫完成時(shí)執(zhí)行的函數(shù)
// slideToggle(speed, callback); 通過(guò)高度的變化來(lái)切換元素的可見性
// speed:上滑隱藏/下滑顯示過(guò)程的速度 英文值或者毫秒
// callback: 動(dòng)畫完成時(shí)執(zhí)行的函數(shù)
// $(document).ready(function(){
// $('.d1').hide();
// $('.btn1').click(function(){
// $('.d1').slideDown(1500);
// })
// $('.btn2').click(function(){
// $('.d2').slideUp(1500)
// })
// $('.btn3').click(function(){
// $('.d3').slideToggle(1000);
// })
// })
// jQuery 淡入 淡出
// fadeIn(speed, callback) 通過(guò)不透明度的變化來(lái)實(shí)現(xiàn)匹配到元素的淡入效果
// fadeOut(speed, callback) 通過(guò)不透明度的變化來(lái)實(shí)現(xiàn)匹配到元素的淡出效果
// fadeToggle(speed, callback)
// 通過(guò)不透明度的變化來(lái)開關(guān)所有匹配到元素的淡入淡出效果
// fadeTo(speed, opacity, callback)把所有匹配到的元素的不透明度以漸進(jìn)的方式調(diào)整到指定的不透明度
// speed:規(guī)定效果的時(shí)長(zhǎng)
// callback:動(dòng)畫完成時(shí)執(zhí)行的函數(shù)
// opacity: fadeTo方法中必須參數(shù),控制淡入淡出的效果的不透明度(值介于0與1之間)
// $(document).ready(function(){
// $('.d1').hide();
// $('.btn1').click(function(){
// $('.d1').fadeIn(1500);
// })
// $('.btn2').click(function(){
// $('.d2').fadeOut(1500);
// }) //少打一個(gè)點(diǎn) .
// $('.btn3').click(function(){
// $('.d3').fadeToggle(1500);
// })
// $('.btn4').click(function(){
// $('.d4').fadeTo(1500, 0.1);
// })
// })
// jQuery自定義動(dòng)畫
// 使用 animate()方法創(chuàng)建自定義動(dòng)畫
// 語(yǔ)法:$(selector).animate({params}, speed, callback);
// 必需的 params 參數(shù)定義形成動(dòng)畫的 CSS 屬性
// 可選的 speed 參數(shù)規(guī)定效果的時(shí)長(zhǎng), 可?。?quot;slow"、"fast"、"nomal" 或 毫秒
// 可選的 callback 是動(dòng)畫完成后所執(zhí)行的函數(shù)
// stop() 方法用于停止動(dòng)畫或效果,在它們完成之前 該方法適用于所有 jQuery 效果函數(shù),包括滑動(dòng)、淡入淡出和自定義動(dòng)畫
// 語(yǔ)法:$(selector).stop(stopAll, goToEnd);
// 可選的參數(shù) stopAll 規(guī)定是否應(yīng)該清除動(dòng)畫隊(duì)列。 默認(rèn)是 false 僅停止活動(dòng)的動(dòng)畫,允許任何排入隊(duì)列的動(dòng)畫向后執(zhí)行
// 可選的參數(shù) goToEnd 規(guī)定是否立即完成當(dāng)前動(dòng)畫。默認(rèn)是 false
// 默認(rèn)情況下 stop() 會(huì)清楚再被選元素上指定的當(dāng)前動(dòng)畫
$(document).ready(function(){
// $('.btn1').click(function(){
// $('p').animate({fontSize:'40px'}, 1500);
// })
// $('.btn2').click(function(){
// $("div").animate({left:"100px"}, 1500);
// $('div').animate({
// left:'400px', //left 谷歌瀏覽器測(cè)試不能實(shí)現(xiàn)
// opacity: '0.3',
// width:'400px',
// height:'400px'
// width:'toggle'
// }, 1500);
// })
$('#right').click(function(){
$('.box1').animate({left:'500px'}, 3000);//還是實(shí)現(xiàn)不了,我醉了。
$('.box1').animate({fontSize:'30px'}, 500);//這個(gè)就可以實(shí)現(xiàn),我也是福
})
$('#stop').click(function(){
$('.box1').stop(true, true);
})
})
</script>
</head>
<body>
<!-- <button id="btn1">點(diǎn)擊隱藏</button>
<button id="btn2">點(diǎn)擊顯示</button>
<p>我是wjh,xxoo</p>
<p>me love you</p> -->
<!-- <button class="btn1">下滑</button>
<div class="d1"></div>
<button class="btn2">上滑</button>
<div class="d2"></div>
<button class="btn3">切換</button>
<div class="d3"></div> -->
<!-- <div class="main">
<button class="btn1">淡入</button>
<div class="d1"></div>
</div>
<div class="main">
<button class="btn2">淡出</button>
<div class="d2"></div>
</div>
<div class="main">
<button class="btn3">切換</button>
<div class="d3"></div>
</div>
<div class="main">
<button class="btn4">漸變到指定值</button>
<div class="d4"></div>
</div> -->
<!-- <button class="btn1">點(diǎn)擊</button>
<p>我是一個(gè)小可愛,我來(lái)自神都洛陽(yáng)。</p>
<button class="btn2">點(diǎn)擊</button>
<div></div> -->
<div>
<button id="right">右移</button>
<button id="sopt">停止</button>
<div class="box1">php中文網(wǎng)</div>
</div>
</body>
</html>
Korrigierender Lehrer:查無(wú)此人Korrekturzeit:2019-02-15 09:17:59
Zusammenfassung des Lehrers:效果都是事件觸發(fā),看看事件寫的對(duì)不對(duì)。。剛開始學(xué)習(xí),會(huì)碰到很多問(wèn)題,比如一個(gè)字母打錯(cuò),也會(huì)不執(zhí)行。仔細(xì)檢查,繼續(xù)加油。