//取得樣式|指定樣式|物件內容
//$("對象").css("樣式值")--讀取樣式
//$("對象").css("樣式名","樣式值")--指定樣式
//$("對象").css({"樣式名":"樣式值","樣式名":"樣式值","樣式名":"樣式值"})--指定多重樣式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Jqery_select</title>
<style type="text/css" media="screen">
*{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>
<script src="jquery-2.1.4.js"></script>
<script >
$(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>
<li class="sel" id="item01" style="color:red">item01</li>
<li class="sel" id="item02" style="color:green">item02</li>
<li class="sel" id="item03" style="color:blue">item03</li>
<li class="sel" id="item04" style="color:yellow">item04</li>
<li class="sel" id="item05" style="color:black">item05</li>
</ul>
<section id="content" style="clear:both">
<div class="con" id="lorem01" align="center">
<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>
沒有留言:
張貼留言