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模拟一个案例.当点击提交按钮时会把输入的数据提交到后台,然后从后台获取数据在客户端显示. 效果如下: ...
随机推荐
- MySql创建多表关联的步骤
一,一对多表的创建 1.创建主表 create table HostTable( cid varchar(32) primary key, cname varchar(100)); 2.创建从表 cr ...
- 20172325《Java程序设计》第一周学习总结
20172325<Java程序设计>第一周学习总结 教材学习内容总结 第一章 1.1软件质量 软件工程是一门关于高质量软件开发的技术和理论的学科. 高质量软件的特征 1.2 数据结构 软件 ...
- HDU 3157 Crazy Circuits (有源汇上下界最小流)
题意:一个电路板,上面有N个接线柱(标号1~N) 还有两个电源接线柱 + - 然后是 给出M个部件正负极的接线柱和最小电流,求一个可以让所有部件正常工作的总电流. 析:这是一个有源汇有上下界的 ...
- bean 的各个属性
http://www.springframework.org/schema/beans/spring-beans.xsd org.springframework.beans.factory.confi ...
- JAVA内存管理再解
首先我们要明白一点,我们所使用的变量就是一块一块的内存空间!! 一.内存管理原理: 在java中,有java程序.虚拟机.操作系统三个层次,其中java程序与虚拟机交互,而虚拟机与操作系统间交 ...
- kali下搭建WiFi钓鱼热点
在linux下建立无线热点并不像在windows下开启网络共享或者使用无线网卡驱动设置AP模式即可. linux下的无线共享要用到两个软件:hostapd(创建无线热点).dnsmasq(dns服务和 ...
- Oracle Inventory Management Application Program Interface ( APIs) (Doc ID 729998.1)
In this Document Goal Solution References APPLIES TO: Oracle Inventory Management - Version 12.0.0 a ...
- 安装TestNG在eclipse中的插件
两种方法可以安装TestNG Eclipse插件: 第一种,离线安装 TestNG Eclipse插件下载地址http://testng.org/doc/download.html. 下载下来以后,放 ...
- Solr相似度算法四：IBSimilarity
Information based:它与Diveragence from randomness模型非常相似.与DFR相似度模型类似,据说该模型也适用于自然语言类的文本.
- solr特点三: 基于Solr实现排序定制化参考
排序实现有N种形式,最低成本.最快响应时间是目标 一份索引,支持N种排序策略并且在线互不干扰是要考虑的每一种实现,处理的场景是不同的,不要千篇一律 020排序,从索引到效果,有不少坑,这篇文章没有细说 ...