جستجو
زمانی که متن خود را وارد می نمایید در صورت وجود اطلاعات ، اطلاعات مورد نظر بصورت همزمان و بدون زدن هیچ دکمه ای نمایش داده می شود.
عضویت در خبرنامه
جهت لغو عضویت کلیک نمایید
شمارشگر شبکه های اجتماعی
پسندیده
0
فیسبوک
0
توییتر
0
گوگل پلاس
0
لینک ادین
11
نمودار بازدید از موضوع ها
نویسنده : admin تعداد بازدید : ۹۰۸ تاریخ : چهارشنبه , ۱۵مردادماه ۱۳۹۳
نمودار متحرک ساده با استفاده از5  HTML/  CSS / jQuery
امتیاز دهید
تعداد رای 0 امتیاز 0

در این مقاله ه طور خلاصه بر سر اینکه چگونه می توانیم با CSS و jQuery  نمودار متحرک بسازیم توضیح داده شده است.

کد HTML

ساده ترین برای استفاده از دو عنصر داخل یک div است. یکی UL برای محور و ارزش های عمودی استفاده می شود. یکی دیگر برای محور افقی و ارزش به عنوان میله در نمودار استفاده می شود. برای ساختن این نمودار از عناصر html دیگری هم می توان استفاده کرد.

<div id="chart">
  <ul id="numbers">
    <li><span>100%</span></li>
    <li><span>90%</span></li>
    <li><span>80%</span></li>
    <li><span>70%</span></li>
    <li><span>60%</span></li>
    <li><span>50%</span></li>
    <li><span>40%</span></li>
    <li><span>30%</span></li>
    <li><span>20%</span></li>
    <li><span>10%</span></li>
    <li><span>0%</span></li>
  </ul>

  <ul id="bars">
    <li><div data-percentage="56" class="bar"></div><span>Option 1</span></li>
    <li><div data-percentage="33" class="bar"></div><span>Option 2</span></li>
    <li><div data-percentage="54" class="bar"></div><span>Option 3</span></li>
    <li><div data-percentage="94" class="bar"></div><span>Option 4</span></li>
    <li><div data-percentage="44" class="bar"></div><span>Option 5</span></li>
    <li><div data-percentage="23" class="bar"></div><span>Option 6</span></li>
  </ul>
</div>

کدcss

همانطور که کدHTMLبالا را می بینید، ما با استفاده از داده های صفات برای مقادیر درصد (ارتفاع میله)jQueryبرای تحریک آنها استفاده کنیم.

ما به سادگی می توانیم یک لیست به صورت عمودی و دیگری به صورت افقی بسازیم. لیست افقی دارای یک عنصر فرزند شامل میله می باشد، که ما با مقداردهی اولیه 0 ارتفاع قرار دهده تا بتوانیم درصد های خود را با استفاده از جی کوئری تنظیم کنیم.

@import url(http://fonts.googleapis.com/css?family=Roboto:400+700);
body {
background: #30303A;
font-family: Roboto;
}
#chart {
width: 650px;
height: 300px;
margin: 30px auto 0;
display: block;
}
#chart #numbers {
width: 50px;
height: 100%;
margin: 0;
padding: 0;
display: inline-block;
float: left;
}
#chart #numbers li {
text-align: right;
padding-right: 1em;
list-style: none;
height: 29px;
border-bottom: 1px solid #444;
position: relative;
bottom: 30px;
}
#chart #numbers li:last-child {
height: 30px;
}
#chart #numbers li span {
color: #eee;
position: absolute;
bottom: 0;
right: 10px;
}
#chart #bars {
display: inline-block;
background: rgba(0, 0, 0, 0.2);
width: 600px;
height: 300px;
padding: 0;
margin: 0;
box-shadow: 0 0 0 1px #444;
}
#chart #bars li {
display: table-cell;
width: 100px;
height: 300px;
margin: 0;
text-align: center;
position: relative;
}
#chart #bars li .bar {
display: block;
width: 70px;
margin-left: 15px;
background: #49E;
position: absolute;
bottom: 0;
}
#chart #bars li .bar:hover {
background: #5AE;
cursor: pointer;
}
#chart #bars li .bar:hover:before {
color: white;
content: attr(data-percentage) "%";
position: relative;
bottom: 20px;
}
#chart #bars li span {
color: #eee;
width: 100%;
position: absolute;
bottom: -2em;
left: 0;
text-align: center;
}

کد JavaScript

آخرین قسمت، استفاده از JavaScript است. با استفاده از یک حلقه تمامی اقلام لیست و همچنین به میله و ارتفاع با استفاده از ویژگی درصد مقدار می دهیم.

$(function() {
$("#bars li .bar").each( function( key, bar ) {
var percentage = $(this).data("percentage");

$(this).animate({
"height" : percentage + "%"
}, 1000);
});
});

خروجی نمودار متحرک ساده با استفاده از5  HTML/  CSS / jQuery

 

comments powered by Disqus
تبلیغات
آخرین تصاویر
شهر تاریخی جیزد باغ شازده ماهان عمارت و باغ نشاط (سالار) تقی آباد غار پرده رستم کاروانسرای شاه عباس یونسی حلزون اسب در کوهستان بچه پنگوئن بچه میمون ديگو کاستا دنی آلوز میامی هیت پیرلو فرانچسکو توتی لیونل مسی طوطی دریا جاده زمستانی گورخر ... ... پل کلبه ببر
وضعیت آب و هوا
  • یزد
  • ارومیه
  • اصفهان
  • البرز
  • مشهد
  • شیراز
  • تبریز
  • تهران
  • زاهدان
  • اهواز
  • زنجان
  • رامسر
  • بابلسر
  • کرمانشاه
  • بندرعباس
  • کرمان
  • گرگان
  • یاسوج
  • همدان
  • آبادان
  • مکه
موضوعات مشابه
انواع ورودی های جدید در HTML5

انواع ورودی های جدید در HTML5

   تعداد بازدید: ۷۲۴
عناصر جدید HTML5

عناصر جدید HTML5

   تعداد بازدید: ۵۰۷
تغییر اندازه تصاویر بوسیله php

تغییر اندازه تصاویر بوسیله php

   تعداد بازدید: ۴۴۷
آشنایی با Modernizr و کاربرد آن در HTML5

آشنایی با Modernizr و کاربرد آن در HTML5

   تعداد بازدید: ۴۳۲
نشانگر های سفارشی با  CSS و jQuery

نشانگر های سفارشی با CSS و jQuery

   تعداد بازدید: ۵۵۵