立日誌: 2021

2021年10月7日星期四

jQuery 系列 Slide滑動效果

<!DOCTYPE html>

<head>

<title>Event</title>

<style>

*{margin: 0px;}

body{

width: 610px;

margin-top: 35px;

margin-right: auto;

margin-left: auto;

margin-bottom: 50px;

text-align: center;

font-size: 154%;

-webkit-box-shadow: 0px 0px;

box-shadow: 0px 0px;

}

#contant{background-color: #999966;

display:none;

}

</style>

$(document).ready(function(){

//alert(123)

//動畫設置

//.slideDown()

//.slideUp()

//.slideToggle()

$("a").click(function(e){

var obj=$(e.currentTarget).attr("name")

// alert(obj)

switch(obj){

case "slide001":

$("#contant").slideDown("slow")

break;

case "slide002":

$("#contant").slideUp("slow")

break;

case "slide003":

$("#contant").slideToggle("slow")

break;

}

})

</script>

</head>

<body>

<a href="javascript:;" name="slide001">slideDown滑下</a>

<a href="javascript:;" name="slide002">SlideUp滑上</a>

<a href="javascript:;" name="slide003">SlideToggle滑動開關</a>

<hr/>

</body>

</html>

jQuery 系列動畫的淡化效果

<!DOCTYPE html>

<head>

<title>Event</title>

<style>

margin: 0px;

text-align: center;

color: #B1430A;

font-style: oblique;

font-variant: small-caps;

font-weight: bolder;

font-size: 125%;

line-height: 130%;

}

body{

margin-top: 37px;

margin-left: auto;

margin-bottom: 73px;

text-align: center;

}

#contant{

background-color:#0090CC;

/*display:none;*/

}

</style>

$(document).ready(function(){

//alert(123)

//動畫設置

//.fadeIn()

//.fadeOut()

//.fadeTo()

//.fadeToggle()

//.hide()

//.show()

$("#contant").hide();

$("a[name=show]").click(function(e){

$("#contant").show()

})

$("a[name=hide]").click(function(e){

$("#contant").hide()

})

$("a[name=fadeIn]").click(function(e){

$("#contant").fadeIn("slow")

})

$("a[name=fadeOut]").click(function(e){

$("#contant").fadeOut(2000)

})

$("a[name=fadeToggle]").click(function(e){

$("#contant").fadeToggle(2000)

})

$("a[name=fadeTo]").click(function(e){

$("#contant").fadeTo(1000,0.5)

})

</script>

</head>

<body>

<a name="fadeIn" href="javascript:;">fadeIn(淡入)</a>

<a name="fadeOut" href="javascript:;">fadeOut(淡出)</a>

<a name="fadeToggle" href="javascript:;">fadeToggle(淡化開關)</a>

<a name="fadeTo" href="javascript:;">fadeTo(自訂淡化)</a>

<hr/>

</body>

</html>

jQuery 系列滑鼠事件鍵盤事件

<!DOCTYPE html>

<head>

<title>Event</title>

<style>

*{margin: 0px;}

body{width: 610px;

margin: 10px auto}

section{

width: 600px;

background-color: #04A0A3;

margin: 3px;

}

span{

background-color: #01C43C;

width: 100px;

display: inline-block;

text-align: center;

margin-right: 5px;

}

#contant{background-color: #999966}

</style>

$(document).ready(function(){

//$(對象).事件類型(對應動作)

//滑鼠事件

//.click()---點一下

// $("#contant").val('預設值').click(function(e){alert(e)})

//.contextmenu() -----右鍵功能表

// $("body").contextmenu(function(e){alert("右鍵功能失效");return false})

//.dblclick() -----點二下

// $("input[type=text]").dblclick(function(e){alert(e)})

//.hover() -----滑過時

// $("h3").hover(function(e){alert(e)})

//.mousedown() -----滑鼠按下

// $("#contant").mousedown(function(e){alert("按下")})

//.mouseup() -----滑鼠放開

// $("#contant").mouseup(function(e){alert("放開")})

//.mouseout() -----滑鼠離開

// $("input[type=text]").mouseout(function(e){alert("out")})

//.mouseover() -----滑鼠移過去

// $("input[type=text]").mouseover(function(e){alert("over")})

//.toggle()-----反轉開關

$("input[type=text]").toggle(function(e){alert(e)})

})

</script>

</head>

<body>

<option value="volvo">Volvo</option>

</select>

</section>

</form>

<hr/>

</body>

</html>

<!DOCTYPE html>

<head>

<title>Event</title>

<style>

*{margin: 0px;}

body{width: 610px;

margin: 10px auto}

section{

width: 600px;

background-color: #04A0A3;

margin: 3px;

}

span{

background-color: #01C43C;

width: 100px;

display: inline-block;

text-align: center;

margin-right: 5px;

}

#contant{background-color: #999966}

</style>

$(document).ready(function(){

//.keydown() -----鍵盤按下

//$("input[type='text']").keydown(function(e){alert("keydown")})

//.keypress() -----敲擊鍵盤

$("input[type='text']").keypress(function(e){alert("keypress")})

//.keyup()-----鍵盤彈上

//$("input[type='text']").keyup(function(e){alert("keyup")})

})

</script>

</head>

<body>

<option value="volvo">Volvo</option>

</select>

</section>

</form>

<hr/>

</body>

</html>

表單事件

<!DOCTYPE html>

<head>

<title>Event</title>

<style>

*{margin: 0px;}

body{width: 610px;

margin: 10px auto}

section{

width: 600px;

background-color: #04A0A3;

margin: 3px;

}

span{

background-color: #01C43C;

width: 100px;

display: inline-block;

text-align: center;

margin-right: 5px;

}

#contant{background-color: #999966}

</style>

$(document).ready(function(){

//alert(123)

$("input[type=text]").bind({

focus:function(e){

$("input[type=text]").val("")

$("#contant").text("文字欄位進入")

}

,blur:function(e){$("#contant").text("文字欄位離開")}

,select:function(e){$("#contant").text("選取文字")}

} )

$("input[type=password]").bind({

focus:function(){}

,blur:function(){}

,select:function(){}

})

$("select").change(function(e){$("#contant").text("變動選單值為:"+$("#cars").val())})

})

</script>

</head>

<body>

<option value="volvo">Volvo</option>

</select>

</section>

</form>

<hr/>

</body>

</html>

表

jQuery 系列事件基本觀念執行彈出訊息

$(選取對象).事件項目(執行動作，事件回傳)

<!DOCTYPE html>

<head>

<title>Event</title>

<style>

*{margin: 0px;}

body{width: 610px;

margin: 10px auto}

section{

width: 600px;

background-color: #04A0A3;

margin: 3px;

}

span{

background-color: #01C43C;

width: 100px;

display: inline-block;

text-align: center;

margin-right: 5px;

}

#contant{background-color: #999966}

</style>

$(document).ready(function(){

//alert(123)

$("h3").mouseover(function(event){

alert("hi~")

})

</script>

</head>

<body>

<option value="volvo">Volvo</option>

</select>

</section>

</form>

<hr/>

</body>

</html>

2021年10月6日星期三

jQuery 系列使用滑鼠改變標籤內容

<!DOCTYPE html>

<head>

<title>Jqery_select</title>

*{margin:0px;

padding:0px;}

body{width:960px;margin:5px auto;}

li{width:100px;

float:left;

background-color:#ccccFF;

margin:3px;

cursor:pointer;

list-style-type: none;

text-align:center;

}

section{background-color: #999999}

div{clear:both;

margin:5px;

background-color:#ffcccc;

border: solid 1px #333;

}

</style>

$(document).ready(function(){

// alert("hello")

$(".con").hide();

$("li").each(function(i,obj){

$(obj).attr("title",i)

$(obj).mouseover(function(e){

//alert(e.currentTarget)

var i=$(this).attr("title")

var t_text=$(this).text();

//$(".con").eq(i).fadeIn("slow").text(t_text)

//改變文字

//$(".con").eq(i).fadeIn("slow").html("<h1>"+t_text+"</h1>")

//改變標籤

$(".con").eq(i).fadeIn("slow").append("<h1>"+t_text+"</h1>")

//追加

//$(".con").eq(i).fadeIn("slow")

//$("<h1>"+t_text+"</h1>").appendTo("body")

//追加到

})

$(obj).mouseout(function(e){

//alert(e.currentTarget)

var i=$(this).attr("title")

$(".con").eq(i).fadeOut("slow").children().last().remove()

})

</script>

</head>

<body>

<ul>

<li class="sel" id="item05" style="color:black">ジブリール</li>

</ul>

</section>

</body>

</html>

<!DOCTYPE html>

<head>

<title>Event</title>

<style>

*{margin: 0px;}

body{width: 610px;

margin: 10px auto;

}

li{

background-color: #0F5F6C;

width: 100px;

margin: 3px;

float: left;

list-style-type: none;

text-decoration: underline;

text-align: center;

font-size: 124%;

color: #00CB36;

font-weight: bold;

line-height: 154%;

}

#pit_con{

width: 640px;

height: 420px;

clear: both;

text-align: center;

text-decoration: underline;

}

</style>

$(document).ready(function(){

//alert(123)

$("li").css("cursor","pointer")

$("li").bind({

//以下為滑入動作

mouseover:function(e){//alert("mouseover")

$("#pit_con").fadeOut("slow",function(){

// alert($(e.currentTarget).index())

var i=$(e.currentTarget).index()+1

$("#pit_con img").attr("src","Pt/pit_show_0"+i+".jpg")

$(this).fadeToggle("slow",function(){

});

})

}//以下為滑出動作

,mouseout:function(e){//alert("mouseout")

}//以下為點繫動作

,click:function(e){//alert("click")

}

})

</script>

</head>

<body>

<ul>

<li id="pit_show_01">ジブリール</li>

</ul>

</div>

</body>

</html>

2021年10月5日星期二

jQuery 系列樣式控制

//取得樣式|指定樣式|物件內容

//$("對象").css("樣式值")--讀取樣式

//$("對象").css("樣式名","樣式值")--指定樣式

//$("對象").css({"樣式名":"樣式值","樣式名":"樣式值","樣式名":"樣式值"})--指定多重樣式

<!DOCTYPE html>

<head>

<title>Jqery_select</title>

*{margin:0px;

padding:0px;}

body{width:960px;margin:5px auto;}

li{

width: 100px;

float: left;

background-color: #EEB1FF;

margin: 3px;

cursor: pointer;

list-style-type: none;

text-align: center;

}

div{

clear: both;

margin: 5px;

background-color: #68FFFD;

border: solid 1px #333;

text-align: left;

}

</style>

$(document).ready(function(){

//alert("hello")

//Jquery 樣式

//取得樣式|指定樣式|物件內容

//$("對象").css("樣式值")--讀取樣式

//$("對象").css("樣式名","樣式值")--指定樣式

//$("對象").css({"樣式名":"樣式值","樣式名":"樣式值","樣式名":"樣式值"})--指定多重樣式

var divObj={

"backgroundColor":"#332200"

,"width":"600px"

// ,"display":"none"

}

$("#content").css(divObj)//下方區塊的樣式

$("li").each(function(i,obj){

$(obj).mouseover(function(e){

//alert(this)

var bkColor=$(this).css("color")

$("#content").css("color",bkColor).fadeIn("slow");

})

$(obj).mouseout(function(e){

$("#content").fadeOut("slow");

})

</script>

</head>

<body>

<ul>

</ul>

<h1><img src="../../Adobe課程/DW_201904/DW0429/48414496_211785576370998_2662290896388620288_n.jpg" alt="" width="358" height="533" align="middle" /><strong>ときさきくるみ</strong></h1>

</div>

<div class="con2" id="lorem02">Ut animi non maiores sint placeat! Ullam hic quod dicta. Ex assumenda quo cum excepturi facere, obcaecati libero est amet. Eveniet asperiores laborum minus enim, placeat suscipit nulla? Nobis, necessitatibus.</div>

<div class="con3" id="lorem03">Quasi quas tempore ab voluptates? Iste rerum amet maiores voluptas odio, corporis error porro provident ullam sunt earum cumque molestias voluptate aspernatur quasi quae corrupti, fugit aperiam sint voluptatum reiciendis.</div>

<div class="con4" id="lorem04">Magni, eligendi modi nemo quae iste. Cum illo, a dignissimos deserunt, labore voluptatem neque reiciendis placeat eum molestiae accusantium blanditiis consequuntur! Excepturi in, perferendis debitis error deserunt vel unde aliquam.</div>

<div class="con5" id="lorem05">Provident esse facere adipisci quisquam modi ut rerum minus accusantium aliquam ea ex quidem, voluptatibus amet! Libero illum recusandae obcaecati consectetur, reprehenderit suscipit, aperiam odit, nulla molestias quos eius aliquam.</div>

</section>

</body>

</html>