|
|
步骤
1
:
完整的图片
步骤
2
:
使用背景方式
步骤
3
:
使用img方式
这是一个旺旺的动态图片，上面有各种旺旺的图
但是有的时候，我们只需要这个大图的一小部分，那么怎么做呢？
");
window.frames["iframe_show3088"].document.write(decodeHtml($("textarea#stepcodeTextarea3088").val()));
window.frames["iframe_show3088"].document.close();
$(window.frames["iframe_show3088"]).load(function(){
$("#iframe_show3088").height($("#iframe_show3088").contents().find("body").height()+showittryitheight);
});
$("#iframe_show3088").height($("#iframe_show3088").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<img src="http://127.0.0.1/study/wangwang.gif">
<img src="http://127.0.0.1/study/wangwang.gif">
");
window.frames["iframe3088"].document.write(decodeHtml(code3088));
window.frames["iframe3088"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe3088"]).load(function(){
$("#iframe3088").height($("#iframe3088").contents().find("body").height()+showittryitheight);
});
$("#iframe3088").height($("#iframe3088").contents().find("body").height()+showittryitheight);
alreadyWriteCode3088 = code3088;
$("#rendering3088").hide();
$("#rendered3088").show();
}
var tRereshRetry2DemoPanel3088 = setInterval(rereshRetry2DemoPanel3088,1000);
var binded3088 = false;
$("textarea#stepcodeTextarea3088").keyup(function(){
if(!binded3088){
$(window).bind('beforeunload',function(){
binded3088 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code3088 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code3088!=newCode){
// window.frames["iframe3088"].document.write("
");
// window.frames["iframe3088"].document.write(decodeHtml($("textarea#stepcodeTextarea3088").val()));
// window.frames["iframe3088"].document.close();
// $(window.frames["iframe3088"]).load(function(){
// $("#iframe3088").height($("#iframe3088").contents().find("body").height()+showittryitheight);
// });
// code3088 = newCode;
// }
});
$(".tryButton3088").click(function(){
$("#tryDiv3088").show();
$("#stepcodeTextarea3088").focus();
$("#stepcodeTextarea3088").height(200);
$("#iframe3088").height(0);
window.frames["iframe3088"].document.write("
");
window.frames["iframe3088"].document.write(decodeHtml($("textarea#stepcodeTextarea3088").val()));
window.frames["iframe3088"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe3088"]).load(function(){
$("#iframe3088").height($("#iframe3088").contents().find("body").height()+showittryitheight);
});
$("#iframe3088").height($("#iframe3088").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor3088.focus();
editor3088.setSize(null, "250");
$("#rendering3088").hide();
$("#rendered3088").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 editor3088 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea3088"), {
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);
}
}
});
editor3088.on("change",function(doc){
if(!binded3088){
$(window).bind('beforeunload',function(){
binded3088 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code3088 = newCode;
$("textarea#stepcodeTextarea3088").val(newCode);
if(alreadyWriteCode3088!=code3088){
lastModifedTime3088 = new Date().getTime();
$("#rendering3088").show();
$("#rendered3088").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor3088 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor3088.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv3088").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
第一种方式，使用背景的方式获取一部分图片 对div使用背景图片
background:transparent url(/study/wangwang.gif) no-repeat scroll -83px -0px ;
等同于
background-color:transparent;
background-image:url(/site/wangwang.gif);
background-repeat:no-repeat;
background-attachment:scroll;
background-position: -83px -0px;
设置 scroll -83px -0px 把图片向左滚动83个像素，向上滚动0个像素。 再把div大小设置为和小图片大小一样，即可大小只显示部分图片的效果
");
window.frames["iframe_show3089"].document.write(decodeHtml($("textarea#stepcodeTextarea3089").val()));
window.frames["iframe_show3089"].document.close();
$(window.frames["iframe_show3089"]).load(function(){
$("#iframe_show3089").height($("#iframe_show3089").contents().find("body").height()+showittryitheight);
});
$("#iframe_show3089").height($("#iframe_show3089").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<style>
div{
width:25;
height:25;
background:transparent url(http://127.0.0.1/study/wangwang.gif) no-repeat scroll -83px -0px ;
}
</style>
<div></div>
<style>
div{
width:25;
height:25;
background:transparent url(http://127.0.0.1/study/wangwang.gif) no-repeat scroll -83px -0px ;
}
</style>
<div></div>
");
window.frames["iframe3089"].document.write(decodeHtml(code3089));
window.frames["iframe3089"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe3089"]).load(function(){
$("#iframe3089").height($("#iframe3089").contents().find("body").height()+showittryitheight);
});
$("#iframe3089").height($("#iframe3089").contents().find("body").height()+showittryitheight);
alreadyWriteCode3089 = code3089;
$("#rendering3089").hide();
$("#rendered3089").show();
}
var tRereshRetry2DemoPanel3089 = setInterval(rereshRetry2DemoPanel3089,1000);
var binded3089 = false;
$("textarea#stepcodeTextarea3089").keyup(function(){
if(!binded3089){
$(window).bind('beforeunload',function(){
binded3089 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code3089 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code3089!=newCode){
// window.frames["iframe3089"].document.write("
");
// window.frames["iframe3089"].document.write(decodeHtml($("textarea#stepcodeTextarea3089").val()));
// window.frames["iframe3089"].document.close();
// $(window.frames["iframe3089"]).load(function(){
// $("#iframe3089").height($("#iframe3089").contents().find("body").height()+showittryitheight);
// });
// code3089 = newCode;
// }
});
$(".tryButton3089").click(function(){
$("#tryDiv3089").show();
$("#stepcodeTextarea3089").focus();
$("#stepcodeTextarea3089").height(200);
$("#iframe3089").height(0);
window.frames["iframe3089"].document.write("
");
window.frames["iframe3089"].document.write(decodeHtml($("textarea#stepcodeTextarea3089").val()));
window.frames["iframe3089"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe3089"]).load(function(){
$("#iframe3089").height($("#iframe3089").contents().find("body").height()+showittryitheight);
});
$("#iframe3089").height($("#iframe3089").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor3089.focus();
editor3089.setSize(null, "250");
$("#rendering3089").hide();
$("#rendered3089").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 editor3089 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea3089"), {
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);
}
}
});
editor3089.on("change",function(doc){
if(!binded3089){
$(window).bind('beforeunload',function(){
binded3089 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code3089 = newCode;
$("textarea#stepcodeTextarea3089").val(newCode);
if(alreadyWriteCode3089!=code3089){
lastModifedTime3089 = new Date().getTime();
$("#rendering3089").show();
$("#rendered3089").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor3089 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor3089.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv3089").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
借助裁剪的方式只显示部分图片：
clip:rect(top, right, bottom, left)
裁剪之后，只显示被裁剪出来的图片，所以还需要把整个图片向左移动，才看上去像拿到了想要的那部分图片
img{
position:absolute;
left:-83px;
clip:rect(0px 108px 25px 83px);
}
");
window.frames["iframe_show3090"].document.write(decodeHtml($("textarea#stepcodeTextarea3090").val()));
window.frames["iframe_show3090"].document.close();
$(window.frames["iframe_show3090"]).load(function(){
$("#iframe_show3090").height($("#iframe_show3090").contents().find("body").height()+showittryitheight);
});
$("#iframe_show3090").height($("#iframe_show3090").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<style>
img{
position:absolute;
left:-83px;
clip:rect(0px 108px 25px 83px);
}
</style>
<img src="http://127.0.0.1/study/wangwang.gif">
<style>
img{
position:absolute;
left:-83px;
clip:rect(0px 108px 25px 83px);
}
</style>
<img src="http://127.0.0.1/study/wangwang.gif">
");
window.frames["iframe3090"].document.write(decodeHtml(code3090));
window.frames["iframe3090"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe3090"]).load(function(){
$("#iframe3090").height($("#iframe3090").contents().find("body").height()+showittryitheight);
});
$("#iframe3090").height($("#iframe3090").contents().find("body").height()+showittryitheight);
alreadyWriteCode3090 = code3090;
$("#rendering3090").hide();
$("#rendered3090").show();
}
var tRereshRetry2DemoPanel3090 = setInterval(rereshRetry2DemoPanel3090,1000);
var binded3090 = false;
$("textarea#stepcodeTextarea3090").keyup(function(){
if(!binded3090){
$(window).bind('beforeunload',function(){
binded3090 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code3090 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code3090!=newCode){
// window.frames["iframe3090"].document.write("
");
// window.frames["iframe3090"].document.write(decodeHtml($("textarea#stepcodeTextarea3090").val()));
// window.frames["iframe3090"].document.close();
// $(window.frames["iframe3090"]).load(function(){
// $("#iframe3090").height($("#iframe3090").contents().find("body").height()+showittryitheight);
// });
// code3090 = newCode;
// }
});
$(".tryButton3090").click(function(){
$("#tryDiv3090").show();
$("#stepcodeTextarea3090").focus();
$("#stepcodeTextarea3090").height(200);
$("#iframe3090").height(0);
window.frames["iframe3090"].document.write("
");
window.frames["iframe3090"].document.write(decodeHtml($("textarea#stepcodeTextarea3090").val()));
window.frames["iframe3090"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe3090"]).load(function(){
$("#iframe3090").height($("#iframe3090").contents().find("body").height()+showittryitheight);
});
$("#iframe3090").height($("#iframe3090").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor3090.focus();
editor3090.setSize(null, "250");
$("#rendering3090").hide();
$("#rendered3090").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 editor3090 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea3090"), {
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);
}
}
});
editor3090.on("change",function(doc){
if(!binded3090){
$(window).bind('beforeunload',function(){
binded3090 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code3090 = newCode;
$("textarea#stepcodeTextarea3090").val(newCode);
if(alreadyWriteCode3090!=code3090){
lastModifedTime3090 = new Date().getTime();
$("#rendering3090").show();
$("#rendered3090").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor3090 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor3090.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv3090").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
代码高亮插件双击即可选中，不过部分同学反应，通过代码高亮插件复制的代码无法在IDEA里正常显示，这里提供TEXTAREA的方式，方便复制，谢谢
1. 自行完成练习
根据练习目标尽量自己实现代码效果，期间会碰到疑问，难题，和自己不懂的地方，这些都是必要的过程
2. 带着疑问查看答案
完成过程中，碰到无法解决的问题，带着疑问，查看答案，分析答案的解决思路
3. 查看答案讲解视频
依然有不明白的地方，点开视频讲解，带着疑问，听视频讲解有问题的部分
4. 再做一遍
理解后，再从头做一遍，把有疑问的地方都捋清楚
5. 总结
最后再总结一遍，总结思路，总结解决办法，以后遇到类似的问题，怎么处理
HOW2J公众号，关注后实时获知布最新的教程和优惠活动，谢谢。
提问之前请登陆
|
