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>标签进行比较.
相关推荐
总的来说,"js实现360度全景图片预览VR特效.zip"项目通过JavaScript和可能的第三方库,实现了在手机端的全景图片预览功能,结合用户交互,为用户提供了沉浸式的VR体验。理解并掌握这些技术,不仅可以提升Web开发技能...
【jQuery炫酷iPhone手机3D旋转互动特效】是一种利用JavaScript库jQuery实现的视觉效果,它为网页中的iPhone模型提供了一种动态的3D旋转展示。这个特效旨在提升用户体验,让用户能够通过鼠标操作从不同角度查看虚拟...
该资源是一个基于jQuery的网页模板,专为眼镜店设计,实现了360度产品全景预览特效。这个特效能够提供给用户一个全方位、立体的产品查看体验,尤其对于展示眼镜这类需要详细观察细节的商品非常适用。下面我们将深入...
这个"HTML5+Three.js实现的360°全景线框3D动画特效源码.zip"是一个示例项目,展示了如何结合这两种技术来制作引人入胜的3D交互式效果。 首先,让我们深入了解HTML5的关键特性。HTML5引入了新的元素,如`<canvas>`...
4. **跨浏览器兼容性**:这个特效宣称能支持IE、谷歌和360等主流浏览器,这意味着开发者可能使用了polyfill或条件语句来确保在不同浏览器上的兼容性,比如处理IE对某些CSS3属性或HTML5新特性不支持的情况。...
5. **添加动画和特效**:如果需要,可以添加动画元素或特效,提高展示的吸引力和互动性。 6. **测试与发布**:完成设计后,进行测试以确保在不同设备和浏览器上的兼容性,然后发布到网上供用户访问。 在压缩包文件...
在这个场景下,我们讨论的是如何使用JavaScript来实现360度全景图片预览的VR(虚拟现实)特效,这是一种为手机用户设计的独特视觉体验。接下来,我们将深入探讨这个话题,包括基本原理、实现方法以及可能涉及的技术...
用户可以轻松添加局部遮罩和后期特效、进行视角旋转、颜色校正、或着 360°镜头模糊和渲染感兴趣的区域。 Revolve 360 Revolve 360 是一种功能强大的插件,尽管操作面板简单,但可以控制相机的视角,完成一些 CG ...
CANVAS 360 Pro 还可以完成一些 CG 场景的制作,如添加局部遮罩和后期特效、视角旋转、颜色校正、或着 360°镜头模糊和渲染等。 三、Revolve 360 Revolve 360 是一款制作小行星视频的利器,尽管操作面板简单,但...
此外,它可能还具备其他高级功能,如视频拼接、质量优化、特效添加等。 5. **文件处理**:在360mypano系统中,用户可能需要处理多种类型的视频文件,包括但不限于MP4、MOV、AVI等常见格式。软件应具备导入、导出...
6. **JavaScript的补充**:虽然标签中提到了"JS特效-日期时间",但描述中强调了是纯CSS3实现。然而,在某些情况下,JavaScript可能会被用来辅助更新时间,特别是在不支持CSS3动画或者需要更精确时间同步的浏览器中。...
【360度旋转图片插件UIMIX.fullview特效代码】是一款专为网页设计而开发的工具,它提供了一种高效且引人入胜的方式来展示产品图片,特别是在电子商务和商品展示领域。这款插件允许用户以360度全方位视角查看图片,...
小时、分钟和秒指针的旋转角度是基于360度圆周计算的。例如,一个小时代表30度,一分钟代表6度,而秒钟则是60度每分钟。 6. **响应式设计**:为了确保时钟在不同屏幕尺寸和设备上正常工作,可能还应用了响应式设计...
<video src="myVideo.mp4" controls width="640" height="360"> ``` 这行代码会在网页中创建一个具有控制条的视频播放器,播放源为"myVideo.mp4",并且设置了宽高。 2. 多格式支持:HTML5视频播放器通常需要支持...
比如,我们可以创建一个悬停时旋转360度的图标,只需在@keyframes中设定0%和100%两个关键帧,并在悬停伪类中应用这个动画。 在“悬停图标动画特效”中,可能会使用到一些常见的CSS3属性,如`transform`(用于二维或...
这些模板可能包含了特定的音乐、动画特效或者滤镜,适用于不同的应用场景,如旅游分享、房地产展示、游戏场景等。 【软件/插件】标签表明,酷点全景短视频助手不仅是一款独立的应用程序,也可能具备与其他软件集成...
本项目"jQuery眼镜店360度产品全景预览.zip"是一个利用jQuery技术实现的眼镜产品360度全景展示方案,特别适用于在线零售平台,以增强用户对产品的视觉体验。 首先,此插件的核心功能是360度全景图的展示。通过将多...
这是一个令人惊叹的3D海浪动画特效,它允许用户进行360度旋转拖拽预览,并可以自定义波浪的数值以创造出不同的海洋景象。 首先,Canvas是HTML5中一个强大的绘图API,它允许开发者在网页上绘制图形、动画和其他视觉...
5. 3D立体式图片360度旋转轮回效果:这个特效实现图片像旋转木马一样进行360度立体式旋转,为网页增添了丰富的视觉效果和动态展示。 6. 模拟手机客户端焦点图切换:该插件模仿了手机客户端的Banner图片切换效果,...
* 支持从众多的设备中直接读取和转换视频,如手机, PDA, PSP, iPod, iPhone, BlackBerry, Xbox, Xbox 360, PS3, Archos, Creative Zen, iRiver, television, Apple TV 等。 03. 音频格式转换 * 支持转换:MP3, WMA...