兩個簡單例子（html）

時間  2019-11-15
標籤 兩個 簡單 例子 html 欄目 HTML 简体版
原文   原文鏈接 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無標題文檔</title>
<style type="text/css">
    *{margin:0px; padding:0px;}
    #main{width:1000px; height:600px; margin:0px auto;}
    #main ul li{width:288px; height:180px;list-style-type:none;
                float:left; margin:10px 20px; box-shadow:0px 0px 15px #000;}
    .gray{width:100%; height:100%; background:rgba(0,0,0,0.5); position:absolute; left:0px; top:0px;display:none;}
    .showImg{width:650px; height:406px;position:absolute; left:338px; top:100px;border:10px solid #FFFFFF; display:none;}
    .showImg img.butl{ position:absolute; left:-50px; top:186px;}
    .showImg img.butr{ position:absolute; right:-50px; top:186px;}
</style>

</head>

<body>    
    <div id="main">
        <ul>
            <li><img src="images/s1.jpg" bigsrc="images/big1.jpg" /></li>
            <li><img src="images/s2.jpg" bigsrc="images/big2.jpg" /></li>
            <li><img src="images/s3.jpg" bigsrc="images/big3.jpg" /></li>
            <li><img src="images/s4.jpg" bigsrc="images/big4.jpg" /></li>
            <li><img src="images/s5.jpg" bigsrc="images/big5.jpg" /></li>
            <li><img src="images/s6.jpg" bigsrc="images/big6.jpg" /></li>
            <li><img src="images/s7.jpg" bigsrc="images/big7.jpg" /></li>
            <li><img src="images/s8.jpg" bigsrc="images/big8.jpg" /></li>
            <li><img src="images/s9.jpg" bigsrc="images/big9.jpg" /></li>
        </ul>
    </div>
    <!--灰色圖層-->
    <div class="gray"></div>
    <!--顯示大圖-->
    <div class="showImg">
        <img src="images/big1.jpg" class="BigImg" />
        
        <img src="images/dirl.png" class="butl" />
        <img src="images/dirr.png" class="butr" />
    </div>

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
    var _bigsrc=null;
    var index=0;
    $("#main ul li").click(function(){
        //alert("我被點擊了！！！");
        $(".gray").show();
        $(".showImg").show();
        
        _bigsrc=$(this).find("img").attr("bigsrc");
        //alert(_bigsrc);
        $(".showImg img.BigImg").attr("src",_bigsrc);
        
        index=$(this).index();
        //alert(index);
    });
    
    //向右切換
    $(".showImg img.butr").click(function(){
        index++;
        //alert(index);
        if(index<=8){
            _bigsrc=$("#main ul li").eq(index).find("img").attr("bigsrc");
            $(".showImg img.BigImg").attr("src",_bigsrc);
        }else{alert("右邊到頭了"); index=8;}
    });
    
    //向左切換
    $(".showImg img.butl").click(function(){
        index--;
        //alert(index);
        if(index>=0){
            _bigsrc=$("#main ul li").eq(index).find("img").attr("bigsrc");
            $(".showImg img.BigImg").attr("src",_bigsrc);
        }else{alert("左邊到頭了");index=0;}
    });
    
    $(".gray").click(function(){
        $(this).hide();
        $(".showImg").hide();
        
    });
    
</script>

</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">    
<html xmlns="http://www.w3.org/1999/xhtml">    
<head>    
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />    
<title>二級下拉菜單</title>    
<style type="text/css">    
	*{margin:0px; padding:0px;}    
	#Logo{width:100%; height:50px; background:#FF3300; position:relative;}    
	#Logo ul{height:50px; width:1070px; margin:0px auto;}    
	#Logo ul li{ padding:0px 30px;height:50px; list-style:none;    
				float:left;text-align:center; line-height:50px; font-family:"微軟雅黑";}    
	#Logo ul li a{color:#FFFFFF; text-decoration:none;}    
	#Logo ul li.hover{background:#990000;}    
	#Logo ul li .menu{width:100%; height:250px; background:#009900; position:absolute; left:0px; top:50px;    
						border-bottom:3px solid #000000; display:none;}    
</style>    
</head>    
<body>    
	<div id="Logo">    
		<ul>    
			<li><a href="http://www.baidu.com" target="_blank">首頁</a></li>    
			<li><a href="#">時裝趨勢</a>    
				<div class="menu">時裝趨勢</div></li>    
			<li><a href="#">嘉人美妝</a>    
				<div class="menu">嘉人美妝</div></li>    
			<li><a href="#">嘉人觀點</a>    
				<div class="menu">嘉人觀點</div></li>    
			<li><a href="#">珠寶腕錶</a>    
				<div class="menu">珠寶腕錶</div></li>    
			<li><a href="#">生活</a>    
				<div class="menu">生活</div></li>    
			<li><a href="#">雜誌</a>    
				<div class="menu">雜誌</div></li>    
			<li><a href="#">專題嘉人</a>    
				<div class="menu">專題嘉人</div></li>    
			<li><a href="#">TV</a>    
				<div class="menu">TV</div></li>    
		</ul>    
	</div>    
<script type="text/javascript" src="js/jquery.js"></script>    
<script type="text/javascript">    
	$("#Logo ul li").hover(function(){    
		$(this).addClass("hover").siblings().removeClass("hover");//添加class="hover";    
		$(this).find(".menu").slideDown();//慢慢向下展現;    
	},function(){    
		$(this).find(".menu").hide();//慢慢向上收回;    
		$(this).removeClass("hover");    
	});    
</script>    
</body>    
</html>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程