九宫格转动效果

Web 开发 > JavaScript
收藏 回复
[问题点数：100分，结帖人wangjun8868]
更多帖子
私信 空间 博客
编程有钱人了
等级
本版专家分：20
结帖率 99.25%
如图效果：当点击中间开始按钮的时候，从左上角第一个开始变成红色，然后第二个，一次类推
第一张

第二张


我能实现匀速变换效果，怎么实现减速运动呢？然后停留在某个格子上呢？
能用JQUERY实现最好了！！！
只看楼主 引用 举报 楼主 收起
展开阅读全文
更多帖子
私信 空间 博客
Cocl
等级
本版专家分：2163
百度  缓动函数
只看TA 引用 举报 #1得分 2
更多帖子
私信 空间 博客
Fate-
等级
本版专家分：109
围观  我也想知道
只看TA 引用 举报 #2得分 2
更多帖子
私信 空间 博客
oqqbob123456
等级
本版专家分：2
不错的效果 赞一个
只看TA 引用 举报 #3得分 2
更多帖子
私信 空间 博客
liuxingfffff
等级
本版专家分：1084
参考代码


<html>

<head>

    <style type="text/css">

        ul

        {

            list-style: none;

        }

        li

        {

            float: left;

            margin-right: 10px;

            min-height: 120px;

            min-width: 130px;

        }

        li img

        {

            margin: 1px;

        }

        

        li.selected img

        {

            border: 1px red solid;

        }

        li.last

        {

            float: none;

        }

    </style>

</head>

<body>

    <ul>

        <li data-index="0">

            <img src="gift.png" /></li>

        <li data-index="1">

            <img src="gift.png" /></li>

        <li data-index="2" class="last">

            <img src="gift.png" /></li>

        <li data-index="7">

            <img src="gift.png" /></li>

        <li>

            <img src="gift.png" /></li>

        <li data-index="3" class="last">

            <img src="gift.png" /></li>

        <li data-index="6">

            <img src="gift.png" /></li>

        <li data-index="5">

            <img src="gift.png" /></li>

        <li data-index="4" class="last">

            <img src="gift.png" /></li>

    </ul>

    <div>

        <span></span>

        <label></label>

    </div>

    <script type="text/javascript" src="jquery.min.js"></script>

    <script type="text/javascript">



        var index = 0;

        var times = 100;

        var intervale_time = 25;

        var intervale = setInterval("move1()", intervale_time);



        function move() {

            $(".selected").removeClass("selected");

            $("li[data-index='" + index + "']").addClass("selected");

            index = index + 1;

            index = index % 8;

        }



        function move1() {

            if (times == 0) {

                clearInterval(intervale);

                times = 1;

                Move2();

            } else {

                times = times - 1;

                move();

                $("span").html("下次执行时间" + intervale_time + "毫秒");

                $("label").html("剩余次数" + times);

            }

        }



        function Move2() {

            times = times + 1;

            var time = intervale_time * times;

            if (time < 450) {

                move();

                $("span").html("下次执行时间" + time + "毫秒");

                setTimeout("Move2()", time);

            } else {

                alert(index);

            }

        }

    </script>

</body>

</html>
只看TA 引用 举报 #5得分 94
更多帖子
私信 空间 博客
编程有钱人了
等级
本版专家分：20
引用 5 楼 liuxingfffff 的回复:
参考代码


<html>

<head>

    <style type="text/css">

        ul

        {

            list-style: none;

        }

        li

        {

            float: left;

            margin-right: 10px;

            min-height: 120px;

            min-width: 130px;

        }

        li img

        {

            margin: 1px;

        }

        

        li.selected img

        {

            border: 1px red solid;

        }

        li.last

        {

            float: none;

        }

    </style>

</head>

<body>

    <ul>

        <li data-index="0">

            <img src="gift.png" /></li>

        <li data-index="1">

            <img src="gift.png" /></li>

        <li data-index="2" class="last">

            <img src="gift.png" /></li>

        <li data-index="7">

            <img src="gift.png" /></li>

        <li>

            <img src="gift.png" /></li>

        <li data-index="3" class="last">

            <img src="gift.png" /></li>

        <li data-index="6">

            <img src="gift.png" /></li>

        <li data-index="5">

            <img src="gift.png" /></li>

        <li data-index="4" class="last">

            <img src="gift.png" /></li>

    </ul>

    <div>

        <span></span>

        <label></label>

    </div>

    <script type="text/javascript" src="jquery.min.js"></script>

    <script type="text/javascript">



        var index = 0;

        var times = 100;

        var intervale_time = 25;

        var intervale = setInterval("move1()", intervale_time);



        function move() {

            $(".selected").removeClass("selected");

            $("li[data-index='" + index + "']").addClass("selected");

            index = index + 1;

            index = index % 8;

        }



        function move1() {

            if (times == 0) {

                clearInterval(intervale);

                times = 1;

                Move2();

            } else {

                times = times - 1;

                move();

                $("span").html("下次执行时间" + intervale_time + "毫秒");

                $("label").html("剩余次数" + times);

            }

        }



        function Move2() {

            times = times + 1;

            var time = intervale_time * times;

            if (time < 450) {

                move();

                $("span").html("下次执行时间" + time + "毫秒");

                setTimeout("Move2()", time);

            } else {

                alert(index);

            }

        }

    </script>

</body>

</html>

思路很好，谢谢了！
只看TA 引用 举报 #6得分 0
收起
收藏 回复
编程有钱人了

等级：

关注 私信 TA的帖子
H5九宫格效果

http://www.php.cn/html5-tutorial-356111.html

仿微博九宫格图片展示(转场效果练习)

先贴出GitHub:JPPhotoBrowserDemo JPPhotoBrowserDemo 需要将文件夹 JPPhotoBrowser 拖入程序中 目录结构 Extensions UIImageView+JPWebImage 图片下载 ...JPImageShowBackView 九宫格布局View(若存在不...

九宫格的实现（转）

原文来自http://www.ieliwb.com/iphone-nine-box/ 九宫格效果图: 核心就这2个方法: //Power by ieliwb.com-(void)viewDidLoad{ [superviewDidLoad]; NSArray*imageNames=[NSArrayarrayWithObjects: ...

vue九宫格抽奖功能

vue九宫格抽奖 页面结构 1 2 3 4 5 6 7 8 9 10 11 12 13 <div id="gift-box"> <ul> <li :class="[index==0?'active':'']">一等奖</li> <li :class="[index==1?'...

九宫格特效

此次九宫格牵扯到了 <font color=DeepPink>节点</font>之间的 <font color=HotPink>距离</font> 与 <font color=HotPink>位置交换</font> 其中有几点重要的思想列举如下： ...

仿美播登陆页面，实现九宫格图片翻转效果

仿美播登陆页面，实现九宫格图片翻转效果

记一次做九宫格抽奖转动音效嘟嘟嘟

记一次做九宫格抽奖转动音效嘟嘟嘟 采用的文章的地址：https://blog.csdn.net/qq_39759115/article/details/78604912 当我知道要做一个九宫格抽奖的时候，心里很崩溃，正值毕业季，毕设都忙不过来，于是我翻了很多...

模拟抽奖的九宫格动画效果

模拟九宫格抽奖的简单逻辑

九宫格抽奖停止位置的设置

控制九宫格抽奖停止  网上有很多文章介绍九宫格抽奖，最近在做一个活动，正好用到了九宫... 但在开发中，发现一个问题，网上的js提供了九宫格旋转的控制代码，同时也有一个随机数的生产，来达到随机抽奖的效果。而真

九宫格（用原生js实现）

2、实现的九宫格效果是：可交换1-9的任意方格，且将方格拖拽至大盒子外松开后可自动回到拖拽之前的位置。3、代码如下：html代码：&lt;ul id="box"&gt; &lt;li&gt;1&lt;/li&gt; ...

Android自定义实现九宫格抽奖功能

最近的功能需求中需要实现用户使用签到获取的积分，可以在九宫格中进行抽奖消耗积分，这里使用的是自定义进行实现抽奖的功能，可以通过设置计算策略，来控制用户 中哪些奖以及中大奖 的概率，话不多说，直接上代码。...

移动端九宫格转盘抽奖vue组件

移动端九宫格转盘抽奖vue组件，中奖的奖品数据由接口决定。 效果图 抽奖 因为中奖的结果是后台返回的，所以要考虑转盘的最终停下来的位置必须是在对应后台返回结果的奖品的位置，也就是要模拟出这个中奖的过程...

Vue九宫格跑马灯抽奖

九宫格跑马灯效果抽奖 九宫格样式，实现随机选择九宫格内奖品，且跑马灯实现效果时由快到满，如有需求获取固定位置奖品时，根据需求调整goLottery()中的代码即可 <template> <div class="cj_box"> <...

九宫格大转盘抽奖

页面效果如下： <!DOCTYPE html> <html lang="zh-cmn-Hans">...九宫格转盘</title> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width...

如何优雅的实现一个九宫格抽奖

作者：黄鹏如何优雅的实现一个九宫格抽奖九宫格抽奖是在移动端常见开发功能点之一，那如何实现一个高度可复用的九宫格逻辑就显的特别重要了。接下来我们来分析下如何实现一个优雅的抽奖功能。功能分析...

Android 九宫格抽奖RaffleView

Android 九宫格抽奖View 最近在项目中要实现一个九宫格抽奖view 。中间是抽奖按钮，八个格子是奖品。效果图如下： 接下来我就分析一下实现这个View的步骤： 1.绘制出外框(此处难点是绘制闪光点的效果)； 2.绘制九个...

九宫格抽奖- 前后端代码

前端：jq+h5 实现九宫格动效 后端：thinkphp3.2.3 实现中奖概率算法 功能：支持读取数据库预设的中奖率及奖品池，中奖率可以自定义，必须是整数 最终效果如下： 代码： choujiang.html代码如下：&lt;!...

vue实现九宫格抽奖游戏

效果图如下 页面代码如下 由于原点以及图片的位置都是动态的渲染进去的,这部分代码也不细说了主要是要计算好每个图片以及原点的偏移位置,找到规律 <template> <div class="Sudoku" v-wechat-title...

九宫格抽奖转盘源码分析

效果如上图所示，下面对其实现代码进行分析，看能不能破解其抽奖规则。需要引入jquery-1.8.3.min.js和images/9张图片。 &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "...

原生JS之实现九宫格抽奖效果，从此百分之百中奖不是梦！！！

首先我们来看一下效果: 说明：在这个案例中，停止位置的输入范围是0-7，代表8个停止位置（顺时针排列），然后我们后台设置的中奖位置是1。 8个停止位置的分布图： 0 1（中奖位置） 2 7 3 6 5 4 下面是相关的...

vue抽奖组件之九宫格

写在前面 本人自从事前端工作以来，每每遇到技术问题后，都是向百度/谷歌求教，久而久之便养成了伸手即来的‘本领’。。。可能是出于‘懒’的原因（没错，就是因为懒），从未发表...点击九宫格开始按钮，开始转动，...

微信小程序九宫格抽奖

js Page({ data: { last_index: 0,//上一回滚动的位置 amplification_index: 0,//轮盘的当前滚动位置 roll_flag: true,//是否允许滚动 max_number: 8,//轮盘的全部数量 speed: 300,//速度，速度值越大，则越慢...

前端js实现九宫格模式抽奖（多宫格抽奖）

　前端九宫格是一种常见的抽奖方式，js实现如下，掌握其原理，不论多少宫格，都可以轻松应对。（代码可复制直接运行看效果）。 　该案例以四宫格入门，可扩展多宫格，奖品模块的布局可自由设置。 <!DOCTYPE ...

react 中使用九宫格抽奖

react 中使用九宫格抽奖 说明：因为大多数使用到的基本都是活动相关的，九宫格的对应的每个奖励也都是有中奖率的，具体的奖励都是后端返回的，所以我们在点击抽奖时一定会请求后端接口获取到返回的数据 1.首先，看...

基于vue的h5抽奖活动九宫格转盘及圆形转盘

最近项目中遇到了需要做个h5的抽奖活动需求：要求支持九宫格模式和圆形抽奖盘模式。这边基于vue和vantUI的loading组件造了这2个轮子。 九宫格抽奖 思路 动态构造几次方的正方形抽键盘的4条边； ...

九段刀客：js九宫格转盘抽奖实现原理

<!DOCTYPE html> <html lang="en"> <head> ...meta charset="UTF-8">...meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">...九宫格抽...

Js写九宫格抽奖

国庆出去转了一圈，回来及时把以前写的一些有用的在这儿记录一下 --------------------------------------------我是分割线---...先说说JQuery封装的专门用来处理九宫格抽奖的框架JQuery.latest.min.js，文件地址如...

前端——》手机H5页面九宫格抽奖（含概率及奖品配置）

页面效果 ...这个lottery.js是核心的js，里面包含了加载页面九宫格相关图片和文字的事件、抽奖事件、抽奖停转事件、奖品领取事件等等。奖品图片、跳转链接、中奖概率皆从后台接口返回的js中取。暴露了四...

vue实现九宫格抽奖

实现原理 /* 整体布局采用position定位实现 gameBox:父盒子，最外层背景图 bg2:点击开始按钮后，白色灯出现，同时要每个...start：按钮样式 item1-8:通过定位方式将dom元素顺时针排列 ...*/ ...div class="gameBox">... ...

原生js实现九宫格抽奖

预览效果 完整代码 留意注释文字的解释。记得更换图片。 <!DOCTYPE html> ...meta name="viewport" content="width=device-width, initial-scale=1.0">...JavaScript 实现九宫格抽奖</title> ...

相关热词 c# ef 事务删除 c# this 属性 c#注册代码没有数据库 c#限定时间范围 c#控件跟随窗口大小变化 c# 模板 类 c#离线手册 c# 数组、 c#五种限制修饰符 c# urlencode