Alfie
Cyber Risk Analyst
2
MONTHS
2 2 MONTHS OF SERVICE
LEVEL 1
300 XP
In this chapter we are about to learn how to make a sparkle effect in your mouse cursor. You can download and use this in your projects or systems. Just follow the instructions below.
Instructions
Writing our css code
Writing our javacript code
Lastly, our html code
Finally, you have successfully created a sparkling cursor effect. For more questions, suggestions and queries, feel free to comment below or email me at [email protected]
Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.
Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.
FOR YOUR OWN SAFETY, PLEASE:
1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.
Instructions
Writing our css code
- <style type=
"text/css"
>
- BODY{
- overflow-x
:
hidden
;
- }
- .s1
- {
- position
:
absolute
;
- font-size
:
10pt
;
- color
:
blue
;
- visibility
:
hidden
;
- }
- .s2
- {
- position
:
absolute
;
- font-size
:
18pt
;
- color
:
red
;
- visibility
:
hidden
;
- }
- .s3
- {
- position
:
absolute
;
- font-size
:
14pt
;
- color
:
gold
;
- visibility
:
hidden
;
- }
- .s4
- {
- position
:
absolute
;
- font-size
:
12pt
;
- color
:
lime
;
- visibility
:
hidden
;
- }
- </style>
Writing our javacript code
- <
SCRIPT LANGUAGE=
"javascript"
TYPE=
"text/javascript"
>
- var
standardbody=
(
document.compatMode
==
"CSS1Compat"
)
?
document.documentElement
:
document.body
- var
nav =
(
!
document.all
||
window.opera
)
;
- var
tmr =
null
;
- var
spd =
50
;
- var
x =
0
;
- var
x_offset =
5
;
- var
y =
0
;
- var
y_offset =
15
;
- document.onmousemove
=
get_mouse;
- function
get_mouse(
e)
- {
- x =
(
nav)
?
e.pageX
:
event.clientX
+
standardbody.scrollLeft
;
- y =
(
nav)
?
e.pageY
:
event.clientY
+
standardbody.scrollTop
;
- x +=
x_offset;
- y +=
y_offset;
- beam(
1
)
;
- }
- function
beam(
n)
- {
- if
(
n<
5
)
- {
- document.getElementById
(
'div'
+
n)
.style
.top
=
y+
'px'
- document.getElementById
(
'div'
+
n)
.style
.left
=
x+
'px'
- document.getElementById
(
'div'
+
n)
.style
.visibility
=
'visible'
- n++;
- tmr=
setTimeout(
"beam("
+
n+
")"
,
spd)
;
- }
- else
- {
- clearTimeout(
tmr)
;
- fade(
4
)
;
- }
- }
- function
fade(
n)
- {
- if
(
n>
0
)
- {
- document.getElementById
(
'div'
+
n)
.style
.visibility
=
'hidden'
- n--;
- tmr=
setTimeout(
"fade("
+
n+
")"
,
spd)
;
- }
- else
clearTimeout(
tmr)
;
- }
- </
SCRIPT>
Lastly, our html code
- <DIV
ID
=
"div1"
CLASS
=
"s1"
>
*</
DIV
>
- <DIV
ID
=
"div2"
CLASS
=
"s2"
>
*</
DIV
>
- <DIV
ID
=
"div3"
CLASS
=
"s3"
>
*</
DIV
>
- <DIV
ID
=
"div4"
CLASS
=
"s4"
>
*</
DIV
>
- <p
align
=
"center"
><font
face
=
"arial"
size
=
"3"
>
Do you have source code, articles, tutorials, web links, <br
/
>
and books to share? You can write your own content here. <br
/
>
You can even have your own blog.</
font
><br
>
- <font
face
=
"arial, helvetica"
size
=
"5"
><a
href
=
"http://sourcecodester.com"
>
Sourcecodester</
a
></
font
>
- </
p
>
- <p
align
=
"center"
><font
face
=
"arial"
size
=
"3"
>
Move yourr cursor around to get the effect.</
font
><br
></
p
>
Finally, you have successfully created a sparkling cursor effect. For more questions, suggestions and queries, feel free to comment below or email me at [email protected]
Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.
Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.
FOR YOUR OWN SAFETY, PLEASE:
1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.