master

分支 (1)

管理

管理

master

tencent_map_demo
/
science.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>玉米缺素图谱</title>
<link type="text/css" rel="stylesheet" href="css/style.css">
</head>

<body>
    <div class="science">
        <h3 class="science_tit">玉米缺素图谱</h3>

        <div class="science_inner clearfix">
            <ul class="science_left">
                <li class="on"><a href="javascript:;"><span></span><em>水稻</em></a></li>
                <li><a href="javascript:;"><span class="sci2"></span><em>玉米</em></a></li>
                <li><a href="javascript:;"><span class="sci3"></span><em>烟草</em></a></li>
                <li><a href="javascript:;"><span class="sci4"></span><em>油菜</em></a></li>
            </ul>
            <div class="science_right">

                <ul class="science_ul clearfix" style="display: block;">
                    <li><a href=""><img src="images/son.jpg"><em>缺磷的玉米植株</em></a></li>
                    <li><a href=""><img src="images/son.jpg"><em>缺磷的玉米植株</em></a></li>
                    <li><a href=""><img src="images/son.jpg"><em>缺磷的玉米植株</em></a></li>
                    <li><a href=""><img src="images/son.jpg"><em>缺磷的玉米植株</em></a></li>
                </ul>

                <ul class="science_ul clearfix">
                    <li><a href=""><img src="images/son.jpg"><em>缺磷的玉米植株</em></a></li>
                    <li><a href=""><img src="images/son.jpg"><em>缺磷的玉米植株</em></a></li>
                    <li><a href=""><img src="images/son.jpg"><em>缺磷的玉米植株</em></a></li>
                    <li><a href=""><img src="images/son.jpg"><em>缺磷的玉米植株</em></a></li>
                </ul>

                <ul class="science_ul clearfix">
                    <li><a href=""><img src="images/son.jpg"><em>缺磷的玉米植株</em></a></li>
                    <li><a href=""><img src="images/son.jpg"><em>缺磷的玉米植株</em></a></li>
                    <li><a href=""><img src="images/son.jpg"><em>缺磷的玉米植株</em></a></li>
                    <li><a href=""><img src="images/son.jpg"><em>缺磷的玉米植株</em></a></li>
                </ul>

                <ul class="science_ul clearfix">
                    <li><a href=""><img src="images/son.jpg"><em>缺磷的玉米植株</em></a></li>
                    <li><a href=""><img src="images/son.jpg"><em>缺磷的玉米植株</em></a></li>
                    <li><a href=""><img src="images/son.jpg"><em>缺磷的玉米植株</em></a></li>
                    <li><a href=""><img src="images/son.jpg"><em>缺磷的玉米植株</em></a></li>
                </ul>


            </div>
        </div>

        <!-- <div class="service">
            <input type="checkbox" id="menu" class="menuControl" checked="checked">
            <label for="menu">
                <div class="container">
                   筛选
                </div>
            </label>
            <ul class="items">
                  <li><a href="#">缺钾</a></li>
                  <li><a href="#">缺磷</a></li>
                  <li><a href="#">缺氮</a></li>

            </ul>
         </div> -->


         <div class="htmleaf-container">
        <div class="zhuan_box">
            <div class='share' id='ss_toggle' data-rot='180'>
                  <!-- <div class='circle'></div>
                  <div class='bar'></div> -->
                </div>
            <div id='ss_menu'>
               <div >
                <i class="fa fa-qq"><a href="">缺钾</a></i>
              </div>
              <div class="on">
                <i class="fa fa-weibo"><a href="">缺磷</a></i>
              </div>
              <div>
                <i class="fa fa-weixin"><a href="">缺氮</a></i>
              </div>

              <div class='menu'>

              </div>
            </div>
        </div>
    </div>


    </div>
</body>

</html>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>


<script type="text/javascript">

    $(function(){

        $('.science_left li').click(function(){
            $('.science_left li').removeClass('on')
            $('.science_ul').hide();
            var index=$('.science_left li').index(this);
            $('.science_left li').eq(index).addClass('on')
            $('.science_ul').eq(index).show()

        })
    })
</script>

<script>
    $(document).ready(function (ev) {
        var toggle = $('#ss_toggle');
        var menu = $('#ss_menu');
        var rot;

        $('#ss_toggle').on('click', function (ev) {
            rot = parseInt($(this).data('rot')) - 180;
            menu.css('transform', 'rotate(' + rot + 'deg)');
            menu.css('overflow', 'visible');
            menu.css('webkitTransform', 'rotate(' + rot + 'deg)');
            if (rot / 180 % 2 == 0) {
                toggle.parent().addClass('ss_active');
                toggle.addClass('close_line');
            } else {
                toggle.parent().removeClass('ss_active');
                toggle.removeClass('close_line');
               // menu.css('overflow', 'hidden');
            }
            $(this).data('rot', rot);

        });

        menu.on('transitionend webkitTransitionEnd oTransitionEnd', function () {
            if (rot / 180 % 2 == 0) {
                $('#ss_menu div i').addClass('ss_animate');
            } else {
                $('#ss_menu div i').removeClass('ss_animate');
            }
        });
    });
    </script>