وب گردی
جدیدترین ویدیوها
پربازدیدترین ویدیوها
کانال تلگرام پورتال پادرا

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

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


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

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

});

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


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

برچسب ها :





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




دیدگاه




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