摇股子就是用javascript实现的一个简单的小特效。

下面来看一下我自己做的一个用javascript实现的摇股子。

效果图如下:

我做的股子是由6张图片,点击股子它自己会随机晃动。

代码如下:

   

 案例思路:给三张图片都加一个点击函数,给三张图片一个循环,让这六张图片一直循环显示出来,在script里面获取div的id和三张图片,给图片一个开始点击的函数和停止点击的函数,然后给图片一个随机函数,让它能随机切换,最后给它了一个停止的时候显示的一个数值的判断。

JavaScript摇股子的更多相关文章

  1. 【HTML5 】手机重力与方向感应的应用——摇一摇效果

    http://www.helloweba.com/view-blog-287.html HTML5有一个重要特性:DeviceOrientation,它将底层的方向和运动传感器进行了高级封装,它使我们 ...

  2. JavaScript性能优化之摇树

    作者|Jeremy Wagner译者|薛命灯 现代 Web 应用程序可能会变得非常巨大,特别是它们的 JavaScript 部分.HTTP Archive 网站的数据显示,截至 2018 年中,传输到 ...

  3. 用JavaScript+HTML实现双色球随机摇号效果

    用JavaScript+HTML实现双色球随机摇号效果 首先要知道双色球的规则是什么 双色球投注区分为红球号码区和蓝球号码区 红球号码范围为01-33,蓝球号码范围为01-16 双色球每期从33个红球 ...

  4. Javascript网页摇一摇

    function init(){ if (window.DeviceMotionEvent) { // 移动浏览器支持运动传感事件 window.addEventListener('devicemot ...

  5. 使用JAVAScript技术在WEB网页实现摇一摇的应用

    实现效果如下: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  6. H5实现摇一摇技术总结

    摇一摇遇到的问题 一.如何对摇晃效果进行反馈 刚开始的处理方式是,摇晃过程中不做任何处理,但后来反馈说这种效果不好,好像就没有摇动一样,如果声音也不响的话,就真的和什么都没发生一样. 后来想了想,加入 ...

  7. C#开发微信门户及应用(38)--微信摇一摇红包功能

    摇一摇周边红包接口是为线下商户提供的发红包功能.用户可以在商家门店等线下场所通过摇一摇周边领取商家发放的红包.我曾经在<C#开发微信门户及应用(28)--微信“摇一摇·周边”功能的使用和接口的实 ...

  8. 悟透JavaScript(理解JS面向对象的好文章)

    引子 编程世界里只存在两种基本元素,一个是数据,一个是代码.编程世界就是在数据和代码千丝万缕的纠缠中呈现出无限的生机和活力. 数据天生就是文静的,总想保持自己固有的本色:而代码却天生活泼,总想改变这个 ...

  9. H5摇一摇遇到的问题

    一.如何对摇晃效果进行反馈 刚开始的处理方式是,摇晃过程中不做任何处理,但后来反馈说这种效果不好,好像就没有摇动一样,如果声音也不响的话,就真的和什么都没发生一样. 后来想了想,加入摇晃过程动画,就像 ...

随机推荐

  1. Android知识点总结[转]

  2. luac++

    Cocos2d-x下Lua调用自定义C++类和函数的最佳实践 洪亮 305 2014年08月09日 发布   1 推荐 21 收藏,14.9k 浏览 关于cocos2d-x下Lua调用C++的文档看了 ...

  3. REPL环境

    一.Node的REPL基本操作 REPL(Read-eval-print-loop):交互式解析器 在REPL环境下,可以定义和运行变量.函数.对象. REPL的常用命令: 进入node,即进入了RE ...

  4. DOCKER 为新启用的容器配置外网IP

    网卡的配置文件存储在 /etc/sysconfig/network-scripts/ 目录下.每个网卡的详细内容将会以不同的名字存储,比如ifcfg-enp0s3. 让我们看下ifcfg-enp0s3 ...

  5. 从匿名方法到 Lambda 表达式的推演过程

    Lambda 表达式是一种可用于创建委托或表达式目录树类型的匿名函数. 通过使用 lambda 表达式,可以写入可作为参数传递或作为函数调用值返回的本地函数. 以上是msdn官网对Lambda 表达式 ...

  6. (3)WebApi客户端调用

    1.创建一个应用台控制程序,可以把Model的引用,用下面的方法拖拽上来(解决方案里没有这个文件,只是这个文件的引用)  2.Program.cs using System; using System ...

  7. python import cv2 出错:cv2.x86_64-linux-gnu.so: undefined symbol

    之前写过一个python使用opencv处理图片的脚本,当时是可以使用的,现在突然发现执行时出错: ImportError: /usr/lib/python2.7/dist-packages/cv2. ...

  8. 自连接<EntityFramework6.0>

    自引用 public class PictureCategory { [DatabaseGenerated(DatabaseGeneratedOption.Identity)] public int ...

  9. 私有无线传感网 PWSN HLINK

    私有无线传感网,我把其叫做 Personal Wireless Sensor Network.此种网络最另众人所知的就是ZIGBEE了.由于在用户不同的使用场景中,对传感网络有许多不同的要求,例如:通 ...

  10. FZU 2137 奇异字符串 后缀树组+RMQ

    题目连接:http://acm.fzu.edu.cn/problem.php?pid=2137 题解: 枚举x位置,向左右延伸计算答案 如何计算答案:对字符串建立SA,那么对于想双延伸的长度L,假如有 ...