摇股子就是用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. web.config数据库连接字符串

    我们在做VB数据库经典实例这本书上的五个小例子和做学生信息管理系统时,都需要通过Vb链接数据库,在众多的链接方式中connectionstring字符串应该是较为简单的一种方式,下面我来详细介绍它的一 ...

  2. [Android Pro] Android开发实践:自定义ViewGroup的onLayout()分析

    reference to : http://www.linuxidc.com/Linux/2014-12/110165.htm 前一篇文章主要讲了自定义View为什么要重载onMeasure()方法( ...

  3. 订货(bzoj 2424)

    Description 某公司估计市场在第i个月对某产品的需求量为Ui,已知在第i月该产品的订货单价为di,上个月月底未销完的单位产品要付存贮费用m,假定第一月月初的库存量为零,第n月月底的库存量也为 ...

  4. 【笔记】ztree的使用

    引用的js和css: <!-- zTreeJS --><script type="text/javascript" src="jquery/jquery ...

  5. Redis基本信息

    1.Windows安装地址 https://github.com/MSOpenTech/redis/releases 2.命令行方式运行 执行redis-cli.exe 3.待续

  6. java的布尔运算符和位运算符

    1.布尔运算符 &&  逻辑与: ||   逻辑或: !=  不等于: 三元操作符:?: :表达式为  condition?expression1:expression2(当条件为真时 ...

  7. HDU 5754 Life Winner Bo 组合博弈

    Life Winner Bo Problem Description   Bo is a "Life Winner".He likes playing chessboard gam ...

  8. word使用笔记(1)

    开始字母的格式也是宋体,只要全选后设置字体为Times New Roman即可,会自动跳过中文 新安的Mathtype字体有点奇怪,在样式里设置了一下,果然自定义为宋体了,改回Times New Ro ...

  9. js 处理字母 大小写的 一些函数

    js中实现字母大小写转换主要用到了四个js函数: 1.toLocaleUpperCase2.toUpperCase3.toLocaleLowerCase4.toLowerCase 下面就这四个实现大小 ...

  10. Good Bye 2016 - D

    题目链接:http://codeforces.com/contest/750/problem/D 题意:新年烟花爆炸后会往两端45°差分裂.分裂完后变成2部分,之后这2部分继续按这种规则分裂.现在给你 ...