`
Cb123456
  • 浏览: 63762 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

360换机特效

    博客分类:
  • web
阅读更多

360换机主页:

   http://huanji.360.cn/

实现的效果:

   随着滚动轮的滚动,进行背景图片的切换,还有那个绿色的小点的切换.

 

官网图:

  
  

实现的效果图:

 1. 
 

 2.

 
 

 

 ......

 

 代码:

 

<!doctype html>
<html>
<head>

  <meta charset="gbk"/>
  <title>360换机</title>

<style>
/*去掉白边的*/
*{padding:0;margin:0;}

html,body,#content{
width:100%;
height:100%;
}
.size{
 width:100%;height:100%;
}
.div1{
 background:url("img/1.jpg") center fixed;
}
.div2{
 background:url("img/2.jpg") center fixed;
}
.div3{
 background:url("img/3.jpg") center fixed;
}
.div4{
 background:url("img/4.jpg") center fixed;
}

#photo{
width:100px;
height:325px;
top:30%;
left:60px;
position:fixed;
background:url("img/nav.png") no-repeat;
}

#photo ul{
list-style:none;
font-size:15px;
margin-top:10px;

}

#photo ul li{
margin-bottom:55px;
padding-left:30px;
line-height:21px;
Color:white;
}
#photo ul li.cho{
background:url("img/nav_cur.png") no-repeat 0 0;

}

</style>
<script src="js/jquery1.42.min.js">
</script>

</head>


<body>
  <div id="content">
     <div class="div1 size"></div>
     <div class="div2 size"></div>
     <div class="div3 size"></div>
     <div class="div4 size"></div>
  </div>
  
    <!--左侧状态栏-->
  <div id="photo">
      <ul>
      <li class="cho">安全换机</li>
	  <li>无网对传</li>
	  <li>隐私粉碎</li>
	  <li>一键刷机</li>
	</ul>
  </div>
  <!--左侧导航栏end-->
</body>

</html>
<script>
 window.onload=function(){
 
    $(window).scroll(function(){
	    var n=$(window).scrollTop()/$(window).height();
	     $("#photo ul li").eq(n).addClass("cho").siblings().removeClass("cho");
	
	})
 
 
 }


</script>

 
 实现的巧妙之处在于:把那个绿色的小点的图片放在<li>标签中,然后根据n(第几个屏)的和第几个<li>标签进行比较.

 
 

  • 大小: 79.5 KB
  • 大小: 16.2 KB
  • 大小: 28.5 KB
1
1
分享到:
评论

相关推荐

    Bigasoft Total Video Converter(视频转换) v5.0.8.zip

    * 支持从众多的设备中直接读取和转换视频,如手机, PDA, PSP, iPod, iPhone, BlackBerry, Xbox, Xbox 360, PS3, Archos, Creative Zen, iRiver, television, Apple TV 等。 03. 音频格式转换 * 支持转换:MP3, WMA...

    万能视频转换软件 2.9.0.0

    该软件还提供了视频合成、剪切、裁剪、特效处理、水印添加、反交错等诸多视频编辑功能。主要应用: 1、视频格式与播放器不兼容,该软件支持输入的格式包括:wmv/xwmv/avi/flv/m2ts/mts/m4v/mkv/mov/qt/mpg/mpeg/m2v/...

    威力酷剪 3 CyberLink ActionDirector Ultra 3.0.3429.0 中文多语免费版.zip

    完整支持360º视频剪辑项目,从汇入等距长方投影格式视频、裁剪素材,活用设计工具编辑、添加转场特效、文字标题,最后输出360º影像格式或上传分享至Facebook和YouTube。 用不同视角说故事全新 将360º视频转换为...

    b-total-video-converter-2.5.5.3960

    * 支持从众多的设备中直接读取和转换视频,如手机, PDA, PSP, iPod, iPhone, BlackBerry, Xbox, Xbox 360, PS3, Archos, Creative Zen, iRiver, television, Apple TV 等。 3. 音频格式转换 * 支持转换:MP3, WMA, ...

    视频转换工具 Bigasoft Total Video Converter 6.2.0.zip

    如:AVI, Xvid, DivX, H.264, MP4, 3GP, MKV, WMV, RM, FLV, MOV,苹果电视,Zune播放器,psp,PS3游戏机,掌上电脑等多种视频转换。 软件还提供了视频裁剪功能,用户可通过裁剪功能对添加的视频进行长短裁剪,点击...

    人机交互实验报告及实验结果.doc

    中北大学软件学院 实 验 报 告 专 业 软件工程 课程名称 人机交互 学 号 姓 名 辅导教师 何志英 成绩 "实验日期 "2012/3/13 "实验时间 "19:00-22:00 " "1实验名称 " "试验一:最新人机交互技术 " "2、实验目的 " ...

    OpenSceneGraph三维渲染引擎编程指南.pdf

    11.1.6 爆炸模拟示例 360 11.1.7 自定义粒子系统示例(一) 362 11.1.8 自定义粒子系统示例(二) 365 11.1.9 粒子系统的读取与保存 369 11.2 OSG阴影 372 11.2.1 osgShadow库 372 11.2.2 阴影示例 374...

    OpenSceneGraph三维渲染引擎编程指南

    11.1.6 爆炸模拟示例 360 11.1.7 自定义粒子系统示例(一) 362 11.1.8 自定义粒子系统示例(二) 365 11.1.9 粒子系统的读取与保存 369 11.2 OSG阴影 372 11.2.1 osgShadow库 372 11.2.2 阴影示例 374 第12...

    网上农大计算机应用基础在线作业d.doc

    媒体播放机可以用于为视频文件添加视频特效 媒体播放机可用于播放DVD 媒体播放机可以用不同的显示模式观看视频 媒体播放机既能够播放视频文件,也能够播放音频文件 本题分值: 5.0 用户得分: 5.0 用户解答: 媒体...

    jQuery轻量级跨平台响应式导航菜单插件Trunk.js源码.zip

    jQuery轻量级跨平台响应式导航菜单插件Trunk.js是一款非常实用的实现轻量级响应式跨平台的jQuery导航菜单...本代码适用浏览器:搜狗、360、FireFox、Chrome、Safari、Opera、傲游、世界之窗. 不支持IE8及以下浏览器。

    光盘刻录编辑工具 Nero 2020 Platinum 20.0.01700 中文多语免费版.zip

    通过快捷或高级视频编辑功能,800 多种特效和电影模板,包括特效拖放窗口吸引您的观众。宽屏电视中的黑框现在也已成为过去时。通过边框一键消除功能,提升您的照片和视频素材,在大电视屏幕上智能呈现完美的电影体验...

    网上农大-计算机应用基础-在线作业-d.doc

    控制操作系统是否可以启动 本题分值: 5.0 用户得分: 5.0 用户解答: 限制用户对资源的使用权限 知识点: 本题分值: 5.0 用户得分: 5.0 用户解答: 媒体播放机可以用于为视频文件添加视频特效 知识点: 10....

    vc++ 应用源码包_1

    VC++制作3D效果的旋转文字特效 VC++注册码加密源程序(含注册机、解密机) 压缩包内有两个源码包,一个是注册机源程序,另一个是解密机的源程序,一套完整的参考实例。 VC+MapX源码含GPS跟踪演示 VC3D 利用VC...

    Visual C#.NET 2008程序设计案例集锦 (源码)

    案例2.1 波形图特效 案例2.2 在图像中写入文字 案例2.3 图像缩放与翻转 .案例2.4 图像的涂沫 案例2.5 百叶窗图像效果 案例2.6 图像的纹理和遮罩动画效果 案例2.7 图像的积木和浮雕效果 案例2.8 文字的360°...

    applem2_20120610苹果引擎配套工具,内有登陆器配置

    1、增加脚本以送邮件命令SENDEMAIL 收件人(ALL 代表所有人 SELF 代表自己) 邮件标题 邮件内容(内容中填写 #10 代表换行符) 2、加强会员检测命令CHECKUSERDATE 列表文件 (&gt;,&lt;,=,?) 时间 变量1(保存已用时间) 变量2...

    .Net.Framework3.5开发技术详解[中文][PDF][VOL1]

    作为初学入门选择方向的好教材 许多技术人员在面对.NET Framework 3.0/3.5大量的新知识、新技术的时候感到彷徨,对自己现有的技术...19.4 基于状态机的工作流 405 19.5 工作流的持久化 406 19.6 工作流的XAML表示 407

    .Net.Framework3.5开发技术详解[中文][共二卷][PDF][VOL2]

    作为初学入门选择方向的好教材 许多技术人员在面对.NET Framework 3.0/3.5大量的新知识、新技术的时候感到彷徨,对自己现有的技术...19.4 基于状态机的工作流 405 19.5 工作流的持久化 406 19.6 工作流的XAML表示 407

Global site tag (gtag.js) - Google Analytics