资讯频道 → Web前端
阅读更多

16顶
0踩

Web前端

原创新闻 jQuery DJ Hero ：结合jQuery&CSS3的酷炫效果

2009-11-19 16:48 by 资深编辑 wutao0603 评论(4) 有7937人浏览
jQuery

声明：ITeye资讯文章的版权属于ITeye网站所有，严禁任何网站转载本文，否则必将追究法律责任！

jQuery DJ Hero 结合了jQuery和CSS3技术，你可以选择开始，加速或减速，目前还没有真实的音乐效果，不过在后期会提供。


这个演示只能在支持CSS3的浏览器上工作，最新版本的Safari，Firefox，Chrome都支持。

 

查看演示：http://demo.marcofolio.net/jquery_dj/

 

作者提供了此演示的源代码，点击此处下载

 

部分代码如下：

 
// Function to be called when the play button is clicked.
// It changes from "play" to "pause" when records are spinning
// and starts both the vinyls.
$("#playbutton").click(function() {
   checkButtons();
   if(playing) {
      // Pause
      $("#playbtn").attr("src", "images/btn-play.png");
      playing = false;
      $(".vinyl").each(function() {
         // Clear the interval from the vinyl
         // to stop spinning
         var intervalHandle = $(this).data('intervalHandle');
         clearInterval(intervalHandle);
         $(this)
            .css({ 'cursor' : 'default' })
            .stop()
            .animate({rotate: '+=40deg'}, 800, 'easeOutCubic');            
      });
   } else {
      // Play
      $("#playbtn").attr("src", "images/btn-pause.png");
      playing = true;
      $(".vinyl").each(function() {
         $(this)
            .css({ 'cursor' : 'move' })
            .data('rotationAngle', 10);
         startSpinning($(this));
      });
   }
});
 

点击查看详情：http://www.marcofolio.net/webdesign/jquery_dj_hero_css3_and_jquery_fun.html

 

 

更多CSS3 & jQuery作品：

 

  • jTypingHero-基于Guitar Hero开发的打字游戏
  • jCharacterfall-也是一个打字游戏，不过与上面那个的效果不同，字母随水滴下落，速度会逐渐加快。
  • jSlickmenu-jQuery的插件，用于创建菜单
  • 查看更多
  • 大小: 222.5 KB
来自: marcofolio.net
16
顶
0
踩
评论 共 4 条 请登录后发表评论
4 楼 java_mike 2009-11-20 23:42
ku 
3 楼 treblesoftware 2009-11-20 16:05
能让我DUO2 的CPU飚到100%，而且一直是100%。看样子用上CSS3，全球用户连WEB都不能开了。
2 楼 fengyie007 2009-11-20 10:25
浏览器CPU占用很高。
1 楼 Aguo 2009-11-20 08:59
太强悍了

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • River Simulations and Python:使用 Python 管理河流模拟-开源

    脚本和示例项目是论文“集成 Python 和 HEC-... Piatkowska 94A, 60-649 Poznan, POLAND 电子邮件地址：tdysarz@gmail.com 所需硬件：支持 Python 的 PC 所需软件：Python 2.7.x、HEC-RAS 5.0.3 编程语言：Python 2.7.x

  • 使用Python通过Gmail发送邮件报错

    一、报错内容 smtplib.SMTPAuthenticationError: (534, b’5.7.14 ...https://stackoverflow.com/questions/26852128/smtpauthenticationerror-when-sending-mail-using-gmail-and-python

  • 解决python使用gmail smtp服务发邮件报错smtplib.smtpauthentic

    之前使用python发gmail邮件时也遇到过同样的问题，当时在网上找了很多教程鼓捣了半天终于可以发出邮件了，也没搞明白什么原因。如今换了个gmail账号后同样的问题又复现了，又查了半天终于搞定了，不过这次问题还比较...

  • GMail API for Python

    Complete the steps described in the rest of this page, and in about five minutes you'll have a simple Python command-line application that makes requests to the Gmail API.

  • python邮件群发_Python操作Gmail@定时定向群发邮件

    )>", re.I|re.X) #python的正则表达式切割，真的很好用 fromList.extend(pattern.findall(receiveJson['From'])) 获取发件箱的收件人列表 imapConnect.select('[Gmail]/&XfJT0ZCuTvY-') #进入发件箱 att, sentItems ...

  • python使用gmail发送邮件

    _": send_mail(['xxxxxx@qq.com'], "test email", "love you") 如遇534错误可参考 https://stackoverflow.com/questions/26852128/smtpauthenticationerror-when-sending-mail-using-gmail-and-python

  • Python Network Programming Cookbook, 2nd Edition - 2017

    your FTP and e-mail tasks such as manipulating your Gmail account, and reading or sending emails from a script or creating a guest book for your web application. We learn to write email clients with ...

  • python的dlna模块

    --play <url> - set current url for play and start playback it. In case of url is empty -continue playing recent media. --pause - pause current playback --stop - stop current playback --mute - mute...

  • yagmail：使用yagmail在Python中为gmail方便地发送电子邮件

    yagmail-另一个GMAIL / SMTP客户端 对于异步asyncio版本，请看这里： : 目的是使发送电子邮件尽可能简单，轻松。 最后，您的代码将如下所示： import yagmail yag = yagmail . SMTP () contents = [ 'This is ...

  • gmail怎么发送html,如何通过gmail api for python发送HTML格式的电子邮件

    使用GMail API Example: Send Mail中的示例代码，在遵循身份验证规则之后，通过gmail...问题如何使用python在gmail api发送消息时获取HTML格式？我有这个…message_body = "Hello!\nYou've just received a test ...

  • python常用小脚本总结

    日常生活中常会遇到一些小任务，如果人工处理会很麻烦。...或者可以把python当工具使用，辅助提高一下办公效率（比如我常拿python当计算器，计算、字符转换等）。 以下总结下个人用到的一些python小脚本留作备忘。

  • Python常用模块

    Python常用库大全，看看有没有你需要的。环境管理 包管理 包仓库 分发打包为可执行文件以便分发。 构建工具将源码编译成软件。 交互式解析器交互式 Python 解析器。 文件文件管理和 MIME（多用途的网际...

  • python 环境配置

    python开发环境配置

  • python @函数名_Python

    Python 获取当前位置所在的函数名和行号C/C++程序调试中经常用到的几个宏：__FILE__、__FUNCTION__、__LINE__Python程序遇到问题调试时也想用下这种方式，找了下网上资料，发现这个问题还有不少人问Python中获取当前...

  • AUTOMATE THE BORING STUFF WITH PYTHON读书笔记 - 第18章：SENDING EMAIL AND TEXT MESSAGES

    Python中标准的邮件模块smtplib 和 imapclient 通过GMAIL API收发邮件 GMail占1/3邮件客户端市场，真没想到。 EZGmail是作者基于GMail API自己写的。 安装模块： $ pip3 install --user --upgrade ezgmail SMTP ...

  • 【Python八股文系列】：100个Python的面试/笔试高频考点

    本文主要整理了关于Python的面试/笔试的一些考点，可用于查漏补缺。

  • Python编程迷你项目（附原始代码）三

    了解RPA： ...学习RPA ...下载RPA： ...邮件地址切片器 目的：编写一个Python脚本，可以从邮件地址中获取...目的：编写一个Python脚本，可以使用这个脚本发送电子邮件。 提示：电子邮件库可用于发送电子邮件。 import smtplib fr

  • pythonxx

    A curated list of awesome Python frameworks, libraries, software and resources 一个令人敬畏的Python框架、库、软件和资源列表 awesome-python.com/ awesome-python.com/ View license 查看许可协议 124k

  • python

    python是一个高层次的结合了解释性，编译性，互动性和面向对象的脚本语言 python的设计具有很强的可读性，相比其他语言经常使用的英文关键字，其他语言的一些标点符号，他具有比其他语言更有特色的语法结构 ...

  • python之正则表达式

    匹配邮箱 import re text = "My email is test@example.com and yours is john.doe123@gmail.com." email_pattern = r"[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}" email_matches = re.findall(email_pattern,...

Global site tag (gtag.js) - Google Analytics