در ارتباط با همین مطلب بخوانید



نشانگر های سفارشی با CSS و jQuery - جی کوئری


تاریخ : سه شنبه,۲۱ دی ۱۳۹۵ تعداد بازدید :476

در این آموزش به شما نشان می دهیم که چگونه شما می توانید از نشانگر های سفارشی با استفاده از 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"
		});
	});

});

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


منبع: پورتال پادرا

برچسب ها :





این مقاله را دوست داشتید؟ آنرا به اشتراک بگذارید



دیدگاه خودتان را ارسال کنید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز با * علامت گذاری شده اند.






star TOP 10

  • مقالات
  • بیمارستان
  • دکتر
  • دارو


مطالب این سایت تنها جنبه اطلاع رسانی و آموزشی داشته و توصیه پزشکی تخصصی تلقی نمی شوند و نباید آنها را جایگزین مراجعه به پزشک جهت تشخیص و درمان دانست.
هشدار! تجويز و تعيين دوز دارو به عهده پزشک مي باشد و پورتال پادرا هيچگونه مسئوليتي در خصوص مصرف خود سرانه دارو ندارد