Java Web:单词积累，JQUERY动画效果，自制gif演示效果，PPT，图片素材【诗书画唱】

2020-11-18 17:15 作者:诗书画唱 0人读过 | 我要投稿

$(function(){

$('#btn').click(function(){

$('#ctx1').fadeOut(5000);

$('#ctx2').fadeIn(5000);

});

//实现闪烁效果

$('#shine').click(function(){

$('#ctx1').fadeToggle();

});

//自动闪烁效果

$('#ctx1').fadeToggle(500,function(){

$(this).fadeToggle(500,arguments.callee);

});

})

<!DOCTYPE html>

<html>

<head>

$(function(){

$('#ctx').slideUp(5000);

$('#ctx1').slideDown(5000);

})

</script>

</head>

<body>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

.h {

display: none;

}

.s {

display: block;

}

</style>

$(function(){

//$('.h').show(5000);

//$('.s').hide(5000);

$('#btn').click(function(){

$('div').first().show(3000,function(){

// $('div').eq(1).show(5000,function(){

// $('div').eq(2).show(5000);

// });

$(this).next().show(3000,function(){

$(this).next().show(5000);

});

</script>

</head>

<body>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

$(function(){

$('#btn').click(function(){

$('#ctx').animate({width: '300px'},2000)

.delay(2000)

.animate({height: '300px'},1000)

.queue(function(next){

$(this).css('background-color','blue');

//如果需要继续执行后面的动画效果，就必须调用next函数

next();

}).animate({fontSize: '+=20px'},2000)

.animate({left: '100px'},1000);

});

</script>

</head>

<body>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

$(function(){

$('#btn').click(function(){

$('#ctx').animate({

width: '200px',

height: '200px',

fontSize: '30px',

left: '200px',

top: '200px'

},3000,function(){

alert('动画执行结束');

});

</script>

</head>

<body>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<title>Abraham Lincoln's Gettysburg Address</title>

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;

}

#switcher {

width: 300px;

padding: .5em;

border: 1px solid #777;

}

.label {

width: 130px;

margin: .5em 0;

cursor: pointer;

}

</style>

$(document).ready(function(){

//元素选择器+类选择器

/*var $speech = $('div.speech');

var defaultSize = $speech.css('fontSize');

//可持续的放大或者缩小字体

$('#switcher button').click(function() {

//parseFloat会在一个字符串中从左到右地查找一个浮点数。

//例如，它会将字符串'12'转换成数字12。

//另外，它还会去掉末尾的非数字字符，因此'12px'就变成了12

var num = parseFloat($speech.css('fontSize'));

switch (this.id) {

case 'switcher-large':

num *= 1.4;

break;

case 'switcher-Small':

num /= 1.4;

break;

default:

num = parseFloat(defaultSize);

}

$speech.css('fontSize', num + 'px');

});*/

//无效果

/*$('p').eq(1).hide();

$('a.more').click(function(event) {

//避免a标签进行页面跳转的默认动作

event.preventDefault();

$('p').eq(1).show();

$(this).hide();

});*/

//添加效果1:指定显示速度

//对于jQuery提供的任何效果，都可以指定两种预设的速度参数：'slow'和'fast'。使用.show('slow')会在600毫秒（0.6秒）内完成效果，而.show('fast')则是200毫秒（0.2秒）。如果传入的是其他字符串，jQuery就会在默认的400毫秒内完成效果。要指定更精确的速度，可以使用毫秒数值，例如.show(850)。注意，与字符串表示的速度参数名称不同，数值不需要使用引号。

/*$('p').eq(1).hide();

$('a.more').click(function(event) {

event.preventDefault();

$('p').eq(1).show('slow');

$(this).hide();

});*/

//添加效果2:淡入淡出

//如果想在显示整个段落时，只是逐渐地增大其不透明度，那么可以使用.fadeIn('slow')方法

//类似地，要逐渐减少不透明度，可以使用.fadeOut()。

/*$('p').eq(1).hide();

$('a.more').click(function(event) {

event.preventDefault();

$('p').eq(1).fadeIn('slow');

$(this).hide();

});*/

//添加效果3:滑上和滑下

//使用jQuery的.slideDown()和.slideUp()方法仅改变元素的高度,段落以垂直滑入的效果出现

/*$('p').eq(1).hide();

$('a.more').click(function(event) {

event.preventDefault();

$('p').eq(1).slideDown('slow');

$(this).hide();

});*/

//添加效果4:切换可见性

/*var $firstPara = $('p').eq(1);

$firstPara.hide();

$('a.more').click(function(event) {

event.preventDefault();

if ($firstPara.is(':hidden')) {

$firstPara.fadeIn('slow');

$(this).text('read less');

} else {

$firstPara.fadeOut('slow');

$(this).text('read more');

}

});*/

//添加效果5：jQuery提供了一个.toggle()方法，

//该方法的作用类似于.show()和.hide()方法，

//而且与它们一样的是，.toggle()方法时长参数也是可选的。

//另一个复合方法是.slideToggle()，

//该方法通过逐渐增加或减少元素高度来显示或隐藏元素。

var $firstPara = $('p').eq(1);

$firstPara.hide();

$('a.more').click(function(event) {

event.preventDefault();

$firstPara.slideToggle('slow');

var $link = $(this);

if ($link.text() == 'read more') {

$link.text('read less');

} else {

$link.text('read more');

}

});

//创建自定义动画1

//给修改字体大小的按钮添加动画效果

var $speech = $('div.speech');

var defaultSize = $speech.css('fontSize');

$('#switcher button').click(function() {

var num = parseFloat($speech.css('fontSize'));

switch (this.id) {

case 'switcher-large':

num *= 1.4;

break;

case 'switcher-Small':

num /= 1.4;

break;

default:

num = parseFloat(defaultSize);

}

$speech.animate({fontSize: num + 'px'}, 'slow');

});

//创建自定义动画2

//在元素的CSS定位没有设置成relative或absolute的情况下，

//调整left属性对于匹配的元素毫无作用。

//所有块级元素默认的CSS定位属性都是static，

//这个值精确地表明：在改变元素的定位属性之前试图移动它们，它们只会保持静止不动。

/*$('div.label').click(function() {

var paraWidth = $('div.speech p').outerWidth();

var $switcher = $(this).parent();

var switcherWidth = $switcher.outerWidth();

$switcher.css({

position: 'relative'

}).animate({

borderWidth: '5px',

left: paraWidth - switcherWidth,

height: '+=20px'

}, 'slow');

});*/

//创建自定义动画3

//并发与排队效果

/*$('div.label').click(function() {

var paraWidth = $('div.speech p').outerWidth();

var $switcher = $(this).parent();

var switcherWidth = $switcher.outerWidth();

$switcher.css({position: 'relative'})

.fadeTo('fast', 0.5)//不透明度减退为0.5

.animate({left: paraWidth - switcherWidth}, 'slow')//移动到右侧

.fadeTo('slow', 1.0)//渐增回完全不透明

.slideUp('slow')//隐藏

.slideDown('slow');//再显示出来

});*/

//创建自定义动画4

//把非效果方法添加到队列中的一种方式，就是使用.queue()方法

//在slideUp()执行后但在slideDown()执行前，把<div id="switcher">的背景颜色修改为红色

$('div.label').click(function() {

var paraWidth = $('div.speech p').outerWidth();

var $switcher = $(this).parent();

var switcherWidth = $switcher.outerWidth();

$switcher.css({position: 'relative'})

.fadeTo('fast', 0.5)//不透明度减退为0.5

.animate({left: paraWidth - switcherWidth}, 'slow')//移动到右侧

.fadeTo('slow', 1.0)//渐增回完全不透明

.slideUp('slow')//隐藏

//.css({backgroundColor: '#f00'}) //在这里将背景色设置为红色，但是在单击后会马上执行

//queue()方法就可以把一个匿名函数添加到相应元素的效果队列中。在这个函数内部，我们把背景颜色设置为红色，然后又调用了next()方法，添加的这个next ()方法可以让队列在中断的地方再接续起来，然后再与后续的.slideDown ('slow')连缀在一起。如果在此不使用next()方法，动画就会中断。

.queue(function(next) {

$switcher.css({backgroundColor: '#f00'});

next();

})

//使用回调函数也可以实现queue的效果

//.slideUp('slow', function() {

// $switcher.css({backgroundColor: '#f00'});

//})

.slideDown('slow');//再显示出来

});

//自定义动画5

//处理多组元素

$('p').eq(2).css('border', '1px solid #333')

.click(function() {

//段落3

var $clickedItem = $(this);

//段落3收起，段落4展开

$clickedItem.next().slideDown('slow', function() {

$clickedItem.slideUp('slow');

});

$('p').eq(3).css('backgroundColor', '#ccc').hide();

});

</script>

</head>

<body>

<h2>Abraham Lincoln's Gettysburg Address</h2>

<button id="switcher-default">Default</button>

<button id="switcher-large">Bigger</button>

<button id="switcher-Small">Smaller</button>

</div>

<div>

<p>Fourscore and seven years ago our fathers brought forth on this continent a new nation, conceived in liberty, and dedicated to the proposition that all men are created equal.</p>

<p>Now we are engaged in a great civil war, testing whether that nation, or any nation so conceived and so dedicated, can long endure. We are met on a great battlefield of that war. We have come to dedicate a portion of that field as a final resting-place for those who here gave their lives that the nation might live. It is altogether fitting and proper that we should do this. But, in a larger sense, we cannot dedicate, we cannot consecrate, we cannot hallow, this ground.</p>

<p>The brave men, living and dead, who struggled here have consecrated it, far above our poor power to add or detract. The world will little note, nor long remember, what we say here, but it can never forget what they did here. It is for us the living, rather, to be dedicated here to the unfinished work which they who fought here have thus far so nobly advanced.</p>

<p>It is rather for us to be here dedicated to the great task remaining before us—that from these honored dead we take increased devotion to that cause for which they gave the last full measure of devotion—that we here highly resolve that these dead shall not have died in vain—that this nation, under God, shall have 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>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<title>Abraham Lincoln's Gettysburg Address</title>

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;

}

#switcher {

width: 300px;

padding: .5em;

border: 1px solid #777;

}

.label {

width: 130px;

margin: .5em 0;

cursor: pointer;

}

</style>

$(document).ready(function(){

var $speech = $('div.speech');

var defaultSize = $speech.css('fontSize');

$('#switcher button').click(function() {

var num = parseFloat($speech.css('fontSize'));

switch (this.id) {

case 'switcher-large':

num *= 1.4;

break;

case 'switcher-Small':

num /= 1.4;

break;

default:

num = parseFloat(defaultSize);

}

$speech.animate({fontSize: num + 'px'}, 'slow');

});

$('div.label').click(function() {

var paraWidth = $('div.speech p').outerWidth();

var $switcher = $(this).parent();

var switcherWidth = $switcher.outerWidth();

$switcher.css({position: 'relative'})

.fadeTo('fast', 0.5)

.animate({left: paraWidth - switcherWidth}, 'slow')

.fadeTo('slow', 1.0)

.slideUp('slow')

.queue(function(next) {

$switcher.css({backgroundColor: '#f00'}); next();

})

.slideDown('slow');

});

$('p').eq(2).css('border', '1px solid #333')

.click(function() {

var $clickedItem = $(this);

$clickedItem.next().slideDown('slow', function() {

$clickedItem.slideUp('slow');

});

$('p').eq(3).css('backgroundColor', '#ccc').hide();

});

</script>

</head>

<body>

<!--

(1) 修改样式表，一开始先隐藏页面内容，当页面加载后，慢慢地淡入内容；

$(document).ready(function() {

$('body').css('display', 'none');

$('body').fadeIn(1500);//自行设置时间

});

(2) 在鼠标悬停到段落上面时，给段落应用黄色背景；

$(document).ready(function() {

$('p').mouseover(function(){

$(this).css('backgroundColor', 'yellow');

});//当鼠标移动到段落上时段落背景应用黄色。

$('p').mouseout(function(){

$(this).css('backgroundColor', 'white');

});//当鼠标移出段落上时段落背景应用白色。

});

(3) 单击标题（<h2>）使其不透明度变为25%，同时添加20px的左外边距，

当这两个效果完成后，把讲话文本变成50%的不透明度；

$(document).ready(function() {

$('h2').click(function(){

$(this)

.fadeTo('slow', 0.25)

.animate({

paddingLeft: '+=200' + 'px'//或者paddingLeft: '+=200px'

},{

duration: 'slow',

queue: false

})

.queue(function(next){

$('div.speech').fadeTo('slow', 0.5)

});

(4) 挑战：按下方向键时，使样式转换器<div id="switcher">向相应的方向平滑移动20像素；

四个方向键的键码分别是37（左）、38（上）、39（右）和40（下）。

var key_left = 37;

var key_up = 38;

var key_right = 39;

var key_down = 40;

var $switcher = $('#switcher');

$switcher.css('position', 'relative');

$(document).keyup(function(event){

switch(event.which){

case key_left:

$switcher

.animate({

left: '-=20px'

},{

duration: 'fast'

})

break;

case key_up:

$switcher

.animate({

top: '-=20px'

},{

duration: 'fast'

})

break;

case key_right:

$switcher

.animate({

left: '+=20px'

},{

duration: 'fast'

})

break;

case key_down:

$switcher

.animate({

top: '+=20px'

},{

duration: 'fast'

})

}

});

-->

<h2>Abraham Lincoln's Gettysburg Address</h2>

<button id="switcher-default">Default</button>

<button id="switcher-large">Bigger</button>

<button id="switcher-Small">Smaller</button>

</div>

<div>

<p>Fourscore and seven years ago our fathers brought forth on this continent a new nation, conceived in liberty, and dedicated to the proposition that all men are created equal.</p>

</div>

</body>

</html>

图片素材：