zoukankan      html  css  js  c++  java
  • jquery使用 滚动 css 小hack

    <!DOCTYPE HTML>
    <html dir="ltr" lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
        <style type="text/css">
            ul.nav{overflow: hidden;padding: 0;}
            ul li{list-style: none;float: left;width: 30px;padding: 5px;background: silver;cursor: pointer;margin-right: 10px;text-align: center;}
            .context{clear: both;width: 800px;overflow: hidden;position: absolute;}
            .context>div{width: 162px;padding:18px;border: solid 1px #ccc;float: left;overflow: hidden;}
            .active{color: yellow;}
            #content-wrap{width: 200px;overflow: hidden;position: relative;height: 58px;}
    
            body{position: static;}
            .icon{position: absolute;top:116px;}
            .icon .md1{color: #999;display: block;border-color: #ccc transparent transparent transparent;border-width: 18px;border-style: solid;width: 0;height: 0;}
            .icon .md2{color: #999;display: block;border-color: #fff transparent transparent transparent;border-width: 18px;border-style: solid;width: 0;height: 0;margin-top: -37px;}
        </style>
    </head>
    <body>
        <ul class="nav">
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
        <div id="content-wrap">
            <div class="context">
                <div>this is demo1</div>
                <div>this is demo2</div>
                <div>this is demo3</div>
                <div>this is demo4</div>
            </div>
        </div>
        <script type="text/javascript">
            $(document).ready(function(){
                $(".nav li").click(function(event){
                    if($(this).hasClass('active')){
                        return false;
                    }
                    $(".nav li.active").removeClass("active");
                    $(this).addClass("active");
    
                    var index=$(this).index(".nav li");
                    var offset=index*-200;
                    $(".context").animate({left:offset},540)
                })
            })
        </script>
        <div class="icon">
            <span class="md1"></span>
            <span class="md2"></span>
        </div>
    </body>
    </html>
  • 相关阅读:
    jQuery——通过Ajax发送数据
    Python爬虫入门教程 71-100 续上篇,python爬虫爬取B站视频
    实战演练:PostgreSQL在线扩容
    直播丨Oracle比特币勒索&数据库大咖讲坛
    使用seaborn绘制强化学习中的图片
    nginx stream模块
    工具用的好下班走的早
    10年大数据平台经验,总结出这份数据建设干货(内含多张架构图)
    nginx 配置4层转发
    详解pytorch中的max方法
  • 原文地址:https://www.cnblogs.com/wangwenfei/p/jquery_scroll.html
Copyright © 2011-2022 走看看