效果：
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. R in Action 读书笔记（5）

    MindMapper原文件

  2. [ASP.NET MVC 小牛之路]11 - Filter

    Filter(筛选器)是基于AOP(面向方面编程)的设计,它的作用是对MVC框架处理客户端请求注入额外的逻辑,以非常简单优美的方式实现横切关注点(Cross-cutting Concerns).横切关 ...

  3. 注册OCX失败

    今天注册某个OCX时,Windows报告以下错误: 模块“XXX.ocx”已加载,但对 DllRegisterServer 的调用失败,错误代码为 0x80040200. 这是Windows权限引起的 ...

  4. 30个你必须记住的CSS选择符

    所以你学会了基础的id,类和后代选择符,然后你就一直用它们了吗?如果是这样,你丢失了(css的)巨大的灵活性.在本文中提到的很多选择器属于CSS3规范的一部分,因此,只有在现代浏览器中才可使用. 1. ...

  5. SSISDB5：Parameter

    Parameter 是Package 提供给外界的接口,通过传递不同的Parameter value,能够动态控制 Package 执行不同的Task或container,产生不同的结果. 一,Par ...

  6. Security5：Execute AS 和 impersonate 权限

    principal 是统称,包括login,user,role等,可以向作为安全主体的用户授予权限,principal分为server level和database level. 登录名是Server ...

  7. 【非愚人】重要通知：04-01 贴吧继PHP资源之后又。。。

    贴吧继PHP资源之后又取消了JAVA,IOS等资源的贴,现在专注于Net,C++,Linux,平面设计.主要是为了让广大Net程序员具备全栈全平台牛人的潜力,故而取消那些干扰因素.Net的潜力和活力大 ...

  8. Sql Server系列：Transact-SQL概述

    结构化查询语言(Structure Query Language,SQL)是对数据库进行查询和修改的语言.Transact-SQL是SQL的一种实现形式,它包含了标准的SQL语言部分. 根据完成的具体 ...

  9. OpenCASCADE Color Scale

    OpenCASCADE Color Scale eryar@163.com Abstract. The color scale is a specialized label object that d ...

  10. .Net 转战 Android 4.4 日常笔记（6）--Android Studio DDMS用法

    Android Studio DDMS与Eclipse DDMS大同小异,下面了解DDMS的使用 DDMS(Dalvik Debug Monitor Service )Dalvik调试监控服务 DDM ...