|
|
| 关键字 |
简介 |
示例代码 |
show
hide
toggle
|
显示 隐藏 切换
|
示例代码
|
slideUp
slideDown
slideToggle
|
向上滑动 向下滑动 滑动切换
|
示例代码
|
fadeIn
fadeOut
fadeToggle
fadeTo
|
淡入 淡出 淡入淡出切换 指定淡入程度
|
示例代码
|
|
animate
|
自定义动画效果
|
示例代码
|
|
callback
|
回调函数
|
示例代码
|
示例
1
:
显示 隐藏 切换
示例
2
:
向上滑动 向下滑动 滑动切换
示例
3
:
淡入 淡出 淡入淡出切换 指定淡入程度
示例
4
:
自定义动画效果
示例
5
:
回调函数
显示 隐藏 切换 分别通过show(), hide(),toggle()实现
也可以加上毫秒数，表示延时操作,比如show(2000)
");
window.frames["iframe_show987"].document.write(decodeHtml($("textarea#stepcodeTextarea987").val()));
window.frames["iframe_show987"].document.close();
$(window.frames["iframe_show987"]).load(function(){
$("#iframe_show987").height($("#iframe_show987").contents().find("body").height()+showittryitheight);
});
$("#iframe_show987").height($("#iframe_show987").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<script src="http://127.0.0.1/study/jquery.min.js"></script>
<script>
$(function(){
var div = $("#d");
$("#b1").click(function(){
div.hide();
});
$("#b2").click(function(){
div.show();
});
$("#b3").click(function(){
div.toggle();
});
$("#b4").click(function(){
div.show(1000);
});
$("#b5").click(function(){
div.hide(1000);
});
$("#b6").click(function(){
div.toggle(1000);
});
});
</script>
<style>
button{
display:block;
}
div{
border:solid 1px gray;
background-color:pink;
width:300px;
height:100px;
}
</style>
<button id="b1">立即隐藏</button>
<button id="b2">立即显示</button>
<button id="b3">立即切换</button>
<button id="b4">延时显示</button>
<button id="b5">延时隐藏</button>
<button id="b6">延时切换</button>
<br>
<br>
<div id="d">
用于演示效果的DIV
</div>
<script src="http://127.0.0.1/study/jquery.min.js"></script>
<script>
$(function(){
var div = $("#d");
$("#b1").click(function(){
div.hide();
});
$("#b2").click(function(){
div.show();
});
$("#b3").click(function(){
div.toggle();
});
$("#b4").click(function(){
div.show(1000);
});
$("#b5").click(function(){
div.hide(1000);
});
$("#b6").click(function(){
div.toggle(1000);
});
});
</script>
<style>
button{
display:block;
}
div{
border:solid 1px gray;
background-color:pink;
width:300px;
height:100px;
}
</style>
<button id="b1">立即隐藏</button>
<button id="b2">立即显示</button>
<button id="b3">立即切换</button>
<button id="b4">延时显示</button>
<button id="b5">延时隐藏</button>
<button id="b6">延时切换</button>
<br>
<br>
<div id="d">
用于演示效果的DIV
</div>
");
window.frames["iframe987"].document.write(decodeHtml(code987));
window.frames["iframe987"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe987"]).load(function(){
$("#iframe987").height($("#iframe987").contents().find("body").height()+showittryitheight);
});
$("#iframe987").height($("#iframe987").contents().find("body").height()+showittryitheight);
alreadyWriteCode987 = code987;
$("#rendering987").hide();
$("#rendered987").show();
}
var tRereshRetry2DemoPanel987 = setInterval(rereshRetry2DemoPanel987,1000);
var binded987 = false;
$("textarea#stepcodeTextarea987").keyup(function(){
if(!binded987){
$(window).bind('beforeunload',function(){
binded987 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code987 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code987!=newCode){
// window.frames["iframe987"].document.write("
");
// window.frames["iframe987"].document.write(decodeHtml($("textarea#stepcodeTextarea987").val()));
// window.frames["iframe987"].document.close();
// $(window.frames["iframe987"]).load(function(){
// $("#iframe987").height($("#iframe987").contents().find("body").height()+showittryitheight);
// });
// code987 = newCode;
// }
});
$(".tryButton987").click(function(){
$("#tryDiv987").show();
$("#stepcodeTextarea987").focus();
$("#stepcodeTextarea987").height(200);
$("#iframe987").height(0);
window.frames["iframe987"].document.write("
");
window.frames["iframe987"].document.write(decodeHtml($("textarea#stepcodeTextarea987").val()));
window.frames["iframe987"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe987"]).load(function(){
$("#iframe987").height($("#iframe987").contents().find("body").height()+showittryitheight);
});
$("#iframe987").height($("#iframe987").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor987.focus();
editor987.setSize(null, "250");
$("#rendering987").hide();
$("#rendered987").hide();
});
var mixedMode = {
name: "htmlmixed",
scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i,
mode: null},
{matches: /(text|application)\/(x-)?vb(a|script)/i,
mode: "vbscript"}]
};
var editor987 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea987"), {
lineNumbers: true,
styleActiveLine: true,
matchBrackets: true,
mode:"text/html",
theme:"eclipse",
selectionPointer: true,
lineWrapping: true,
extraKeys: {
"Alt-/": "autocomplete",
"Ctrl-F": "findPersistent",
"F8": function(cm) {
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
},
"Esc": function(cm) {
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
}
}
});
editor987.on("change",function(doc){
if(!binded987){
$(window).bind('beforeunload',function(){
binded987 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code987 = newCode;
$("textarea#stepcodeTextarea987").val(newCode);
if(alreadyWriteCode987!=code987){
lastModifedTime987 = new Date().getTime();
$("#rendering987").show();
$("#rendered987").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor987 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor987.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv987").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
示例
2
:
向上滑动 向下滑动 滑动切换
顶
折
向上滑动 向下滑动 滑动切换 分别通过slideUp(), slideDown(),slideToggle()实现
也可以加上毫秒数，表示延时操作，比如slideUp(2000)
");
window.frames["iframe_show988"].document.write(decodeHtml($("textarea#stepcodeTextarea988").val()));
window.frames["iframe_show988"].document.close();
$(window.frames["iframe_show988"]).load(function(){
$("#iframe_show988").height($("#iframe_show988").contents().find("body").height()+showittryitheight);
});
$("#iframe_show988").height($("#iframe_show988").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<script src="http://127.0.0.1/study/jquery.min.js"></script>
<script>
$(function(){
var div = $("#d");
$("#b1").click(function(){
div.slideUp();
});
$("#b2").click(function(){
div.slideDown();
});
$("#b3").click(function(){
div.slideToggle();
});
$("#b4").click(function(){
div.slideUp(2000);
});
$("#b5").click(function(){
div.slideDown(2000);
});
$("#b6").click(function(){
div.slideToggle(2000);
});
});
</script>
<style>
button{
display:block;
}
div{
border:solid 1px gray;
background-color:pink;
width:300px;
height:100px;
}
</style>
<button id="b1">向上滑动</button>
<button id="b2">向下滑动</button>
<button id="b3">滑动切换</button>
<button id="b4">延时向上滑动</button>
<button id="b5">延时向下滑动</button>
<button id="b6">延时滑动切换</button>
<br>
<br>
<div id="d">
用于演示效果的DIV
</div>
<script src="http://127.0.0.1/study/jquery.min.js"></script>
<script>
$(function(){
var div = $("#d");
$("#b1").click(function(){
div.slideUp();
});
$("#b2").click(function(){
div.slideDown();
});
$("#b3").click(function(){
div.slideToggle();
});
$("#b4").click(function(){
div.slideUp(2000);
});
$("#b5").click(function(){
div.slideDown(2000);
});
$("#b6").click(function(){
div.slideToggle(2000);
});
});
</script>
<style>
button{
display:block;
}
div{
border:solid 1px gray;
background-color:pink;
width:300px;
height:100px;
}
</style>
<button id="b1">向上滑动</button>
<button id="b2">向下滑动</button>
<button id="b3">滑动切换</button>
<button id="b4">延时向上滑动</button>
<button id="b5">延时向下滑动</button>
<button id="b6">延时滑动切换</button>
<br>
<br>
<div id="d">
用于演示效果的DIV
</div>
");
window.frames["iframe988"].document.write(decodeHtml(code988));
window.frames["iframe988"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe988"]).load(function(){
$("#iframe988").height($("#iframe988").contents().find("body").height()+showittryitheight);
});
$("#iframe988").height($("#iframe988").contents().find("body").height()+showittryitheight);
alreadyWriteCode988 = code988;
$("#rendering988").hide();
$("#rendered988").show();
}
var tRereshRetry2DemoPanel988 = setInterval(rereshRetry2DemoPanel988,1000);
var binded988 = false;
$("textarea#stepcodeTextarea988").keyup(function(){
if(!binded988){
$(window).bind('beforeunload',function(){
binded988 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code988 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code988!=newCode){
// window.frames["iframe988"].document.write("
");
// window.frames["iframe988"].document.write(decodeHtml($("textarea#stepcodeTextarea988").val()));
// window.frames["iframe988"].document.close();
// $(window.frames["iframe988"]).load(function(){
// $("#iframe988").height($("#iframe988").contents().find("body").height()+showittryitheight);
// });
// code988 = newCode;
// }
});
$(".tryButton988").click(function(){
$("#tryDiv988").show();
$("#stepcodeTextarea988").focus();
$("#stepcodeTextarea988").height(200);
$("#iframe988").height(0);
window.frames["iframe988"].document.write("
");
window.frames["iframe988"].document.write(decodeHtml($("textarea#stepcodeTextarea988").val()));
window.frames["iframe988"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe988"]).load(function(){
$("#iframe988").height($("#iframe988").contents().find("body").height()+showittryitheight);
});
$("#iframe988").height($("#iframe988").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor988.focus();
editor988.setSize(null, "250");
$("#rendering988").hide();
$("#rendered988").hide();
});
var mixedMode = {
name: "htmlmixed",
scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i,
mode: null},
{matches: /(text|application)\/(x-)?vb(a|script)/i,
mode: "vbscript"}]
};
var editor988 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea988"), {
lineNumbers: true,
styleActiveLine: true,
matchBrackets: true,
mode:"text/html",
theme:"eclipse",
selectionPointer: true,
lineWrapping: true,
extraKeys: {
"Alt-/": "autocomplete",
"Ctrl-F": "findPersistent",
"F8": function(cm) {
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
},
"Esc": function(cm) {
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
}
}
});
editor988.on("change",function(doc){
if(!binded988){
$(window).bind('beforeunload',function(){
binded988 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code988 = newCode;
$("textarea#stepcodeTextarea988").val(newCode);
if(alreadyWriteCode988!=code988){
lastModifedTime988 = new Date().getTime();
$("#rendering988").show();
$("#rendered988").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor988 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor988.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv988").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
示例
3
:
淡入 淡出 淡入淡出切换 指定淡入程度
顶
折
淡入 淡出 淡入淡出切换 指定淡入程度 分别通过fadeIn(), fadeOut(),fadeToggle() fadeTo()实现
也可以加上毫秒数，表示延时操作，比如fadeIn(2000)
fadeTo跟的参数是0-1之间的小数。 0表示不淡入，1表示全部淡入
");
window.frames["iframe_show989"].document.write(decodeHtml($("textarea#stepcodeTextarea989").val()));
window.frames["iframe_show989"].document.close();
$(window.frames["iframe_show989"]).load(function(){
$("#iframe_show989").height($("#iframe_show989").contents().find("body").height()+showittryitheight);
});
$("#iframe_show989").height($("#iframe_show989").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<script src="http://127.0.0.1/study/jquery.min.js"></script>
<script>
$(function(){
var div = $("#d");
$("#b1").click(function(){
div.fadeIn();
});
$("#b2").click(function(){
div.fadeOut();
});
$("#b3").click(function(){
div.fadeToggle();
});
$("#b4").click(function(){
div.fadeIn(2000);
});
$("#b5").click(function(){
div.fadeOut(2000);
});
$("#b6").click(function(){
div.fadeToggle(2000);
});
$("#b7").click(function(){
$("#d1").fadeTo("slow",0.2);
$("#d2").fadeTo("slow",0.5);
$("#d3").fadeTo("slow",0.8);
});
});
</script>
<style>
button{
display:block;
}
table div{
border:solid px gray;
background-color:pink;
width:80px;
height:50px;
}
div{
border:solid 1px gray;
background-color:pink;
width:300px;
height:100px;
}
</style>
<button id="b2">淡出</button>
<button id="b1">淡入</button>
<button id="b3">淡入淡出切换</button>
<button id="b5">延时淡出</button>
<button id="b4">延时淡入</button>
<button id="b6">延时滑淡入淡出切换</button>
<button id="b7">fadeTo</button>
<br>
<br>
<div id="d">
用于演示效果的DIV
</div>
<table>
<tr>
<td>
<div id="d1">
用于演示fadeTo 20%
</div>
</td>
<td>
<div id="d2">
用于演示fadeTo 50%
</div>
</td>
<td>
<div id="d3">
用于演示fadeTo 80%
</div>
</td>
</tr>
</table>
<script src="http://127.0.0.1/study/jquery.min.js"></script>
<script>
$(function(){
var div = $("#d");
$("#b1").click(function(){
div.fadeIn();
});
$("#b2").click(function(){
div.fadeOut();
});
$("#b3").click(function(){
div.fadeToggle();
});
$("#b4").click(function(){
div.fadeIn(2000);
});
$("#b5").click(function(){
div.fadeOut(2000);
});
$("#b6").click(function(){
div.fadeToggle(2000);
});
$("#b7").click(function(){
$("#d1").fadeTo("slow",0.2);
$("#d2").fadeTo("slow",0.5);
$("#d3").fadeTo("slow",0.8);
});
});
</script>
<style>
button{
display:block;
}
table div{
border:solid px gray;
background-color:pink;
width:80px;
height:50px;
}
div{
border:solid 1px gray;
background-color:pink;
width:300px;
height:100px;
}
</style>
<button id="b2">淡出</button>
<button id="b1">淡入</button>
<button id="b3">淡入淡出切换</button>
<button id="b5">延时淡出</button>
<button id="b4">延时淡入</button>
<button id="b6">延时滑淡入淡出切换</button>
<button id="b7">fadeTo</button>
<br>
<br>
<div id="d">
用于演示效果的DIV
</div>
<table>
<tr>
<td>
<div id="d1">
用于演示fadeTo 20%
</div>
</td>
<td>
<div id="d2">
用于演示fadeTo 50%
</div>
</td>
<td>
<div id="d3">
用于演示fadeTo 80%
</div>
</td>
</tr>
</table>
");
window.frames["iframe989"].document.write(decodeHtml(code989));
window.frames["iframe989"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe989"]).load(function(){
$("#iframe989").height($("#iframe989").contents().find("body").height()+showittryitheight);
});
$("#iframe989").height($("#iframe989").contents().find("body").height()+showittryitheight);
alreadyWriteCode989 = code989;
$("#rendering989").hide();
$("#rendered989").show();
}
var tRereshRetry2DemoPanel989 = setInterval(rereshRetry2DemoPanel989,1000);
var binded989 = false;
$("textarea#stepcodeTextarea989").keyup(function(){
if(!binded989){
$(window).bind('beforeunload',function(){
binded989 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code989 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code989!=newCode){
// window.frames["iframe989"].document.write("
");
// window.frames["iframe989"].document.write(decodeHtml($("textarea#stepcodeTextarea989").val()));
// window.frames["iframe989"].document.close();
// $(window.frames["iframe989"]).load(function(){
// $("#iframe989").height($("#iframe989").contents().find("body").height()+showittryitheight);
// });
// code989 = newCode;
// }
});
$(".tryButton989").click(function(){
$("#tryDiv989").show();
$("#stepcodeTextarea989").focus();
$("#stepcodeTextarea989").height(200);
$("#iframe989").height(0);
window.frames["iframe989"].document.write("
");
window.frames["iframe989"].document.write(decodeHtml($("textarea#stepcodeTextarea989").val()));
window.frames["iframe989"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe989"]).load(function(){
$("#iframe989").height($("#iframe989").contents().find("body").height()+showittryitheight);
});
$("#iframe989").height($("#iframe989").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor989.focus();
editor989.setSize(null, "250");
$("#rendering989").hide();
$("#rendered989").hide();
});
var mixedMode = {
name: "htmlmixed",
scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i,
mode: null},
{matches: /(text|application)\/(x-)?vb(a|script)/i,
mode: "vbscript"}]
};
var editor989 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea989"), {
lineNumbers: true,
styleActiveLine: true,
matchBrackets: true,
mode:"text/html",
theme:"eclipse",
selectionPointer: true,
lineWrapping: true,
extraKeys: {
"Alt-/": "autocomplete",
"Ctrl-F": "findPersistent",
"F8": function(cm) {
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
},
"Esc": function(cm) {
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
}
}
});
editor989.on("change",function(doc){
if(!binded989){
$(window).bind('beforeunload',function(){
binded989 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code989 = newCode;
$("textarea#stepcodeTextarea989").val(newCode);
if(alreadyWriteCode989!=code989){
lastModifedTime989 = new Date().getTime();
$("#rendering989").show();
$("#rendered989").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor989 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor989.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv989").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
通过animate 可以实现更为丰富的动画效果
animate()第一个参数为css样式
animate()第二个参数为延时毫秒
注： 默认情况下，html中的元素都是固定，并且无法改变的位置的。 为了使用animate()自定义动画效果，需要通过css把元素的position设置为relative、absolute或者fixed。
");
window.frames["iframe_show990"].document.write(decodeHtml($("textarea#stepcodeTextarea990").val()));
window.frames["iframe_show990"].document.close();
$(window.frames["iframe_show990"]).load(function(){
$("#iframe_show990").height($("#iframe_show990").contents().find("body").height()+showittryitheight);
});
$("#iframe_show990").height($("#iframe_show990").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<script src="http://127.0.0.1/study/jquery.min.js"></script>
<script>
$(function(){
var div = $("#d");
$("#b1").click(function(){
div.animate({left:'100px'},2000);
div.animate({left:'0px',top:'50px',height:'50px'},2000);
});
});
</script>
<style>
button{
display:block;
}
div{
background-color:pink;
width:200px;
height:80px;
font-size:12px;
position:relative;
}
</style>
<button id="b1">自定义动画</button>
<br>
<br>
<div id="d">
<p>1. 向右移动100px</p>
<p>2. 向左下移动50px，同时高度变小</p>
</div>
<script src="http://127.0.0.1/study/jquery.min.js"></script>
<script>
$(function(){
var div = $("#d");
$("#b1").click(function(){
div.animate({left:'100px'},2000);
div.animate({left:'0px',top:'50px',height:'50px'},2000);
});
});
</script>
<style>
button{
display:block;
}
div{
background-color:pink;
width:200px;
height:80px;
font-size:12px;
position:relative;
}
</style>
<button id="b1">自定义动画</button>
<br>
<br>
<div id="d">
<p>1. 向右移动100px</p>
<p>2. 向左下移动50px，同时高度变小</p>
</div>
");
window.frames["iframe990"].document.write(decodeHtml(code990));
window.frames["iframe990"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe990"]).load(function(){
$("#iframe990").height($("#iframe990").contents().find("body").height()+showittryitheight);
});
$("#iframe990").height($("#iframe990").contents().find("body").height()+showittryitheight);
alreadyWriteCode990 = code990;
$("#rendering990").hide();
$("#rendered990").show();
}
var tRereshRetry2DemoPanel990 = setInterval(rereshRetry2DemoPanel990,1000);
var binded990 = false;
$("textarea#stepcodeTextarea990").keyup(function(){
if(!binded990){
$(window).bind('beforeunload',function(){
binded990 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code990 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code990!=newCode){
// window.frames["iframe990"].document.write("
");
// window.frames["iframe990"].document.write(decodeHtml($("textarea#stepcodeTextarea990").val()));
// window.frames["iframe990"].document.close();
// $(window.frames["iframe990"]).load(function(){
// $("#iframe990").height($("#iframe990").contents().find("body").height()+showittryitheight);
// });
// code990 = newCode;
// }
});
$(".tryButton990").click(function(){
$("#tryDiv990").show();
$("#stepcodeTextarea990").focus();
$("#stepcodeTextarea990").height(200);
$("#iframe990").height(0);
window.frames["iframe990"].document.write("
");
window.frames["iframe990"].document.write(decodeHtml($("textarea#stepcodeTextarea990").val()));
window.frames["iframe990"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe990"]).load(function(){
$("#iframe990").height($("#iframe990").contents().find("body").height()+showittryitheight);
});
$("#iframe990").height($("#iframe990").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor990.focus();
editor990.setSize(null, "250");
$("#rendering990").hide();
$("#rendered990").hide();
});
var mixedMode = {
name: "htmlmixed",
scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i,
mode: null},
{matches: /(text|application)\/(x-)?vb(a|script)/i,
mode: "vbscript"}]
};
var editor990 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea990"), {
lineNumbers: true,
styleActiveLine: true,
matchBrackets: true,
mode:"text/html",
theme:"eclipse",
selectionPointer: true,
lineWrapping: true,
extraKeys: {
"Alt-/": "autocomplete",
"Ctrl-F": "findPersistent",
"F8": function(cm) {
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
},
"Esc": function(cm) {
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
}
}
});
editor990.on("change",function(doc){
if(!binded990){
$(window).bind('beforeunload',function(){
binded990 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code990 = newCode;
$("textarea#stepcodeTextarea990").val(newCode);
if(alreadyWriteCode990!=code990){
lastModifedTime990 = new Date().getTime();
$("#rendering990").show();
$("#rendered990").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor990 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor990.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv990").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
效果一般需要一定的时间，并且这个时间可长可短，所以就无法精确的确定该效果何时结束。
好在，效果方法都提供对回调函数callback()的支持。
只需要在调用效果方法的最后一个参数传入一个function，当效果结束的时候，就会自动调用该function了。
");
window.frames["iframe_show1224"].document.write(decodeHtml($("textarea#stepcodeTextarea1224").val()));
window.frames["iframe_show1224"].document.close();
$(window.frames["iframe_show1224"]).load(function(){
$("#iframe_show1224").height($("#iframe_show1224").contents().find("body").height()+showittryitheight);
});
$("#iframe_show1224").height($("#iframe_show1224").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<script src="http://127.0.0.1/study/jquery.min.js"></script>
<script>
$(function(){
var div = $("#d");
$("#b1").click(function(){
div.animate({left:'100px'},2000);
div.animate({left:'0px',top:'50px',height:'50px'},2000,function(){
alert("动画演示结束");
});
});
});
</script>
<style>
button{
display:block;
}
div{
background-color:pink;
width:200px;
height:80px;
font-size:12px;
position:relative;
}
</style>
<button id="b1">自定义动画结束时，会有提示框</button>
<br>
<br>
<div id="d">
<p>1. 向右移动100px</p>
<p>2. 向左下移动50px，同时高度变小</p>
</div>
<script src="http://127.0.0.1/study/jquery.min.js"></script>
<script>
$(function(){
var div = $("#d");
$("#b1").click(function(){
div.animate({left:'100px'},2000);
div.animate({left:'0px',top:'50px',height:'50px'},2000,function(){
alert("动画演示结束");
});
});
});
</script>
<style>
button{
display:block;
}
div{
background-color:pink;
width:200px;
height:80px;
font-size:12px;
position:relative;
}
</style>
<button id="b1">自定义动画结束时，会有提示框</button>
<br>
<br>
<div id="d">
<p>1. 向右移动100px</p>
<p>2. 向左下移动50px，同时高度变小</p>
</div>
");
window.frames["iframe1224"].document.write(decodeHtml(code1224));
window.frames["iframe1224"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1224"]).load(function(){
$("#iframe1224").height($("#iframe1224").contents().find("body").height()+showittryitheight);
});
$("#iframe1224").height($("#iframe1224").contents().find("body").height()+showittryitheight);
alreadyWriteCode1224 = code1224;
$("#rendering1224").hide();
$("#rendered1224").show();
}
var tRereshRetry2DemoPanel1224 = setInterval(rereshRetry2DemoPanel1224,1000);
var binded1224 = false;
$("textarea#stepcodeTextarea1224").keyup(function(){
if(!binded1224){
$(window).bind('beforeunload',function(){
binded1224 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code1224 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code1224!=newCode){
// window.frames["iframe1224"].document.write("
");
// window.frames["iframe1224"].document.write(decodeHtml($("textarea#stepcodeTextarea1224").val()));
// window.frames["iframe1224"].document.close();
// $(window.frames["iframe1224"]).load(function(){
// $("#iframe1224").height($("#iframe1224").contents().find("body").height()+showittryitheight);
// });
// code1224 = newCode;
// }
});
$(".tryButton1224").click(function(){
$("#tryDiv1224").show();
$("#stepcodeTextarea1224").focus();
$("#stepcodeTextarea1224").height(200);
$("#iframe1224").height(0);
window.frames["iframe1224"].document.write("
");
window.frames["iframe1224"].document.write(decodeHtml($("textarea#stepcodeTextarea1224").val()));
window.frames["iframe1224"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1224"]).load(function(){
$("#iframe1224").height($("#iframe1224").contents().find("body").height()+showittryitheight);
});
$("#iframe1224").height($("#iframe1224").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor1224.focus();
editor1224.setSize(null, "250");
$("#rendering1224").hide();
$("#rendered1224").hide();
});
var mixedMode = {
name: "htmlmixed",
scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i,
mode: null},
{matches: /(text|application)\/(x-)?vb(a|script)/i,
mode: "vbscript"}]
};
var editor1224 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea1224"), {
lineNumbers: true,
styleActiveLine: true,
matchBrackets: true,
mode:"text/html",
theme:"eclipse",
selectionPointer: true,
lineWrapping: true,
extraKeys: {
"Alt-/": "autocomplete",
"Ctrl-F": "findPersistent",
"F8": function(cm) {
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
},
"Esc": function(cm) {
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
}
}
});
editor1224.on("change",function(doc){
if(!binded1224){
$(window).bind('beforeunload',function(){
binded1224 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code1224 = newCode;
$("textarea#stepcodeTextarea1224").val(newCode);
if(alreadyWriteCode1224!=code1224){
lastModifedTime1224 = new Date().getTime();
$("#rendering1224").show();
$("#rendered1224").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor1224 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor1224.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv1224").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
代码高亮插件双击即可选中，不过部分同学反应，通过代码高亮插件复制的代码无法在IDEA里正常显示，这里提供TEXTAREA的方式，方便复制，谢谢
1. 自行完成练习
根据练习目标尽量自己实现代码效果，期间会碰到疑问，难题，和自己不懂的地方，这些都是必要的过程
2. 带着疑问查看答案
完成过程中，碰到无法解决的问题，带着疑问，查看答案，分析答案的解决思路
3. 查看答案讲解视频
依然有不明白的地方，点开视频讲解，带着疑问，听视频讲解有问题的部分
4. 再做一遍
理解后，再从头做一遍，把有疑问的地方都捋清楚
5. 总结
最后再总结一遍，总结思路，总结解决办法，以后遇到类似的问题，怎么处理
HOW2J公众号，关注后实时获知布最新的教程和优惠活动，谢谢。
提问之前请登陆
|
