jquery json实现面向对象 百度十二星座
效果：
源码：
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>百度星座</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.clearfix:after{
content: "";
display: block;
clear: both;
height: 0;
line-height: 0;
visibility: hidden;
}
.clearfix{
zoom: 1;
}
ul{
list-style: none;
}
button{
border: none;
outline: none;
cursor: pointer;
}
body{
background: url("img/bg.jpg") no-repeat;
background-size: cover;
-webkit-background-size: cover;
}
.logo{
width: 270px;
margin: 30px auto 0;
}
.logo img{
width: 270px;
height: 129px;
}
.links{
width: 600px;
margin: 0px auto;
}
.links li{
float: left;
}
.links li a{
color: #fff;
padding: 0 10px;
}
.search{
width: 640px;
margin: 10px auto;
}
.search input{
width: 536px;
height: 40px;
border: none;
outline: none;
}
.search button{
width: 104px;
height: 40px;
background-color: #DDD;
}
.container{
width: 888px;
margin: 40px auto;
}
.container .menu{
float: left;
width: 80px;
height: 318px;
background-color: rgba(0,0,0,.4 );
}
.container .menu a{
display: block;
font-weight: bold;
color: #fff;
text-decoration: none;
width: 80px;
height: 35px;
line-height: 35px;
text-align: center;
}
.container .menu a.active{
background-color: #A4A5A7;
}
.container .card{
float: left;
margin-left: 20px;
width: 768px;
height: 278px;
background-color: rgba(255,255,255,.6);
padding: 20px 0 20px 20px;
}
.container .card li{
width: 170px;
height: 50px;
border: 1px solid #fff;
float: left;
margin: 0px 20px 20px 0;
/*background: url("img/xingzuo.png") no-repeat 0 0;*/
position: relative;
}
.container .card li a{
display: block;
width: 100px;
height: 30px;
padding: 3px 0 10px 70px;
text-decoration: none;
color: #000;
}
.container .card li div{
position: absolute;
top: -1px;
right: -1px;
height: 0;
width: 30px;
height: 30px;
background: url("img/xingzuo.png") no-repeat 0 -624px;
cursor: pointer;
display: none;
}
.container .card li div.mark{
display: block;
}
.container .card .bottom{
border-top: 1px solid #fff;
width: 748px;
}
.container .card .bottom button{
display: block;
width: 80px;
height: 30px;
color: #fff;
background-color: #389CFF;
margin: 20px auto;
}
</style>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript" src="index.js"></script>
</head>
<body>
<div class="logo">
<img src="img/logo_white.png" alt="">
</div>
<div class="links clearfix">
<ul>
<li><a href="http://news.baidu.com" target="_blank">新闻</a></li>
<li><a href="http://www.baidu.com" target="_blank">网页</a></li>
<li><a href="http://tieba.baidu.com" target="_blank">贴吧</a></li>
<li><a href="http://zhidao.baidu.com" target="_blank">知道</a></li>
<li><a href="http://music.baidu.com" target="_blank">音乐</a></li>
<li><a href="http://image.baidu.com" target="_blank">图片</a></li>
<li><a href="http://v.baidu.com" target="_blank">视频</a></li>
<li><a href="http://map.baidu.com" target="_blank">地图</a></li>
<li><a href="http://baike.baidu.com" target="_blank">百科</a></li>
<li><a href="http://wenku.baidu.com" target="_blank">文库</a></li>
<li><a href="http://www.baidu.com/more/" target="_blank">更多>></a></li>
</ul>
</div>
<div class="search">
<input type="text" name="question"><button type="submit">百度一下</button>
</div>
<div class="container">
<div class="menu">
<ul>
<li><a href="javascript:;">导航</a></li>
<li><a href="javascript:;">音乐</a></li>
<li><a href="javascript:;">新闻</a></li>
<li><a href="javascript:;" class="active">星座</a></li>
</ul>
</div>
<div class="card">
<div class="xingzuo clearfix" id="xz"></div>
<div class="bottom">
<button>确定</button>
</div>
</div>
</div>
</body>
</html>
index.js
$(function () {
var datas = [{
name : "白羊座",
date : "3.21-4.19"
},{
name : "金牛座",
date : "4.20-5.20"
},{
name : "双子座",
date : "5.21-6.21"
},{
name : "巨蟹座",
date : "6.22-7.22"
},{
name : "狮子座",
date : "7.23-8.22"
},{
name : "处女座",
date : "8.23-9.22"
},{
name : "天秤座",
date : "9.23-10.23"
},{
name : "天蝎座",
date : "10.24-11.22"
},{
name : "射手座",
date : "11.23-12.21"
},{
name : "摩羯座",
date : "12.22-1.19"
},{
name : "水瓶座",
date : "1.20-2.18"
},{
name : "双鱼座",
date : "2.19-3.20"
}];
var str = "<ul>";
for(var i=0;i<datas.length;i++){
str += "<li>";
str += "<a href='#'>"+datas[i].name+"<br>"+datas[i].date+"</a>";
str += "<div></div></li>";
}
str += "</ul>";
$("#xz").html(str);
$("#xz li").each(function (i) {
$("#xz li:eq("+i+")").css("background","url('img/xingzuo.png') no-repeat 0 -"+(52*i)+"px");
})
$("#xz li").click(function () {
$(this).children("div").toggleClass("mark");
});
})
图片：
jquery json实现面向对象 百度十二星座的更多相关文章
- struts2 + jquery + json 简单的前后台信息交互
ajax 是一种客户端与服务器端异步请求的交互技术.相比同步请求,大大提高了信息交互的速度和效率.是当下非常实用和流行的技术. 这里简单的说明 struts2 + jquery + json 下的 信 ...
- Json 基于jQuery+JSON的省市联动效果
helloweba.com 作者:月光光 时间:2012-09-12 21:57 标签: jQuery JSON Ajax 省市联动 省市区联动下拉效果在WEB中应用非常广泛,尤其在一些 ...
- JQuery + JSON作为前后台数据交换格式实践
JQuery + JSON作为前后台数据交换 JQuery提供良好的异步加载接口AJAX,可以局部更新页面数据, http://api.jquery.com/category/ajax/ JSON作为 ...
- jQuery: jquery.json.js
http://api.jquery.com/jQuery.parseJSON/ http://www.json.org/json-zh.html http://fineui.codeplex.com/ ...
- struts2+jquery+json集成
以下采用struts2+jquery+json模拟一个案例.当点击提交按钮时会把输入的数据提交到后台,然后从后台获取数据在客户端显示. 效果如下: 接下来为struts2+jquery+json集成步 ...
- jQuery+JSON+jPlayer实现QQ空间音乐查询
演示地址: http://bejson.com/demos/qqmusic/ 代码下载:http://www.jqdemo.com/932.html 查询QQ音乐是很早前就出来的一个接口. 这里使用j ...
- echart+jquery+json统计TP数据
由于工作需要,需要统计交易数据的TP50,TP90,TP95,TP99.采用的前端技术是jquery+json+echart. 一.TP定义(谷歌) Calculating TP is very si ...
- Struts2+JQuery+Json登陆实例
Struts2+JQuery+Json登陆实例 博客分类: Struts2 在搭建之前.. 首先,需要准备struts2.0框架的5个核心包, 以及jsonplugin-0.32.jar 以及js ...
- 留存： struts2+jquery+json集成
原文地址:struts2+jquery+json集成 以下采用struts2+jquery+json模拟一个案例.当点击提交按钮时会把输入的数据提交到后台,然后从后台获取数据在客户端显示. 效果如下: ...
随机推荐
- Kafka管理工具介绍
Kafka内部提供了许多管理脚本,这些脚本都放在$KAFKA_HOME/bin目录下,而这些类的实现都是放在源码的kafka/core/src/main/scala/kafka/tools/路径下. ...
- python简单爬虫(一)
学习python前纠结了下,到底是应该一个个知识点吃透,然后写些小程序.还是应该快速掌握基础语法,快速实践.思考后认为前者这么学习速度真心不高,于是花2天时间看了下python3的语法,虽然很多都不明 ...
- Java Thread系列（十）Future 模式
Java Thread系列(十)Future 模式 Future 模式适合在处理很耗时的业务逻辑时进行使用,可以有效的减少系统的响应时间,提高系统的吞吐量. 一.Future 模式核心思想 如下的请求 ...
- scrollView不能进行滚动
原因:scrollView里只能包含一个layout,多个时,是不能进行滚动的.
- 团队作业7——alpha阶段之事后诸葛亮分析
事后诸葛亮分析 1. 设想和目标 1.1 我们的软件要解决什么问题?是否定义得很清楚?是否对典型用户和典型场景有清晰的描述? 解决查询物流信息步骤繁琐的问题.定义还算清楚.典型用户主要针对一些不熟悉淘 ...
- UVa 818Cutting Chains （暴力dfs+位运算+二进制法）
题意:有 n 个圆环,其中有一些已经扣在一起了,现在要打开尽量少的环,使所有的环可以组成一条链. 析:刚开始看的时候,确实是不会啊....现在有点思路,但是还是差一点,方法也不够好,最后还是参考了网上 ...
- Zend_Application 流程详解
本周没什么工作,zend 系统性的东西渐渐忘记,抽时间整理一下代码!Zend_Application 负责加载配置以及初始化资源,所以index.php 会有这行代码 /** Zend_Applica ...
- 寻找最大的K个数（下）
接着昨天的写,里面的代码包含昨天的 #include <iostream> using namespace std; #define N 50 //初始化数组 , , , , , , , ...
- SQL描述（2）
很久之前就想写出来,就是因为自己太懒,憋了怎么久.本文关于使用ORACLE分析函数对一些经济指标进行计算.表indi_value有3个关键的字段:indi_date,indi_value,indi_i ...
- [label][phalcon] How to install Phalcon extension for Zend Server 6.3.0 for windows 7 64bit
At first , you should download Phalcon DLL file. You can download from this link under. http://stati ...