鼠標和鍵盤懸停
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠標懸停</title>
<script type="text/javascript" src='./js/jquery.min.js'></script>
<script type='text/javascript'>
$(function(){
//監聽鼠標懸停事件
$("#b").mouseover(function(){
//用類選擇器修改元素的樣式
$(".c").css("background-color","pink")
$(".c").css("color","green")
$(".c").css("font-size","30px")
})
});
// 用類選擇器修改鼠標離開事件
$(function(){
//監聽鼠標懸停事件
$("#b").mouseout(function(){
//用類選擇器修改元素的樣式
$(".c").css("background-color","white")
$(".c").css("color","red")
$(".c").css("font-size","16px")
})
});
// 用類選擇器修改鼠標離開事件
$(function(){
$("#z").mouseover(function(){
$("#z").css("background-color","pink")
});
});
</script>
</head>
<body>
<div class="c">風蕭蕭兮易水寒，壯士一去兮不復返</div><br/><br/>
<input type="button" id="z" value="懸停變色"><br/><br/>
<img id="b" src="./img/微信圖片_20181121185908.jpg" /><br/><br/>
</body>
</html>
形變動畫
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>animate 動畫</title>
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript">
//jquery單一入口
$(function(){
$("#b2").click(function(){
//通過標簽選擇器來進行動畫操作
$("div").animate({
left:'400px',
width:'400px',
// margin:'200px'
height:'300px'
});
$("div").animate({
left:'600px',
});
});
});
</script>
</head>
<body>
<!-- position: absolute 絕對定位 -->
<div style='background-color:yellow;width :100px;height: 100px;position: absolute;'></div>
<br/><br/>
<input style="margin-top:400px;" type="button" id="b2" value="開始動畫"/>
</body>
</html>
淡入淡出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery的學習</title>
<script type="text/javascript" src="./js/jquery.min.js"></script>
<!-- jquery代碼的入口，用來等待頁面元素全部加載完成 -->
<script type="text/javascript">
$(function() {
/* 用jquery選擇器來選取某一個div的內容*/
var coo=$("#b").html();
var con= $(".a").val();
alert(con)
// jquery綁定點擊事件 click 單擊 hide 隱藏 參數單位是毫秒
$(".a").click(function(){
//隱藏div
// $("#b").hide(3000);
$("#b").fadeOut(3000); //慢慢消失 淡出
});
$(".a1").click(function(){
$("#b").fadeIn(3000); //慢慢出來 淡入
});
$("#aa").click(function(){
$("#b").fadeToggle(1000);
});
});
</script>
</head>
<body>
<div id="b">
<img src="./img/微信圖片_20181121185908.jpg"/>
</div>
<input id='b' type="text" width="200" value="默認顯示" />
<input class='a' type="button" value="滾蛋吧腫瘤君"/>
<input class='a1' type="button" value="出來吧皮卡丘"/>
<input id="aa" type="button" value="出來再進去">
</body>
</html>