效果：
http://hovertree.com/texiao/js/24/

效果图：

代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>JS+CSS实现投票效果 - 何问起</title>

<link rel="stylesheet" href="http://hovertree.com/texiao/js/24/style.css" type="text/css">

<script src="http://hovertree.com/texiao/js/24/vote.js" type="text/javascript"></script>

</head>

<body>

<div><h1>Javascript实现在线调查投票</h1>

<a href="http://hovertree.com/h/bjaf/jsdiaocha.htm">原文</a> <a href="http://hovertree.com">首页</a> <a href="http://hovertree.com/texiao/">特效</a>

</div>

<!--问卷调查内容-->

<div class="vote">

<div class="votechoice">

<ul class="vote1">

1.您觉得现在哪些开发语言有前途：

<li><input type="checkbox" value="C#" /><span class="votechoicename">C#</span></li>

<li><input type="checkbox" value="Java" /><span class="votechoicename">Java</span></li>

<li><input type="checkbox" value="Swift" /><span class="votechoicename">Swift</span></li>

<li><input type="checkbox" value="C++" /><span class="votechoicename">C++</span></li>

<li><input type="checkbox" value="JavaScript" /><span class="votechoicename">JavaScript</span></li>

<li><input type="checkbox" value="其他" /><span class="votechoicename">其他</span></li>

<li><button type="button" class="button blue" onClick="submitvote(this)">投票</button></li>

</ul>

</div>

<div class="votechoice">

<ul class="vote2">

2.您认为哪些网站适合手机或触屏访问：

<li><input type="checkbox" value="博客园" /><span class="votechoicename">博客园</span></li>

<li><input type="checkbox" value="何问起" /><span class="votechoicename">何问起</span></li>

<li><input type="checkbox" value="CSDN" /><span class="votechoicename">CSDN</span></li>

<li><input type="checkbox" value="柯乐义" /><span class="votechoicename">柯乐义</span></li>

<li><input type="checkbox" value="GitHub" /><span class="votechoicename">GitHub</span></li>

<li><input type="checkbox" value="hovertree.net" /><span class="votechoicename">hovertree.net</span></li>

<li><button type="button" class="button blue" onClick="submitvote(this)">投票</button></li>

</ul>

</div>

</div>

</body>

</html>

转自：http://hovertree.com/h/bjaf/jsdiaocha.htm

特效：http://www.cnblogs.com/roucheng/p/texiao.html

原生JS投票特效的更多相关文章

  1. 原生JS实现各种经典网页特效——Banner图滚动、选项卡切换、广告弹窗等

    在制作网页过程中,我们可能会遇到各种常用的经典网页特效,比如Banner图片滚动.选项卡循环播放.右下角广告弹窗.评论提交展示.选项动态增删.剪刀石头布小游戏等等等...是不是感觉都见到过这些场景.那 ...

  2. 原生js写的贪吃蛇网页版游戏特效

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <bo ...

  3. 原生js实现tab选项卡里内嵌图片滚动特效代码

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

  4. 原生js和jquery实现图片轮播特效

    本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...

  5. 原生js和jquery实现图片轮播特效(转)

    本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...

  6. 原生js实现架子鼓特效

    这是代码完成的效果,按下abcd会出现对应的架子鼓音乐的效果. 简单的介绍下代码思路,html和css部分就不多说了. 重要的是js部分. 大致是这样的, 首先获取到所有的按钮为一个数组,然后遍历整个 ...

  7. 原生JS实现旋转木马轮播图特效

    大概是这个样子: 首先来简单布局一下(emm...随便弄一下吧,反正主要是用js来整的) <!DOCTYPE html> <html lang="en"> ...

  8. 原生js实现的效果

    原生js实现tooltip提示框的效果   在js的世界里面,每一个小的特效都那么微不足道,却又那么的令人向往与好奇.前端工程师的任务特别高大上,因为他们的一个小小的设计就会激发别人的求知欲.比如说我 ...

  9. 原生JS面向对象思想封装轮播图组件

    原生JS面向对象思想封装轮播图组件 在前端页面开发过程中,页面中的轮播图特效很常见,因此我就想封装一个自己的原生JS的轮播图组件.有了这个需求就开始着手准备了,代码当然是以简洁为目标,轮播图的各个功能 ...

随机推荐

  1. Creating a Clean, Minimal-Footprint ASP.NET WebAPI Project with VS 2012 and ASP.NET MVC 4

    Creating a Clean, Minimal-Footprint ASP.NET WebAPI Project with VS 2012 and ASP.NET MVC 4 Building O ...

  2. ABP理论学习之启动配置

    返回总目录 本篇目录 配置ABP 配置模块 为模块创建配置 为了在应用启动时配置ABP和模块,ABP提供了一个基础设施. 配置ABP 配置ABP是在模块的PreInitialize事件中完成的.下面的 ...

  3. ABP理论学习之缓存Caching

    返回总目录 本篇目录 介绍 ICacheManager ICache ITypedCache 配置 介绍 ABP提供了缓存的抽象,它内部使用了这个缓存抽象.虽然默认的实现使用了MemoryCache, ...

  4. Scrum Guide - Scrum指南中文版

    现在公司在使用敏捷开发模式进行日常的开发和管理工作,所以我看了下Ken Schwaber的<Scrum Guide>这本小册子,原本是英文的,这里提供中文的,以供日后复习和参考. Scru ...

  5. iOS开发系列—Objective-C之Foundation框架

    概述 我们前面的章节中就一直新建Cocoa Class,那么Cocoa到底是什么,它和我们前面以及后面要讲的内容到底有什么关系呢?Objective-C开发中经常用到NSObject,那么这个对象到底 ...

  6. [.net 面向对象程序设计进阶] (24) 团队开发利器（三）使用SVN多分支并行开发(下)

    [.net 面向对象程序设计进阶] (24) 团队开发利器(三)使用SVN多分支并行开发(下) 本篇导读: 接上篇继续介绍SVN的高级功能,即使用分支并行开发.随着需求的不断变更,新功能的增加.特别是 ...

  7. MySQL 权限

    create user创建用户 CREATE USER li@localhost IDENTIFIED BY 'li'; 授予用户li数据库person的所有权限,并允许用户li将数据库person的 ...

  8. C语言 · 删除数组0元素

    从键盘读入n个整数放入数组中,编写函数CompactIntegers,删除数组中所有值为0的元素,其后元素向数组首端移动.注意,CompactIntegers函数需要接受数组及其元素个数作为参数,函数 ...

  9. RequireJS学习笔记

    前言 进入移动前端是很不错的选择,这块也是我希望的道路,但是不熟悉啊... 现在项目用的是require+backbone,整个框架被封装了一次,今天看了代码搞不清楚,觉得应该先从源头抓起,所以再看看 ...

  10. 使用Ldoc给Lua生成文档

    Ldoc介绍 LDoc是一个Lua的文档生成工具,过去,比较常用的Lua生成文档的工具是LuaDoc,可惜作者自从2008年之后就再也没有发布过新的版本了,说明作者基本上已经放弃维护了.而LDoc则是 ...