`
cuiyadll
  • 浏览: 207358 次
文章分类
社区版块
存档分类
最新评论

分享一个有趣的js代码(手机摇一摇切换网页背景色)

    博客分类:
  • js
 
阅读更多
引用
<script type="text/javascript">
var color = new Array('#fff', '#ff0', '#f00', '#000', '#00f', '#0ff');
if(window.DeviceMotionEvent) {
    var speed = 25;
    var x = y = z = lastX = lastY = lastZ = 0;
    window.addEventListener('devicemotion', function(){
        var acceleration =event.accelerationIncludingGravity;
        x = acceleration.x;
        y = acceleration.y;
        if(Math.abs(x-lastX) > speed || Math.abs(y-lastY) > speed) {
            document.body.style.backgroundColor = color[Math.round(Math.random()*10)%6];
        }
        lastX = x;
        lastY = y;
    }, false);
}
</script>
分享到:
评论

相关推荐

    jQuery点击按钮网页背景切换代码.rar

    在本示例中,我们探讨的是如何使用jQuery库来实现一个功能,即当用户点击按钮时,网页背景图片能够自动切换。这个项目是基于jQuery 1.6.1版本构建的,表明它适用于较早的浏览器环境,同时也适用于现代浏览器。jQuery...

    根据时间自动切换网页背景颜色或图片代码-附带教程

    根据时间自动切换网页背景颜色或图片代码 有些时侯为了丰富页面的显示效果,将页面制作成根据时间变换页面背景的样式,这样会使浏览者对此网站不会感觉厌倦,同时也会觉得网站制作的非常新颖。 本文通过 Date 对象的...

    HTML5网页背景切换动画代码.zip

    每个选项可能关联一个特定的颜色值,这些值将被JavaScript获取并用于改变CSS中的背景色。 jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画效果和Ajax交互。在本项目中,`jquery-1.11.0.min....

    图片和背景颜色一起变换的js切换

    3. **JavaScript 初始化**:在JavaScript中,创建一个数组存储所有要切换的图片和对应的背景颜色。然后,设定一个定时器或事件监听器来触发切换。 4. **切换逻辑**:每次切换时,更新容器的`background-image`和`...

    用js实现网页背景色彩虹渐变

    使用简单的js来实现网页背景色彩虹色渐变,不是切换,是一直循环变色

    网站常用手机动态第三方登录方式切换js特效代码

    本资源提供了一种实现“网站常用手机动态、第三方登录、二维码登录方式切换”的JavaScript特效代码。以下是对这些登录方式及其切换效果的详细解释: 1. **手机动态登录**: 手机动态登录通常指的是通过手机号码...

    摇一摇切换音乐(Android)

    在Android平台上,实现“摇一摇切换音乐”的功能是一项有趣且实用的技术应用。这个项目主要利用了设备的加速度传感器来检测用户晃动手机的动作,然后根据预设的逻辑来切换音乐播放。以下是对这个项目及其相关知识点...

    画面切换按钮背景变色.emtp

    画面切换按钮背景变色,当画面切换按钮选择当前页画面,按钮背景变色锁定,提示在当前页面,其他页面按钮颜色为灰色,当前页按钮为高亮色

    90个js图片切换代码

    JavaScript(简称JS)是一种轻量级的脚本语言,常用于网页和网络应用中的动态内容控制,包括图片的切换效果。在"90个js图片切换代码"这个资源包中,很可能包含了多种不同的图片轮播或幻灯片展示的实现方式,这些都是...

    JS文章内容背景黑白切换代码.zip

    "JS文章内容背景黑白切换代码.zip"便是一个贴合现代网页设计趋势的创新工具,它提供了通过简单操作实现网页背景在黑白之间切换的功能,极大地增强了用户的阅读体验。 在网页设计中,色彩选择对用户的视觉感受有着...

    手机网页(WAP网页)底部悬浮广告代码带抖动/关闭效果

    总的来说,"手机网页(WAP网页)底部悬浮广告代码带抖动/关闭效果"是一种利用JavaScript和CSS技术优化移动网页广告展示的实践。它融合了动态视觉效果和用户交互,旨在提升广告的吸引力,同时尊重用户的浏览体验。...

    js鼠标滑过标签选项卡切换代码.zip

    【标题】"js鼠标滑过标签选项卡切换代码"是一个基于JavaScript实现的交互式网页设计元素,常用于网站导航或信息展示。这种效果允许用户通过鼠标悬停在不同的标签上,来切换显示不同的内容区域。在医院美容网站中,...

    jQuery的点击按钮切换网页背景图片代码.zip

    js代码 [removed] function switchbox(a) { a == 1 ? $(".slide.slide3 .arrowcontainer").show() : $(".slide.slide3 .... 这是一款简单实用的jQuery点击按钮切换网页背景图片代码,背景图片跟按钮风格随便换。

    手机端网页上下手指滑动图片切换效果代码

    "Zepto.html"可能包含HTML结构,"css"可能包含了样式定义,"images"目录存储了待展示的图片,而"js"则包含实现滑动切换效果的JavaScript代码,可能使用了轻量级的JavaScript库Zepto,它是jQuery的一个替代品,专为...

    73种网页常用JS代码

    - 通过`document.bgColor`属性可以改变页面背景色,这段代码实现背景色在两种颜色之间切换。 10. 打开新窗口: - `window.open()` 方法用于打开新的浏览器窗口,参数包括URL、窗口名称和特性(如高度、宽度、工具...

    手机网页切换效果

    在移动互联网盛行的时代,手机网页的设计与交互体验成为了开发者关注的重点。...在分享的压缩包文件"手机页面切换效果"中,可能包含了实现这一效果的HTML、CSS和JavaScript代码示例,供开发者参考和学习。

    网页模板——vue.js实现的单排卡片滚动切换特效代码.zip

    在这个"网页模板——vue.js实现的单排卡片滚动切换特效代码"中,我们主要会探讨如何利用Vue.js来创建一个具有动态滚动效果的卡片布局。这种效果常见于许多网站,尤其是展示产品或服务的页面,它能够提供一种优雅的...

    jQuery背景和banner图片一起切换全屏焦点图切换代码

    本示例中的"jQuery背景和banner图片一起切换全屏焦点图切换代码"是利用jQuery实现的一种交互式用户体验,它允许网页的背景图片与banner(横幅)图片同步切换,从而创造出更具吸引力的视觉效果。 首先,我们需要理解...

    Android之手机摇一摇DEMO代码,实现摇一摇执行特定程序.zip

    在Android平台上,"手机摇一摇DEMO代码,实现摇一摇执行特定程序"是一个常见的交互功能,允许用户通过摇动手机来触发某些特定的操作,比如切换应用、播放音乐或执行游戏中的动作等。实现这一功能主要涉及到Android的...

Global site tag (gtag.js) - Google Analytics