Create your Gitee Account
Explore and code with more than 12 million developers,Free private repositories !:)
Sign up
文件
This repository doesn't specify license. Please pay attention to the specific project description and its upstream code dependency when using it.
Clone or Download
science.html 5.60 KB
Copy Edit Raw Blame History
Your Name authored 2018-04-26 23:25 . add
<!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>
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化