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

در این آموزش به شما نشان می دهیم که چگونه شما می توانید از نشانگر های سفارشی با استفاده از CSSو جاوا اسکریپت و جی کوئری بسازید. نسخه ی نمایشی آن در زیر آمده است. 

قسمت Html

برای HTML، ما یک تگ figure را با یک ID در CSS و جاوا اسکریپت مورد استفاده قرار دادیم.این قسمت را در Body اضافه می کنیم جون می خواهم اشاره گر در تمام قسمت ها تغییر کند. 

<figure id="mouse-pointer"></figure>

قسمت Css

به راحتی کد css را به صفحه خود اضافه می کنید.

* {
cursor: none;
}
figure#mouse-pointer {
background-image: url("../img/pointer.png");
width: 44px;
height: 44px;
position: absolute;
margin-left: -8px;
display: block;
}

در قسمت background-image تصویر نشانه گر خود را مشخص نمایید.

قسمت جاوااسکریپت

و در اینجا قسمت با استفاده از جاوا اسکریپت و جی کوئری موقعیت ماوس را ردیابی و موقعیت نشانگر موس را بر این اساس  تنظیم می نماییم.

$(function (){

	$(window).mousemove(function(event) {
		$("#mouse-pointer").css({
			"top" : event.pageY + "px",
			"left" : event.pageX + "px"
		});
	});

});

دمو نهایی نشانگر موس

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

معرفی کتابخانه‌ AngularJS

   تعداد بازدید: ۴۵۸
قابلیت جدید گوگل reCaptcha(من ربات نیستم؟)

قابلیت جدید گوگل reCaptcha(من ربات نیستم؟)

   تعداد بازدید: ۲۹۱۰
بزرگنمایی تصاویر با پلاگین جی کوئری

بزرگنمایی تصاویر با پلاگین جی کوئری

   تعداد بازدید: ۸۶۸
عناصر معنایی در HTML5

عناصر معنایی در HTML5

   تعداد بازدید: ۵۱۶
آموزش تنظیمات در فایل .htaccess

آموزش تنظیمات در فایل .htaccess

   تعداد بازدید: ۷۴۱