`
Cb123456
  • 浏览: 66119 次
  • 性别: 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
分享到:
评论

相关推荐

    js实现360度全景图片预览VR特效.zip

    总的来说,"js实现360度全景图片预览VR特效.zip"项目通过JavaScript和可能的第三方库,实现了在手机端的全景图片预览功能,结合用户交互,为用户提供了沉浸式的VR体验。理解并掌握这些技术,不仅可以提升Web开发技能...

    jQuery炫酷iPhone手机3D旋转互动特效

    【jQuery炫酷iPhone手机3D旋转互动特效】是一种利用JavaScript库jQuery实现的视觉效果,它为网页中的iPhone模型提供了一种动态的3D旋转展示。这个特效旨在提升用户体验,让用户能够通过鼠标操作从不同角度查看虚拟...

    网页模板——jQuery鼠标滑动眼镜店360度产品全景预览特效源码.zip

    该资源是一个基于jQuery的网页模板,专为眼镜店设计,实现了360度产品全景预览特效。这个特效能够提供给用户一个全方位、立体的产品查看体验,尤其对于展示眼镜这类需要详细观察细节的商品非常适用。下面我们将深入...

    HTML5+Three.js实现的360°全景线框3D动画特效源码.zip

    这个"HTML5+Three.js实现的360°全景线框3D动画特效源码.zip"是一个示例项目,展示了如何结合这两种技术来制作引人入胜的3D交互式效果。 首先,让我们深入了解HTML5的关键特性。HTML5引入了新的元素,如`&lt;canvas&gt;`...

    瀑布流图片无限加载页特效

    4. **跨浏览器兼容性**:这个特效宣称能支持IE、谷歌和360等主流浏览器,这意味着开发者可能使用了polyfill或条件语句来确保在不同浏览器上的兼容性,比如处理IE对某些CSS3属性或HTML5新特性不支持的情况。...

    FLASH 360全景展示

    5. **添加动画和特效**:如果需要,可以添加动画元素或特效,提高展示的吸引力和互动性。 6. **测试与发布**:完成设计后,进行测试以确保在不同设备和浏览器上的兼容性,然后发布到网上供用户访问。 在压缩包文件...

    js实现360度全景图片预览VR特效特效代码

    在这个场景下,我们讨论的是如何使用JavaScript来实现360度全景图片预览的VR(虚拟现实)特效,这是一种为手机用户设计的独特视觉体验。接下来,我们将深入探讨这个话题,包括基本原理、实现方法以及可能涉及的技术...

    VR电影手册|After Effects 360°后期插件汇总.pdf

    用户可以轻松添加局部遮罩和后期特效、进行视角旋转、颜色校正、或着 360°镜头模糊和渲染感兴趣的区域。 Revolve 360 Revolve 360 是一种功能强大的插件,尽管操作面板简单,但可以控制相机的视角,完成一些 CG ...

    VR电影手册|After Effects 360°后期插件汇总.docx

    CANVAS 360 Pro 还可以完成一些 CG 场景的制作,如添加局部遮罩和后期特效、视角旋转、颜色校正、或着 360°镜头模糊和渲染等。 三、Revolve 360 Revolve 360 是一款制作小行星视频的利器,尽管操作面板简单,但...

    全景视频处理系统360mypano

    此外,它可能还具备其他高级功能,如视频拼接、质量优化、特效添加等。 5. **文件处理**:在360mypano系统中,用户可能需要处理多种类型的视频文件,包括但不限于MP4、MOV、AVI等常见格式。软件应具备导入、导出...

    CSS3制作360度旋转时钟表.zip

    6. **JavaScript的补充**:虽然标签中提到了"JS特效-日期时间",但描述中强调了是纯CSS3实现。然而,在某些情况下,JavaScript可能会被用来辅助更新时间,特别是在不支持CSS3动画或者需要更精确时间同步的浏览器中。...

    360度旋转图片插件UIMIX.fullview特效代码

    【360度旋转图片插件UIMIX.fullview特效代码】是一款专为网页设计而开发的工具,它提供了一种高效且引人入胜的方式来展示产品图片,特别是在电子商务和商品展示领域。这款插件允许用户以360度全方位视角查看图片,...

    jQuery+CSS3指针时钟特效.zip

    小时、分钟和秒指针的旋转角度是基于360度圆周计算的。例如,一个小时代表30度,一分钟代表6度,而秒钟则是60度每分钟。 6. **响应式设计**:为了确保时钟在不同屏幕尺寸和设备上正常工作,可能还应用了响应式设计...

    html5特效好视频播

    &lt;video src="myVideo.mp4" controls width="640" height="360"&gt; ``` 这行代码会在网页中创建一个具有控制条的视频播放器,播放源为"myVideo.mp4",并且设置了宽高。 2. 多格式支持:HTML5视频播放器通常需要支持...

    css3响应式布局悬停图标动画特效

    比如,我们可以创建一个悬停时旋转360度的图标,只需在@keyframes中设定0%和100%两个关键帧,并在悬停伪类中应用这个动画。 在“悬停图标动画特效”中,可能会使用到一些常见的CSS3属性,如`transform`(用于二维或...

    酷点全景短视频助手特别版 360全景图转短视频

    这些模板可能包含了特定的音乐、动画特效或者滤镜,适用于不同的应用场景,如旅游分享、房地产展示、游戏场景等。 【软件/插件】标签表明,酷点全景短视频助手不仅是一款独立的应用程序,也可能具备与其他软件集成...

    jQuery眼镜店360度产品全景预览.zip

    本项目"jQuery眼镜店360度产品全景预览.zip"是一个利用jQuery技术实现的眼镜产品360度全景展示方案,特别适用于在线零售平台,以增强用户对产品的视觉体验。 首先,此插件的核心功能是360度全景图的展示。通过将多...

    波涛汹涌的大海canvas特效

    这是一个令人惊叹的3D海浪动画特效,它允许用户进行360度旋转拖拽预览,并可以自定义波浪的数值以创造出不同的海洋景象。 首先,Canvas是HTML5中一个强大的绘图API,它允许开发者在网页上绘制图形、动画和其他视觉...

    9款2014最热门jQuery实用特效推荐

    5. 3D立体式图片360度旋转轮回效果:这个特效实现图片像旋转木马一样进行360度立体式旋转,为网页增添了丰富的视觉效果和动态展示。 6. 模拟手机客户端焦点图切换:该插件模仿了手机客户端的Banner图片切换效果,...

    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...

Global site tag (gtag.js) - Google Analytics