Home > Developer > Web Develop
About the answer:
(1) Modify the style sheet, first hide the page content, when the page loaded, slowly fade in content;
$ (document). Ready (function () {
$ (' body '). Hide (). FadeIn (4000);
})
(2) When the mouse hovers over the paragraph, apply a yellow background to the paragraph;
$ (document). Ready (function () {
$ (' P '). MouseMove (function (event) {
When the mouse enters
$ (this). CSS (' background ', ' yellow ');
});
$ (' P '). Mouseout (function (event) {
When the mouse enters
$ (this). CSS (' background ', ' white ');
});
})
(3) Click the title ($ (document). Ready (function () {
$ (' Div#container > H2 '). Click (function () {
$ (this). Animate ({
Opacity: ' 0.25 ',//opacity
MarginLeft: ' 20px ',
}, ' slow ');
$ (' Div.speech '). Animate ({opacity: ' 0.5 '}, ' slow ');
})
})
(4) Challenge: When the arrow key is pressed, the style converter moves smoothly 20 pixels in the corresponding direction, and the key codes of the four arrow keys are 37 (left), 38 (upper), 39 (right) and 40 (bottom).
$ (document). Ready (function () {
$ (' Div#switcher '). CSS (' background ', ' red ');
$ (document). KeyUp (function (event) {
var key = Event.which;
Console.log (key);
Switch (key)
{
Case 37:
$ (' Div#switcher '). CSS ({position: ' relative '})
. Animate ({left: '-=20px '},40);
Break
Case 38:
$ (' Div#switcher '). CSS ({position: ' relative '})
. Animate ({top: '-=20px '},40);
Break
Case 39:
$ (' Div#switcher '). CSS ({position: ' relative '})
. Animate ({left: ' +=20px '},40);
Break
Case 40:
$ (' Div#switcher '). CSS ({position: ' relative '})
. Animate ({top: ' +=20px '},40);
Break
Default
Alert (' Input is invalid, please enter directional keying ');
}
});//keyboard event
})//page load
About the book HTML code:
<! DOCTYPE html>
<meta charset= "Utf-8" >
<title>abraham Lincoln ' s Gettysburg address</title>
<link rel= "stylesheet" href= "Css/04.css" type= "Text/css"/>
<script src= "Jquery.js" ></script>
<script src= "Js/04.js" ></script>
<body>
<div id= "Container" >
<div id= "Switcher" >
<div class= "label" >text size</div>
<button id= "Switcher-default" >Default</button>
<button id= "Switcher-large" >Bigger</button>
<button id= "Switcher-small" >Smaller</button>
</div>
<div class= "speech" >
<p>fourscore and seven years ago our fathers brought forth on the continent a new nation, conceived in liberty, and Dedicated to the proposition, all men is created equal.</p>
<p>now We is engaged in a great civil war, testing whether that nation, or any nation so conceived and so dedicated , can long endure. We are met in a great battlefield of that war. We have come to dedicate a portion of this field as a final resting-place for those who here gave their lives the NAT Ion might live. It is altogether fitting and proper that we should does this. But, in a larger sense, we cannot dedicate, we cannot consecrate, we cannot hallow, this ground.</p>
<a href= "#" class= "more" >read more</a>
<p>the brave men, living and dead, who struggled here has consecrated it, far above we poor power to add or Detrac T. The world would little note, nor long remember, what are we say here, but it can never forget what they do here. It's For us the living, rather, to being dedicated here and the unfinished work which they who fought here has thus far so n obly advanced.</p>
<p>it is rather for us to being here dedicated to the great task remaining before us—that from these honored Dead we take increased devotion to, cause for which they gave, the last full measure of devotion—that we are here Highly resolve that these dead shall not having died in Vain—that this nation, under God, shall has a new birth of freedom and that government of the people, by the people, for the people, shall not perish from the earth.</p>
</div>
</div>
</body>
About the book CSS section
/***************************************
Default Styles
************************************** */
HTML, Body {
margin:0;
padding:0;
}
Body {
font:62.5% Verdana, Helvetica, Arial, Sans-serif;
Color: #000;
Background: #fff;
}
#container {
Font-size:1.2em;
margin:10px 2em;
}
H1 {
Font-size:2.5em;
margin-bottom:0;
}
H2 {
Font-size:1.3em;
Margin-bottom:. 5em;
}
h3 {
Font-size:1.1em;
margin-bottom:0;
}
Code {
Font-size:1.2em;
}
A
Color: #06581f;
}
/***************************************
Chapter Styles
************************************** */
#switcher {
width:300px;
padding:. 5em;
border:1px solid #777;
}
. label {
width:130px;
margin:. 5em 0;
Cursor:pointer;
}
Notes:
respond to keyboard events: If you want to know which key the user has pressed, you should listen for the KeyUp or KeyDown event, if you want to know What characters are entered and should listen for the KeyPress event. For the functionality we want to implement here, we just want to know
When the user presses the D, N, or L keys, it is necessary to use the KeyUp
The parsefloat () function only gets the numeric part of the Font size property
The Event.preventdefault () method blocks the default behavior of an element (for example, when a Submit button is clicked to block the submission of the form)
You can specify two preset speed parameters: ' Slow ' and ' fast '. Make
Use. Show (' slow ') to complete the effect in 600 milliseconds (0.6 seconds), while. Show (' fast ') is 200 milliseconds (0.2 seconds).
If you pass in a different string, jquery completes the effect in the default 400 milliseconds. To specify a more precise speed, you can
To use milliseconds values, such as. Show (850). Note that unlike the speed parameter names represented by a string, the values do not need to make
Use quotation marks
The difference between show () and fadeIn two effects is that. FadeIn () Sets the dimensions of the paragraph at the beginning so that the content can be displayed gradually. Similarly, to gradually reduce the opacity, you can use the. FadeOut ()
jquery provides a. Toggle () method that acts like the. Show () and. Hide () methods, and, as they do, the. Toggle () method is also optional. Another composite method is. Slidetoggle (), which displays or hides elements by gradually increasing or decreasing the element height
The basic jquery Tutorial (Fourth Edition), chapter 4th, exercises:
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
