javascript实现动态统计图开发实例

本文实例讲述了javascript实现动态统计图的代码。分享给大家供大家参考。具体如下:
运行效果截图如下:

具体代码如下
html代码:

<div id="content">
    <div class="legend">
    <h1>汽车销量:</h1>
    <div class="skills">
    <ul>
    <li class="jq">大众</li>
    <li class="css">丰田</li>
    <li class="html">别克</li>
    <li class="php">福特</li>
    <li class="sql">长安</li>
    </ul>
    </div>
    </div>
    <div id="diagram"></div>
    </div>
    <div class="get">
    <div class="arc">
    <span class="text">大众</span>
    <input type="hidden" class="percent" value="95" />
    <input type="hidden" class="color" value="#97BE0D" />
    </div>
    <div class="arc">
    <span class="text">丰田</span>
    <input type="hidden" class="percent" value="90" />
    <input type="hidden" class="color" value="#D84F5F" />
    </div>
    <div class="arc">
    <span class="text">别克</span>
    <input type="hidden" class="percent" value="80" />
    <input type="hidden" class="color" value="#88B8E6" />
    </div>
    <div class="arc">
    <span class="text">福特</span>
    <input type="hidden" class="percent" value="53" />
    <input type="hidden" class="color" value="#BEDBE9" />
    </div>
    <div class="arc">
    <span class="text">长安</span>
    <input type="hidden" class="percent" value="45" />
    <input type="hidden" class="color" value="#EDEBEE" />
    </div>
    </div>

css代码:

#content {
position:absolute;
top:50%;
left:50%;
margin:-340px 0 0 -450px;
width:900px;
height:600px;
}
.legend {
float:left;
width:250px;
margin-top:140px;
}
#content h1 {
font-family:'Cabin Sketch', arial, serif;
text-shadow:3px 3px 0 #ddd;
color:#193340;
font-size:40px;
margin-bottom:40px;
text-align:right;
}
.skills {
float:left;
clear:both;
width:100%;
}
.skills ul,
.skills li {
display:block;
list-style:none;
margin:0;
padding:0;
}
.skills li {
float:right;
clear:both;
padding:0 15px;
height:35px;
line-height:35px;
color:#fff;
margin-bottom:1px;
font-size:18px;
}

js代码:

var o = {
      init: function () {
        this.diagram();
      },
      random: function (l, u) {
        return Math.floor((Math.random() * (u - l + 1)) + l);
      },
      diagram: function () {
        var r = Raphael('diagram', 600, 600),
          rad = 73;
        r.circle(300, 300, 85).attr({ stroke: 'none', fill: '#193340' });
        var title = r.text(300, 300, 'loading...').attr({
          font: '20px Arial',
          fill: '#fff'
        }).toFront();
        r.customAttributes.arc = function (value, color, rad) {
          var v = 3.6 * value,
            alpha = v == 360 ? 359.99 : v,
            random = o.random(91, 240),
            a = (random - alpha) * Math.PI / 180,
            b = random * Math.PI / 180,
            sx = 300 + rad * Math.cos(b),
            sy = 300 - rad * Math.sin(b),
            x = 300 + rad * Math.cos(a),
            y = 300 - rad * Math.sin(a),
            path = [['M', sx, sy], ['A', rad, rad, 0, +(alpha > 180), 1, x, y]];
          return { path: path, stroke: color }
        }
        $('.get').find('.arc').each(function (i) {
          var t = $(this),
            color = t.find('.color').val(),
            value = t.find('.percent').val(),
            text = t.find('.text').text();
          rad += 30;
          var z = r.path().attr({ arc: [value, color, rad], 'stroke-width': 26 });
          z.mouseover(function () {
            this.animate({ 'stroke-width': 50, opacity: .75 }, 1000, 'elastic');
            if (Raphael.type != 'VML') //solves IE problem
    this.toFront();
            title.animate({ opacity: 0 }, 500, '>', function () {
              this.attr({ text: text + '\n' + value + '%' }).animate({ opacity: 1 }, 500, '<');
            });
          }).mouseout(function () {
            this.animate({ 'stroke-width': 26, opacity: 1 }, 1000, 'elastic');
          });
        });
      }
    }
    $(function () { o.init(); });

希望本文所述对大家学习javascript程序设计有所帮助。

本页内容版权归属为原作者,如有侵犯您的权益,请通知我们删除。

js实现索引图片切换效果 - 2015-11-23 17:11:16

本文实例讲述了js实现索引图片切换效果的代码。分享给大家供大家参考。具体如下: 运行效果截图如下: 具体代码如下 html代码: div id="slideshowHolder" img src="img/1.jpg" / img src="img/2.jpg" / img src="img/3.jpg" / /div css代码: .ft-prev, .ft-next { background-color: #000; padding: 0 10px; color:#fff; } js代码: $(doc
首先先说一说$. browser browser就是用来获取浏览器基本信息的。 jQuery 从 1.9 版开始,移除了 $.browser 和 $.browser.version , 取而代之的是 $.support 。 在更新的 2.0 版本中,将不再支持 IE 6/7/8。 以后,如果用户需要支持 IE 6/7/8,只能使用 jQuery 1.9。 解决方法 :加入以下js即可 (function(jQuery){ if(jQuery.browser) return; jQuery.browser
一、主要介绍: 这题采用之前的技术,根据table的rows属性,获得数组,然后对数组设置样式,所以颜色就出来了。 1).全选复选框 ,通过 var nodess=document.getElementsByName("mail"); for(var x=0;xnodess.length;x++){nodess[x].checked=nodes.checked;} 复选框函数进行 2).按钮全选,反选,和取消全选, 可以用一个函数写,传入不同的参数AllBybtn(num)类型即可 函数里面 根据js的特
本文实例讲述了jQuery实现分隔条左右拖动功能的实现代码。分享给大家供大家参考。具体如下: 运行效果截图如下: 具体内容如下 !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"html head title New Document /title script type="text/javascript" src="jquery.min.js"/scrip

jquery背景跟随鼠标滑动导航 - 2015-11-21 17:11:04

本文实例讲述了支持背景图片上下滑动的竖向jQuery菜单导航特效代码,分享给大家供大家参考。具体如下: 运行效果截图如下: 具体代码如下 html xmlns="http://www.w3.org/1999/xhtml"headmeta charset="gb2312"title左边跟随鼠标滑动导航/titlemeta name="keywords" content="滑动导航" /meta name="description" content="左边跟随鼠标滑动导航" /style/*---------
一个纯jq形式的横向轮播焦点图,可点击小圆点或者左右按钮进行切换,属于定宽类型。改成自适应宽度的也不难,将css里面的bannerCon宽度改为百分比,再在js里面将ul和li的宽度跟随父级容器的宽度变化即可,需要用到$(window).resize。 兼容到IE6+以上浏览器,有轮播速度和切换间隔两个参数可以改。效果图如下: Html代码如下: !doctype htmlhtml lang="zh-CN"head meta charset="utf-8" titlebanner图/title link
WebSocket是HTML5开始提供的一种浏览器与服务器间进行全双工通讯的网络技术。在WebSocket API中,浏览器和服务器只需要要做一个握手(handshaking)的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。 WebSocket是一个通信的协议,分为服务器和客户端。服务器放在后台,保持与客户端的长连接,完成双方通信的任务。客户端一般都是实现在支持HTML5浏览器核心中,通过提供JavascriptAPI使用网页可以建立websocket连接。 在我写这
本文实例讲述了js鼠标点击图片切换效果实现代码。分享给大家供大家参考。具体如下: 运行效果截图如下: 具体代码如下: html代码: div id="menuWrapper" class="menuWrapper bg1" ul class="menu" id="menu" li class="bg1" a id="bg1" href=#> css代码: ul.menu li a{ float:left; width:265px; height:50px; margin-top:450px; text-a
如果希望自己的浏览器禁止运行网页上的 JavaScript 脚本的话,可以按照下面的方法将自己的浏览器设置一下: 【1】:打开 IE 浏览器,然后选择 【工具】-- 【Internet 选项】--【安全】--【自定义级别】然后在打开的窗体中向下拉滚动条,找到 "脚本" 选项,里面的第一项就是 Java 小程序脚本,选择下面三个选项中的"禁用"就可以了.如下图: 【2】:不过要注意,一旦将这一项禁用后,虽然可以提高了系统的安全性,但是网页的一些功能也会被屏蔽掉,比如,在你写的程序中有用 JavaScript
BootStrap学习从现在开始,前端开发框架Bootstrap,可大大简化网站开发过程,从而深受广大开发者的喜欢。本文总结了Bootstrap之所以广泛流传的11大原因。如果你还没有使用Twitter Bootstrap,建议你去了解一下。小编也是最近才有所发现的,不过有更好的消息,在前两天微软发布的VS2013正式版中,也已经将BootStrap3.0的版本加入了额,连微软都看到bootStrap的强大,而且它的确很不错,所以我也不得不学习。 bootstrap深受广大