效果：
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. 【腾讯优测干货分享】越用越卡为哪般——如何降低App的待机内存（一）

    本文来自于腾讯优测公众号(wxutest),未经作者同意,请勿转载,原文地址:http://mp.weixin.qq.com/s/1_FKMbi1enpcKMqto-o_FQ 作者:腾讯TMQ专项测试 ...

  2. 基于zookeeper实现统一资源管理

    分布式系统中经常涉及到配置资源的管理,比如,一个应用系统需要部署在多台服务器上,但是他们拥有某些的配置项是相同的,如果配置变更,需要修改这些配置,那么需要同时修改每台服务器,这样做比较麻烦而且容易出错 ...

  3. Linux 配置YUM

    标签:MYSQL/linux 概述 文章主要介绍配置163,mysql,epel这三个yum源. 目录 概述 步骤 下载安装包 卸载自带的yum 安装yum包 添加yum 总结 步骤 安装163源 注 ...

  4. [每日电路图] 9、介绍一种低价简单的4.2V锂电池充电及稳压(LDO)电路——RT9193，SD8017

    消费类电子电路图设计中往往会涉及到4.2V锂离子电池充电电路.及4.2V转3.3V的LDO稳压电路,这里分享一种简单.便宜的设计方案: RT9193 300mA,Ultra-Low Noise,Ult ...

  5. Self Host模式下的ASP. NET Web API是如何进行请求的监听与处理的？

    构成ASP.NET Web API核心框架的消息处理管道既不关心请求消息来源于何处,也不需要考虑响应消息归于何方.当我们采用Web Host模式将一个ASP.NET应用作为目标Web API的宿主时, ...

  6. Step by step Install a Local Report Server and Remote Report Server Database

    原创地址:http://www.cnblogs.com/jfzhu/p/4012097.html 转载请注明出处 前面的文章<Step by step SQL Server 2012的安装 &g ...

  7. ActiveMQ的介绍及使用实例.

    今天就来说下 这个项目中使用ActiveMQ的情况, MQ: message queue, 顾名思义就是消息队列的意思. 一: 使用场景:  消息队列在大型电子商务类网站,如京东.淘宝.去哪儿等网站有 ...

  8. Drupal8重命名上传的中文名文件

    完整的模块代码文件在Coding.net上,想直接使用的请前往下载:https://coding.net/u/yamus/p/chinese_rename/git/tree/master 最近吧Dru ...

  9. Birt报表存储过程多选参数的设置

    Birt对存储过程的操作是很简单的一行语句,只需要在Data Set中写上类似这样 {call CAMPAIGN_REAL_TIME_MONITOR(?,?)} 如下图 本报表是存在两个参数,一个允许 ...

  10. 谈谈service层在mvc框架中的意义和职责

    mvc框架由model,view,controller组成,执行流程一般是:在controller访问model获取数据,通过view渲染页面. mvc模式是web开发中的基础模式,采用的是分层设计, ...