javascript笔记:拷贝出腾讯微博关于London2012奥运会的拉绳开关的网页特效

本文主要是介绍javascript笔记:拷贝出腾讯微博关于London2012奥运会的拉绳开关的网页特效,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

  奥运会正在进行中,各大网站都因为这盛会有所改版或者是拿出了自己的新的页面特效。其中最牛叉的还是谷歌,如下图:

  可以用键盘控制的小游戏,看看它的源码:

<div id="hplogo" tabindex="0" dir="ltr" aria-label="跨栏" style="cursor: pointer;">
<canvas style="position: absolute;" height="207" width="530"></canvas>
.....

  canvas,html5....,拷贝它的代码还是有点难度了。

  但是我在国外的网站里还是发现了一个我感兴趣的特效,就是腾讯微博里的"拉绳开关"的换肤效果,这个比较简单,我把代码“抠 ”了出来。

  

  首先介绍小这个网页特效的效果,点击“London 2012”吊环图标,图标会下拉绳,释放鼠标后,页面背景会换成中国奥运军团的图 片,此时吊环下方,会有一个“还原”按钮,点击“还原”按钮,背景恢复到原来背景,继续点击拉绳吊环,背景图片会在不同的 奥运图片间切换,鼠标移到拉绳上方,鼠标变成剪刀样式,点击,吊环会以自由落体的方式坠落,最后消失。

  以上效果我都拷贝出来了,还是比较简单的,源码如下:

  首先还是目录结构:

  main.css的代码:

body {background-color:#999;color: #333333;font: 12px/1.75 Tahoma,Arial,sans-serif;
}
body {background:url(../images/wrapbg_v0.0.1.jpg) no-repeat scroll center top #73CFF1;color: #333333;font: 12px/1.75 Tahoma,Arial,sans-serif;height: 100%;
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, input, textarea, p, blockquote, th, td {margin: 0;padding: 0;
}
.nv_toogle_w {height: 0;margin: 0 auto;position: relative;width: 960px;
}
a, .c_tx {text-decoration: none;
}
a, .c_tx {color: #006A92;
}
.nv_toggle_btn, .nv_arrow_wpd, .nv_arrow_lab, .nv_arrow_message {background:url(../images/guide_icon.png) no-repeat scroll 0 0 transparent;
}
.nv_toggle_btn {background-position: -195px 0;cursor: pointer;display: block;height: 111px;position: absolute;right: -31px;text-indent: -9999px;top: -35px;width: 23px;z-index: 5;
}
.nv_toggle_btn_oly2012 {background: url("../images/nv_toggle_btn_oly2012.png") no-repeat scroll 0 0 transparent;height: 206px;right: -44px;top: -73px;width: 29px;
}
.headWrap a {color: #C9C9C9;
}
.headWrap a:hover {text-decoration: none;
}
.nv_toggle_btn span {display: block;
}
.nv_toggle_reset {color: #FECCF3 !important;position: absolute;right: -43px;top: 138px;
}
.nv_toggle_reset, .nv_toggle_reset span, .nv_toggle_reset b {display: block;height: 26px;width: 27px;
}
.nv_toggle_reset span {cursor: pointer;line-height: 26px;position: relative;text-align: center;z-index: 5;
}
.nv_toggle_reset b {background: none repeat scroll 0 0 #E33194;left: 0;opacity: 0.63;position: absolute;top: 0;z-index: 0;
}
.nv_toggle_cut {cursor: url("http://mat1.gtimg.com/www/mb/images/cut_c.cur"), pointer;display: block;height: 19px;position: absolute;right: -44px;top: 0;width: 29px;z-index: 10;
}

  main.js的代码:

var picInd = 0;
$(document).ready(function() {$("#nv_toogle_w").bind("mousedown",function(){ $(this).animate({top:"20px"},"normal");});$("#nv_toogle_w").bind("mouseup",function(){getRandomNum();$("body").attr("class","");$("body").addClass("body" + picInd);$(this).animate({top:"0px"},"normal");$("#nv_toogle_w2").css("display","block");});$("#nv_toogle_w2").bind("click",function(){$("body").attr("class","");$("#nv_toogle_w2").css("display","none");});$("#nv_toggle_cut").bind("click",function(){$("#nv_toogle_w").animate({top:"300px"},"4000");$("a[boss='btnWideGuideBtn']").animate({opacity:"0"},"3000");$("#nv_toogle_w2").css("display","none").delay(6999);});
});function getRandomNum(){while(true){var curInd = Math.floor(Math.random() * 8 + 1);if (picInd != 0 || picInd != curInd){picInd = curInd;break;    }}
}

  qq01.html的代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>QQ Study 01</title>
</head>
<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<link type="text/css" rel="stylesheet" href="css/main.css" />
<style type="text/css">
.body1{background:url(images/bg/ldyx.jpg) no-repeat fixed center top #EFEFEF;    
}
.body2{background: url(images/bg/aycg_120802.jpg) no-repeat fixed center top #000000;
}
.body3{background: url(images/bg/jqsc.jpg) no-repeat fixed center top #000000;
}
.body4{background: url(images/bg/bg2.jpg) no-repeat fixed center top #1D1D1D;
}
.body5{background: url(images/bg/bg3.jpg) no-repeat fixed center top #1D1D1D;
}
.body6{background: url(images/bg/bg4.jpg) no-repeat fixed center top #1D1D1D;
}
.body7{background: url(images/bg/mlld.jpg) no-repeat fixed center top #429FDE;
}
.body8{background: url(images/bg/bg.jpg) no-repeat fixed center top #000000;
}
</style>
<body><div class="nv_head_wrap"><div title="拉一下换肤" style="top: 0px;" id="nv_toogle_w" class="nv_toogle_w"><a boss="btnWideGuideBtn" class="nv_toggle_btn nv_toggle_btn_oly2012"href="#"><span>new</span></a></div><div style="position:relative" class="nv_toogle_w"><a id="nv_toogle_w2" style="display: none;" class="nv_toggle_reset" href="#"><span>还原</span><b></b></a><a id="nv_toggle_cut" class="nv_toggle_cut" title="永久关闭此功能" href="#"></a></div><div></div></div>
</body>
</html>

下载链接:

http://files.cnblogs.com/sharpxiajun/myQQ.zip

 

 

 

 

 

 

 

这篇关于javascript笔记:拷贝出腾讯微博关于London2012奥运会的拉绳开关的网页特效的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/164855

相关文章

Java堆转储文件之1.6G大文件处理完整指南

《Java堆转储文件之1.6G大文件处理完整指南》堆转储文件是优化、分析内存消耗的重要工具,:本文主要介绍Java堆转储文件之1.6G大文件处理的相关资料,文中通过代码介绍的非常详细,需要的朋友可... 目录前言文件为什么这么大?如何处理这个文件?分析文件内容(推荐)删除文件(如果不需要)查看错误来源如何避

SpringBoot整合Dubbo+ZK注册失败的坑及解决

《SpringBoot整合Dubbo+ZK注册失败的坑及解决》使用Dubbo框架时,需在公共pom添加依赖,启动类加@EnableDubbo,实现类用@DubboService替代@Service,配... 目录1.先看下公共的pom(maven创建的pom工程)2.启动类上加@EnableDubbo3.实

SpringBoot整合(ES)ElasticSearch7.8实践

《SpringBoot整合(ES)ElasticSearch7.8实践》本文详细介绍了SpringBoot整合ElasticSearch7.8的教程,涵盖依赖添加、客户端初始化、索引创建与获取、批量插... 目录SpringBoot整合ElasticSearch7.8添加依赖初始化创建SpringBoot项

JAVA覆盖和重写的区别及说明

《JAVA覆盖和重写的区别及说明》非静态方法的覆盖即重写,具有多态性;静态方法无法被覆盖,但可被重写(仅通过类名调用),二者区别在于绑定时机与引用类型关联性... 目录Java覆盖和重写的区别经常听到两种话认真读完上面两份代码JAVA覆盖和重写的区别经常听到两种话1.覆盖=重写。2.静态方法可andro

SpringBoot中六种批量更新Mysql的方式效率对比分析

《SpringBoot中六种批量更新Mysql的方式效率对比分析》文章比较了MySQL大数据量批量更新的多种方法,指出REPLACEINTO和ONDUPLICATEKEY效率最高但存在数据风险,MyB... 目录效率比较测试结构数据库初始化测试数据批量修改方案第一种 for第二种 case when第三种

Java docx4j高效处理Word文档的实战指南

《Javadocx4j高效处理Word文档的实战指南》对于需要在Java应用程序中生成、修改或处理Word文档的开发者来说,docx4j是一个强大而专业的选择,下面我们就来看看docx4j的具体使用... 目录引言一、环境准备与基础配置1.1 Maven依赖配置1.2 初始化测试类二、增强版文档操作示例2.

一文详解如何使用Java获取PDF页面信息

《一文详解如何使用Java获取PDF页面信息》了解PDF页面属性是我们在处理文档、内容提取、打印设置或页面重组等任务时不可或缺的一环,下面我们就来看看如何使用Java语言获取这些信息吧... 目录引言一、安装和引入PDF处理库引入依赖二、获取 PDF 页数三、获取页面尺寸(宽高)四、获取页面旋转角度五、判断

Spring Boot中的路径变量示例详解

《SpringBoot中的路径变量示例详解》SpringBoot中PathVariable通过@PathVariable注解实现URL参数与方法参数绑定,支持多参数接收、类型转换、可选参数、默认值及... 目录一. 基本用法与参数映射1.路径定义2.参数绑定&nhttp://www.chinasem.cnbs

JAVA中安装多个JDK的方法

《JAVA中安装多个JDK的方法》文章介绍了在Windows系统上安装多个JDK版本的方法,包括下载、安装路径修改、环境变量配置(JAVA_HOME和Path),并说明如何通过调整JAVA_HOME在... 首先去oracle官网下载好两个版本不同的jdk(需要登录Oracle账号,没有可以免费注册)下载完

Spring StateMachine实现状态机使用示例详解

《SpringStateMachine实现状态机使用示例详解》本文介绍SpringStateMachine实现状态机的步骤,包括依赖导入、枚举定义、状态转移规则配置、上下文管理及服务调用示例,重点解... 目录什么是状态机使用示例什么是状态机状态机是计算机科学中的​​核心建模工具​​,用于描述对象在其生命