zoukankan      html  css  js  c++  java
  • jQuery案例

    手风琴

    <style>
            *{
                margin: 0;
                padding: 0;
                list-style: none;
            }
            .wrap{
                 1178px;
                height: 174px;
                overflow: hidden;
                position: relative;
                margin: 0 auto;
    
            }
            .wrap  ul li{
                float: left;
                 210px;
                height: 174px;
                overflow: hidden;
            }
            .wrap  ul{
                 2000px;
            }
            .wrap  ul li img{
                 550px;
                height: 174px;
            }
        </style>
    
    <body>
        <div class="wrap">
                <ul>
                    <li style='550px'><img src="http://pic.shejiben.com/hot_sjb/377_8180.jpg?1462261126" alt=""></li>
                    <li ><img src="http://pic.shejiben.com/hot_sjb/377_8288.jpg?1464830033" alt=""></li>
                    <li ><img src="http://pic.shejiben.com/hot_sjb/377_8155.jpg?1460709517" alt=""></li>
                    <li ><img src="http://pic.shejiben.com/hot_sjb/377_7937.jpg?1456984280" alt=""></li>
                </ul>
            </div>
    </body>
    
    <script>
        $(".wrap").find("li").click(function(){
            $(this).stop().animate({
                550
            })
            $(this).siblings().stop().animate({
                210
            })
        })
    </script>
    

    艺龙酒店

    <script>
            
            $("#main").find("li").mouseover(function(){
                $(this).stop().animate({
                    400
                })
                .children(".des").stop().hide()
                .parent().siblings().stop().animate({
                    160
                })
                .children(".des").stop().show();
            })
            $("#main").find("li").mouseout(function(){
                $("#main").find("li").stop().animate({
                    200
                }).children(".des").stop().show()
            })
        
        </script>
        
    <body>
    		<div id="main">
    			<ul>
    				<li>
    					<div class="des"><h4>园林酒店</h4></div>
    					<div style="background: url(img/1.jpg) center;"></div>
    				</li>
    				<li>
    					<div class="des"><h4>设计师酒店</h4></div>
    					<div style="background: url(img/2.jpg) center;"></div>
    				</li>
    				<li>
    					<div class="des"><h4>青年旅社</h4></div>
    					<div style="background: url(img/3.jpg) center;"></div>
    				</li>
    				<li>
    					<div class="des"><h4>特色客栈</h4></div>
    					<div style="background: url(img/4.jpg) center;"></div>
    				</li>
    				<li>
    					<div class="des"><h4>海岛酒店</h4></div>
    					<div style="background: url(img/5.jpg) center;"></div>
    				</li>
    				<li>
    					<div class="des"><h4>海外温泉</h4></div>
    					<div style="background: url(img/6.jpg) center;"></div>
    				</li>
    			</ul>
    		</div>
    		
        </body>
    
    <style type="text/css">
    			* {
    				margin: 0;
    				padding: 0;
    			}
    			ul li {
    				list-style: none;
    			}
    			#main {
    				 100%;
    				height: 260px;
    				margin: 40px 5%;
    			}
    			.top {
    				 100%;
    			}
    			#main ul li {
    				 200px;
    				height: 260px;
    				float: left;
    				position: relative;
    			}
    			#main ul li div {
    				 100%;
    				height: 260px;
    			}
    			#main ul li div.des {
    				position: absolute;
    				left: 0;
    				top: 0;
    				background: rgba(0,0,0,.3);
    				
    				}
    				#main ul li div.des h4 {
    					color: #FFF;
    					font-size: 30px;
    					padding: 30px;
    					 30px;
    					margin: 0 auto;
    					
    				}
    		</style>
    
    
  • 相关阅读:
    IE6下实现Width:auto
    Dynamic Linq 的Like扩展
    用一句JQuery代码实现表格的简单筛选
    jquery:利用jsonp跨域访问转载
    LINQ动态组合查询
    Windows服务中Timer组件
    正则表达式笔记转载
    继LINQ动态组合查询PredicateExtensions讲解
    错误笔记:在OleDb执行下Access ,程序不报错,但是Update也更新不成功的
    jQuery 1.4 版本的十五个新特性转载
  • 原文地址:https://www.cnblogs.com/sansancn/p/10914493.html
Copyright © 2011-2022 走看看