<!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:#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>
<script src="jquery-2.1.4.js"></script>
<script >
$(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="item01" style="color:red">クルミ</li>
<li class="sel" id="item02" style="color:green">うたは</li>
<li class="sel" id="item03" style="color:blue">さやか </li>
<li class="sel" id="item04" style="color:yellow">雪ノ下</li>
<li class="sel" id="item05" style="color:black">ジブリール</li>
</ul>
<section id="content" style="clear:both">
<div class="con" id="lorem01"><img src="../../Adobe課程/DW_201904/DW0429/48414496_211785576370998_2662290896388620288_n.jpg" width="482" height="646" alt=""/></div>
<div class="con" id="lorem02"><img src="../../Adobe課程/DW_201904/DW0429/yande.re 361877 sample ass bikini breast_hold kasumigaoka_utaha mizuki_ame saenai_heroine_no_sodatekata sawamura_spencer_eriri swimsuits topless.jpg" width="561" height="750" alt=""/></div>
<div class="con" id="lorem03"><img src="../../Adobe課程/DW_201904/DW0429/d53f8794a4c27d1ee28e97d512d5ad6eddc43872.jpg" width="411" height="665" alt=""/></div>
<div class="con" id="lorem04"><img src="../../Adobe課程/DW_201904/DW0429/yande.re 426584 sample ass crossover edogawakid feet katou_megumi open_shirt pantsu panty_pull saenai_heroine_no_sodatekata seifuku thighhighs wallpaper yukinoshita_yukino.jpg" width="750" height="444" alt=""/></div>
<div class="con" id="lorem05"><img src="../../Adobe課程/DW_201904/DW0429/6a22384b-4f91-47d7-adfa-46f5de20f140.jpg" width="508" height="733" alt=""/></div>
</section>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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>
<script src="jquery-2.1.4.js"></script>
<script>
$(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>
<li id="pit_show_02">クルミ</li>
<li id="pit_show_03">うたは</li>
<li id="pit_show_04">雪ノ下</li>
<li id="pit_show_05">由比ヶ浜</li>
</ul>
<div id="pit_con">
<img src="Pt/pit_show_02.jpg" alt="" width="500" >
</div>
</body>
</html>
沒有留言:
張貼留言