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模拟一个案例.当点击提交按钮时会把输入的数据提交到后台,然后从后台获取数据在客户端显示. 效果如下: ...
随机推荐
- code1001 舒适的路线
n次最小生成树kruskal 将所有的边排序,权值小的在前. 设排序后第i条边为路径中的最长边,那么这条路径一定是由1~i中的一些边组成 因为最高速和最低速的差尽量小,最高速确定了,最低速应尽量大. ...
- [Jenkins]怎样在Jenkins上面启动服务器上的批处理脚本
New Item 在Build --> Execute Windows batch command --> 里面填写: schtasks /run /tn Start_Hub_szotqa ...
- 如何把App放在服务器上供用户下载
如何把App放在服务器上供用户下载 有时候做了个简单的App想把App给朋友帮忙测试一下,却发现上传到各种平台很麻烦,肿么办?难道一个个拷贝,那也太low啦,不是咱程序员该干的事儿,好的话不多说,开搞 ...
- （转）【经验之谈】Git使用之TortoiseGit配置VS详解
原文地址:http://www.cnblogs.com/xishuai/p/3590705.html 前言 上一篇<[经验之谈]Git使用之Windows环境下配置>: 安装 配置和使用 ...
- Task的运行原理和工作窃取（work stealing）
在net4.0以前,当调用ThreadPool.QueueUserWorkItem方法往线程池中插入作业时,会把作业内容(其实就是一个委托)放到线程池中的一个全局队列中,然后线程池中的线程按照先进先出 ...
- 关于：Warning: skipping non-radio button in group的处理方法整理
下面讲的是一个意思: The problem is that the next control in the tab order following the last radio button of ...
- type="submit" 和type="button"
今天,小菜鸟又遇到一个问题,当不小心在页面输入框回车一下,结果莫名的页面发出了一个请求. 把问题定位在一个button上,代码是这样写的<button class="btn btn-d ...
- 用shell脚本 计算两个数的加减乘除取余
#! /bin/bash # read -p '请输入数:' a //输入 read -p '请输入数:' b echo '$a+$b=' $(( a + b )) //输出 echo '$a-$b= ...
- 如何注册GitHub
一.个人介绍 姓名:张志龙 学号:1413042026 班级:网工141 爱好:宅物 能力:c++编程 二.注册 注册GitHub其实很简单 首先我们要做的是打开官网 www.github.com(如 ...
- Tempdb--TempDB Basic
1. TempDB只能运行在Simple Recovery Model下 2. 由于TempDB不需要Recovery,因此在TempDB中发生的操作不需要REDO,因此在日志记录上有别于其他数据库. ...