摇股子就是用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 WebView内容宽度自适应

    我们平常在项目中有可能会遇到网页的内容是通过json数据传递到app上面用WebView来显示的,这时候我们通常都要调整内容的总宽度不超过父容器的宽度,这样子用户可以不用左右滑动就可以看到全部的内容. ...

  2. 【jQuery】--图片轮播

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. mysql高并发和表类型

    高并发:http://www.cnblogs.com/wangchaozhi/p/5061378.html 表类型:http://www.xiaoxiaozi.com/2009/07/14/1171/

  4. WPF中运行时使内容可以上下左右被鼠标拖动应该怎么做？

    <Window x:Class="testGridSplitter.MainWindow" xmlns="http://schemas.microsoft.com/ ...

  5. OutofMemory之PermGen介绍

    可参考:https://my.oschina.net/benhaile/blog/214159.

  6. Js 日期 多少分钟前，多少秒前

    ;(function(window){ /** * [dateDiff 算时间差] * @param {[type=Number]} hisTime [历史时间戳,必传] * @param {[typ ...

  7. C++开始前篇，深入编译链接（3）

    一,COMMON块 什么是COMMON块,这是一种机制,早期的Fortran没有动态分配空间的机制,程序员必须事先声明它所需要的临时使用空间的大小.Fortran把这种空间叫做COMMON块,当不同的 ...

  8. PHP预定义接口之 ArrayAccess

    最近这段时间回家过年了,博客也没有更新,感觉少学习了好多东西,也错失了好多的学习机会,就像大家在春节抢红包时常说的一句话:一不留神错过了好几亿.废话少说,这篇博客给大家说说关于PHP预定义接口中常用到 ...

  9. Python初探-购物车程序

    要求: 1,用户进入后,有欢迎语并提示用户输入本金 2.用户输入正确的内容后有购物菜单显示给用户 3.当用户的本金不足以购买商品的时候有提示余额不足并告知差额 4.成功购物后提示已购买内容和购买后的余 ...

  10. Etw EventSourceProvider_EventsProducer.cs OopConsoleTraceEventListenerMonitor_TraceControllerEventsConsumer.cs

    // EventSourceProvider_EventsProducer.cs /* /r:"D:\Microshaoft.Nuget.Packages\Microsoft.Diagnos ...