实现效果：

实现原理：

　　给关闭按钮绑定点击事件，点击以后触发动画效果。利用jQuery的animate方法，先让显示天气的盒子高度变为0，接着让整个包含天气和事件的盒子宽度变为0，最后通过将display属性值设为none，使得close按钮消失。

实现代码：

<!DOCTYPE html>

<html>

<head>

	<title>仿360开机效果</title>

	<meta charset="utf-8">

	<style type="text/css">

		*{

			padding: 0;

			margin: 0;

		}

		.box{

			width: 320px;

			position: fixed;

			bottom: 0;

			right: 0;

			box-shadow: 1px 1px 10px #2d2d2d;

		}

		#close{

			position: absolute;

			top: 0;

			right: 0;

			width: 30px;

			height: 20px;

			cursor: pointer;

			background-color: red;

			color: pink;

			font-weight: bold;

			text-align: center;

		}

		.hd{

			width: 320px;

			height: 300px;

			background-color: #03c03c;

			color: #fff;

			font-size: 70px;

			line-height: 300px;

			text-align: center;

		}

		.bd{

			width: 320px;

			height: 100px;

			background-color: #fffc00;

			font-size: 30px;

			line-height: 100px;

			text-align: center;

		}

	</style>

</head>

<body>

<div class="box">

	<span id="close">X</span>

	<div class="hd" id="t">1分12秒</div>

	<div class="bd" id="b">天气：晴天</div>

</div>

<!-- 引入jQuery -->

<script type="text/javascript" src="./jquery1.0.0.1.js"></script>

<script type="text/javascript">

	window.onload = function(){

		var close = document.getElementById("close");

		var box = close.parentNode;

		var b = document.getElementById("b");

		// 给关闭按钮绑定点击事件

		close.onclick = function(){

			animate(b, {"height":0}, function(){

				animate(box,{"width":0});

			});

			close.style.display = "none";

		}

	}

</script>

</body>

</html>

　　

【前端】javascript+jQuery实现360开机时间显示效果的更多相关文章

  1. 【JavaScript&jQuery】前端资源大全

    综合类 综合类 地址 前端知识体系 http://www.cnblogs.com/sb19871023/p/3894452.html 前端知识结构 https://github.com/Jackson ...

  2. Handlebars的基本用法 Handlebars.js使用介绍 http://handlebarsjs.com/ Handlebars.js 模板引擎 javascript/jquery模板引擎——Handlebars初体验 handlebars.js 入门(1) 作为一名前端的你,必须掌握的模板引擎:Handlebars 前端数据模板handlebars与jquery整

    Handlebars的基本用法 使用Handlebars,你可以轻松创建语义化模板,Mustache模板和Handlebars是兼容的,所以你可以将Mustache导入Handlebars以使用 Ha ...

  3. 在C#后端处理一些结果然传给前端Javascript或是jQuery

    在C#后端处理一些结果然传给前端Javascript或是jQuery,以前Insus.NET有做过一个例子<把CS值传给JS使用 >http://www.cnblogs.com/insus ...

  4. 【前端】javascript+jQuery实现旋转木马效果轮播图slider

    实现效果: 实现原理: 技术栈: javascript+jQuery+html+css 实现步骤: // 0. 获取元素 // 1. 鼠标放置到轮播图上,显示两侧的控制按钮,移开后隐藏 // 2. 为 ...

  5. Web前端-JavaScript基础教程上

    Web前端-JavaScript基础教程 将放入菜单栏中,便于阅读! JavaScript是web前端开发的编程语言,大多数网站都使用到了JavaScript,所以我们要进行学习,JavaScript ...

  6. Fundebug前端JavaScript插件更新至1.2.0

    摘要: Fundebug的前端JavaScript错误监控插件更新至1.2.0:支持监控WebSocket连接错误:修复了监控unhandledrejection错误的BUG,即未用catch处理的P ...

  7. 前端：jQuery笔记

    前端:jQuery笔记 此系列文章乃是学习jQuery的学习笔记. Asp.net MVC Comet推送 摘要: 一.简介 在Asp.net MVC实现的Comet推送的原理很简单. 服务器端:接收 ...

  8. Python web前端 09 jQuery

    Python web前端 09 jQuery 一.三个重要网址 http://jquery.cuishifeng.cn/ #中文查询网站 http://www.bootcdn.cn/ #引入jq ht ...

  9. 前端技术Jquery与Ajax使用总结

    前端技术Jquery与Ajax使用总结 虽然主要是做的后端,但是由于有些时候也要写写前台的界面,因此也就学习了下Jquery和Ajax的一些知识,虽说此次写的这些对于前端大神来说有些班门弄斧的感觉,但 ...

随机推荐

  1. the command line tools

    PhpStorm 10.0.2 http://stackoverflow.com/questions/22572861/error-cant-use-subversion-command-line-c ...

  2. 【Git 使用笔记】第二部分：基本命令 和 单分支开发

    git 基本命令 git add . git commit -am "请填写你NB的备注" git fetch --all git fetch -p  //如果远程分支删除了,本地 ...

  3. http_build_query

    http_build_query (PHP 5) http_build_query -- 生成 url-encoded 之后的请求字符串描述string http_build_query ( arra ...

  4. MySQL中死锁

    1 .死锁的概念 是指两个或两个以上的事务在执行过程中,因争夺资源而造成的一种互相等待的现象.若无外力作用,事务都将无法推进下去,解决死锁的最简单问题是不要有等待,任何的等待都转换为回滚,并且事务重新 ...

  5. Java bytesToHexString 解析

    一.代码 /** * Convert byte[] to hex string * * @param src byte[] data * @return hex string */ public st ...

  6. javaScript高级教程(五) Event Flow

    1.两个阶段三个模型:Netscape支持事件捕获,IE支持事件冒泡,w3c是先捕获后冒泡 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 S ...

  7. Spark Sort Based Shuffle内存分析

    分布式系统里的Shuffle 阶段往往是非常复杂的,而且分支条件也多,我只能按着我关注的线去描述.肯定会有不少谬误之处,我会根据自己理解的深入,不断更新这篇文章. 前言 借用和董神的一段对话说下背景: ...

  8. 使用Fiddler手机抓包https-----重要

    Fiddler不仅可以对手机进行抓包,还可以抓取别的电脑的请求包,今天就想讲一讲使用Fiddler手机抓包! 使用Fiddler手机抓包有两个条件: 一:手机连的网络或WiFi必须和电脑(使用fidd ...

  9. 剑指offer2

    请实现一个函数,将一个字符串中的字符串空格替换成“%20”.例如:“We Are Happy”转化后为“We%20Are%20Happy” 思路:把字符串转化成字符数组,判断这个字符是不是空格,如果是 ...

  10. SQL 中【NULL】和【无】烦躁的问题

    很烦躁,烦躁的很,总结一下. 先简单的说下: NULL   : 不确定的东西 无       :没有东西 复杂的见下文....... 一 .null值 下面举个最简单的例子,平常工作当中肯定比这个sq ...