جستجو
زمانی که متن خود را وارد می نمایید در صورت وجود اطلاعات ، اطلاعات مورد نظر بصورت همزمان و بدون زدن هیچ دکمه ای نمایش داده می شود.
عضویت در خبرنامه
جهت لغو عضویت کلیک نمایید
شمارشگر شبکه های اجتماعی
پسندیده
0
فیسبوک
0
توییتر
0
گوگل پلاس
13
لینک ادین
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

   تعداد بازدید: ۴۷۳
timeago  بوســیله  php  و  jquery  ( مدت زمان بودن در یک صفحه)

timeago بوســیله php و jquery ( مدت زمان بودن در یک صفحه)

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

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

   تعداد بازدید: ۴۱۴
CSS3 در Internet Explorer

CSS3 در Internet Explorer

   تعداد بازدید: ۶۰۸
ساخت یک اسلاید شو بدون کتابخانه

ساخت یک اسلاید شو بدون کتابخانه

   تعداد بازدید: ۳۸۶