Zrender：实现波浪纹效果
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>zrender</title>
<meta name="vzrenderewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
/*css reset*/
html{font-family:"Helvetica Neue",Helvetica,STHeiTi,sans-serif;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;}
body{-webkit-overflow-scrolling:touch;margin:0;}
ul{margin:0;padding:0;list-style:none;outline:none;}
dl,dd{margin:0;}
a{display:inline-block;margin:0;padding:0;text-decoration:none;background:transparent;outline:none;color:#000;}
a:link,a:visited,a:hover,a:active{text-decoration:none;color:currentColor;}
a,dt,dd{-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;}
img{border:0;}
p{margin:0;}
input,button,select,textarea{margin:0;padding:0;border:0;outline:0;background-color:transparent;}
</style>
</head>
<body>
<div id="box" style="height:400px;width:600px;border:1px solid black;"></div> <script src="zrender.js"></script>
<script>
var zr = zrender.init(document.getElementById('box'), {renderer: 'svg'}),
h = zr.getHeight(),
w = zr.getWidth();
var line1 = new zrender.BezierCurve({
shape: {
x1: 0,
y1: h,
cpx1: w / 2 - 10,
cpy1: h,
cpx2: w / 2 - 10,
cpy2: 0,
x2: w,
y2: 0
},
style: {
stroke: '#e3e3e3',
lineWidth: .5,
// fill: '#e3e3e3',
}
});
// zr.add(line1); var line2 = new zrender.BezierCurve({
shape: {
x1: 0,
y1: h,
cpx1: w / 2 + 10,
cpy1: h,
cpx2: w / 2 + 10,
cpy2: 0,
x2: w,
y2: 0
},
style: {
stroke: '#e3e3e3',
lineWidth: .5,
// fill: '#e3e3e3',
}
});
// zr.add(line2);
var mergeLine = zrender.path.mergePath([line1, line2], {
style: {
stroke: 'black',
fill: '#e3e3e3'
}
})
// zr.add(mergeLine); var Pin = zrender.Path.extend({
type: 'pin',
shape: {
// x, y on the cusp
x1: 0,
y1: 0,
x2: 0,
y2: 0,
},
style: {
stroke: '#000',
fill: '#e3e3e3'
},
buildPath: function (path, shape) {
var x1 = shape.x1;
var y1 = shape.y1;
var x2 = shape.x2;
var y2 = shape.y2;
path.moveTo(x1, y1);
path.bezierCurveTo(
(x2 - x1) / 2 - 10, y1,
(x2 - x1) / 2 - 10, y2,
x2, y2
); path.moveTo(x1, y1);
path.bezierCurveTo(
(x2 - x1) / 2 + 10, y1,
(x2 - x1) / 2 + 10, y2,
x2, y2
);
}
});
var pin = new Pin({
shape: {
x1: 0,
y1: h,
x2: w,
y2: 0,
},
// scale: [2, 2]
});
zr.add(pin);
</script>
</body>
</html>
这是一年前写的，整理文件的时候翻了出来。
用这个波浪纹实现一个查看信息的页面。放一个jQuery版本的纯前端效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Pin</title>
<style>
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td,section,article,aside,header,footer,nav,dialog,figure,hgroup{margin:0;padding:0}input,select,textarea{font-size:100%}
fieldset,img{border:0}caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:500}ul,ol,li{list-style:none}
em,i{font-style:normal}del{text-decoration:line-through}
address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:500}
img{border:0;max-width:100%}input,img{vertical-align:middle}
input:focus,a:focus{outline:0}
input:hover{-webkit-tap-highlight-color:transparent;-webkit-user-modify:read-write-plaintext-only}
a{color:#353d44;text-decoration:none;-webkit-tap-highlight-color: transparent}
a:active{opacity:.7}*{outline:0;-webkit-tap-highlight-color:transparent;-webkit-box-sizing:border-box}.hide{display:none}.clearfix{overflow:hidden;zoom:1}
body{max-width:750px;min-width:320px;line-height:1.5;font-family:"Helvetica Neue", Helvetica, STHeiTi, sans-serif}html{font-size:50px}body{font-size:24px} #svg_main {
overflow: auto;
position: relative;
}
#html_main {
position: absolute;
font-size: 12px;
color: #fff;
z-index: 100;
}
.html-root {
position: absolute;
top: 200px;
left: 295px;
width: 188px;
height: 113px;
background-color: #9fccff;
}
.root-title {
padding: 5px 10px;
height: 47px;
border-bottom: 1px solid #e3e3e3;
}
.root-contain {
padding: 2px 10px;
}
.root-text {
display: inline-block;
width: 80px;
text-align: left;
}
.root-num {
color: #1969C5;
}
.html-index1 {
position: absolute;
top: 10px;
left: 10px;
width: 175px;
}
.html-index {
position: relative;
display: inline-block;
margin-bottom: 10px;
width: 100%;
height: 56px;
cursor: pointer;
background-color: rgb(189, 216, 243);
}
.index-num {
margin: 13px 0 2px 7px;
font-size: 16px;
color: #fff;
font-weight: 700;
line-height: 18px;
}
.index-text {
margin-left: 7px;
width: 161px;
color: #216cc7;
}
.html-index-over {
color: #216cc7 !important;
background-color: rgb(242, 247, 253) !important;
}
.html-index-over .index-num {
color: #216cc7 !important;
}
.mouseover-data {
position: absolute;
left: 0;
padding: 3px 5px;
width: 175px;
height: 69px;
color: #7F9DB9;
background-color: #fff;
border: 1px solid #e1e1e1;
z-index: 100;
}
.mouseover-data:before {
content: '';
position: absolute;
left: 50%;
top: -10px;
width: 0;
height: 0;
border-bottom: 10px solid #fff ;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.mouseover-data-text {
display: inline-block;
width: 73px;
text-align: right;
}
.mouseover-data-num {
margin-left: 1em;
text-align: left;
}
.displaynone {
display: none;
}
.html-index2 {
position: absolute;
top: 10px;
left: 593px;
width: 175px;
}
.html-index3 {
position: absolute;
top: 10px;
left: 878px;
width: 175px;
}
.html-index4 {
position: absolute;
top: 10px;
left: 1163px;
width: 175px;
}
.html-index5 {
position: absolute;
top: 10px;
left: 1448px;
width: 175px;
}
.index-control {
position: absolute;
top: 0;
right: -30px;
padding-left: 4px;
width: 30px;
height: 56px;
/*background-color: #bdd8f3;*/
}
.index-root-control {
display: inline-block;
padding: 4px;
width: 26px;
height: 26px;
background-color: #bdd8f3;
}
</style>
</head>
<body>
<div id="svg_main" style="width:1800px;height:718px;">
<div id="html_main">
<div class="html-index1" id="index1" target-svg="wave1">
<div id="2" class="html-index">
<p class="index-num">32.12%</p>
<p class="index-text">目录2</p>
<div class="index-control">
<p class="index-root-control"></p>
</div>
</div>
<div class="mouseover-data">
<p>
<span class="mouseover-data-text">访问次数</span>
<span class="mouseover-data-num">6</span>
</p>
<p>
<span class="mouseover-data-text">平均访问时长</span>
<span class="mouseover-data-num">00:00:12</span>
</p>
<p>
<span class="mouseover-data-text">页面跳出率</span>
<span class="mouseover-data-num">10.12%</span>
</p>
</div>
<div id="2" class="html-index">
<p class="index-num">32.12%</p>
<p class="index-text">目录2</p>
</div>
</div>
<div id="root" class="html-root">
<p class="root-title">资讯模块-视频详情页-合集视频页-27480115</p>
<p class="root-contain">
<span class="root-text">访问次数</span>
<span class="root-num">97</span>
</p>
<p class="root-contain">
<span class="root-text">平均访问时长</span>
<span class="root-num">00:00:10</span>
</p>
<p class="root-contain">
<span class="root-text">页面跳出率</span>
<span class="root-num">12.12%</span>
</p>
</div>
<div class="html-index2" id="index2" target-svg="wave2">
<div id="3" class="html-index">
<p class="index-num">32.12%</p>
<p class="index-text">目录2</p>
</div>
</div>
<div class="html-index3" id="index3" target-svg="wave3">
<div id="3" class="html-index">
<p class="index-num">32.12%</p>
<p class="index-text">目录2</p>
</div>
</div>
<div class="html-index4" id="index4" target-svg="wave3">
<div id="3" class="html-index">
<p class="index-num">32.12%</p>
<p class="index-text">目录2</p>
</div>
</div>
<div class="html-index5" id="index5" target-svg="wave3">
<div id="3" class="html-index">
<p class="index-num">32.12%</p>
<p class="index-text">目录2</p>
</div>
</div>
</div>
</div>
<script src="jquery-2.2.3.min.js"></script>
<script src="zrender.js"></script>
<script src="wave.js"></script>
<script type="text/javascript">
var data1 = {
root: {
id: 1,
num: '10.10',
text: '目录1',
visitNum: '10',
avgTime: '00:00:15',
jumpRate: '10.12',
},
data: [{
id: 1,
num: '10.10',
text: '目录1',
visitNum: '10',
avgTime: '00:00:15',
jumpRate: '10.12',
}, {
id: 2,
num: '0.78',
text: '目录2',
visitNum: '10',
avgTime: '00:00:15',
jumpRate: '10.12',
}, {
id: 3,
num: '20',
text: '目录3',
visitNum: '10',
avgTime: '00:00:15',
jumpRate: '10.12',
}, {
id: 4,
num: '30',
text: '目录4',
visitNum: '10',
avgTime: '00:00:15',
jumpRate: '10.12',
}, {
id: 5,
num: '20',
text: '目录5',
visitNum: '10',
avgTime: '00:00:15',
jumpRate: '10.12',
}, {
id: 6,
num: '20',
text: '目录6',
visitNum: '10',
avgTime: '00:00:15',
jumpRate: '10.12',
}, {
id: 7,
num: '20',
text: '其它',
visitNum: '10',
avgTime: '00:00:15',
jumpRate: '10.12',
}, {
id: 8,
num: '20',
text: '离开应用',
}]
} var data2 = {
root: {
id: 1,
num: '10.10',
text: '变更了root',
visitNum: '10',
avgTime: '00:00:15',
jumpRate: '10.12',
},
data: [{
id: 1,
num: '10.10',
text: '目录1',
visitNum: '10',
avgTime: '00:00:15',
jumpRate: '10.12',
}, {
id: 2,
num: '0.78',
text: '目录2',
visitNum: '10',
avgTime: '00:00:15',
jumpRate: '10.12',
}, {
id: 3,
num: '20',
text: '目录3',
visitNum: '10',
avgTime: '00:00:15',
jumpRate: '10.12',
}, {
id: 4,
num: '30',
text: '目录4',
visitNum: '10',
avgTime: '00:00:15',
jumpRate: '10.12',
}, {
id: 5,
num: '20',
text: '目录5',
visitNum: '10',
avgTime: '00:00:15',
jumpRate: '10.12',
}, {
id: 6,
num: '20',
text: '我变了',
visitNum: '10',
avgTime: '00:00:15',
jumpRate: '10.12',
}, {
id: 7,
num: '20',
text: '其它',
visitNum: '10',
avgTime: '00:00:15',
jumpRate: '10.12',
}, {
id: 8,
num: '20',
text: '离开应用',
}]
} var zr = zrender.init(document.getElementById('svg_main'), {
renderer: 'svg'
});
var elArr = [];
var targetRoot = $('#root')[0];
var rootWidth = targetRoot.offsetWidth,
rootHeight = targetRoot.offsetHeight,
rootLeft = targetRoot.offsetLeft,
rootTop = targetRoot.offsetTop;
var initNum = 0; // 辅助记录zlArr内的位置 function init(data) {
var totalData = data;
$('#index1').empty();
$('#root').empty();
$('#index2').empty();
$('#index3').empty();
$('#index4').empty();
$('#index5').empty();
elArr.forEach(function(item) {
zr.remove(item);
})
elArr.length = 0;
initNum = 0;
var text = '';
var extraCss = '';
var elWidth,
elHeight,
elLeft,
elTop;
$('#root').append('<p class="root-title">' + totalData.root.text + '</p>' +
'<p class="root-contain">' +
'<span class="root-text">访问次数</span>' +
'<span class="root-num">' + totalData.root.visitNum + '</span>' +
'</p>' +
'<p class="root-contain">' +
'<span class="root-text">平均访问时长</span>' +
'<span class="root-num">' + totalData.root.avgTime + '</span>' +
'</p>' +
'<p class="root-contain">' +
'<span class="root-text">页面跳出率</span>' +
'<span class="root-num">' + totalData.root.jumpRate + '%</span>' +
'</p>');
$('#root').attr('target-data', JSON.stringify(totalData.root)); totalData.data.forEach(function(item, i) {
extraCss = '';
if (item.text == '离开应用') {
extraCss = ' html-index-over';
}
$('#index1').append('<div id="' + initNum + '" class="html-index' + extraCss + '" target-index="' + initNum + '" target-data=' + JSON.stringify(item) + '>' +
'<p class="index-num">' + item.num + '%</p>' +
'<p class="index-text">' + item.text + '</p>' +
'<div class="index-control displaynone">' +
'<p class="index-root-control">' +
'<img src="control.png" />' +
'</p>' +
'</div>' +
'</div>'); // 获取目标元素的距离父元素的左边距，上边距以及目标元素的宽高
var target = $('#index1')[0].childNodes[2 * i];
elWidth = target.offsetWidth;
elHeight = target.offsetHeight;
elLeft = target.offsetLeft;
elTop = target.offsetTop; // 补上父元素距离容器的上边距和左边距
var diffTop = $('.html-index1')[0].offsetTop,
diffLeft = $('.html-index1')[0].offsetLeft; // 波浪图
elArr[elArr.length] = new Wave({
shape: {
x1: elWidth + diffLeft,
y1: elTop + 1 / 2 * elHeight + diffTop - 4,
x2: rootLeft,
y2: rootTop + 1 / 2 * rootHeight + diffTop - 4,
x3: elWidth + diffLeft,
y3: elTop + 1 / 2 * elHeight + diffTop + 4,
x4: rootLeft,
y4: rootTop + 1 / 2 * rootHeight + diffTop + 4,
},
});
zr.add(elArr[elArr.length - 1]);
initNum++; // 矩形图
elArr[elArr.length] = new zrender.Rect({
shape: {
x: elWidth + diffLeft,
y: elTop + 1 / 2 * elHeight + diffTop - 6,
width: 4,
height: 12,
},
style: {
fill: '#89b7e8',
stroke: '#89b7e8',
}
})
zr.add(elArr[elArr.length - 1]);
initNum++; if (item.text != '离开应用') {
$('#index1').append('<div class="mouseover-data displaynone" style="top: ' + (56 * (i + 1) + 10 * i) + 'px">' +
'<p>' +
'<span class="mouseover-data-text">访问次数</span>' +
'<span class="mouseover-data-num">' + item.visitNum +'</span>' +
'</p>' +
'<p>' +
'<span class="mouseover-data-text">平均访问时长</span>' +
'<span class="mouseover-data-num">' + item.avgTime + '</span>' +
'</p>' +
'<p>' +
'<span class="mouseover-data-text">页面跳出率</span>' +
'<span class="mouseover-data-num">' + item.jumpRate + '%</span>' +
'</p>' +
'</div>');
}
}) elArr.push('rootLeft');
elArr[elArr.length] = new zrender.Rect({
shape: {
x: rootLeft - 10,
y: rootTop + 1 / 2 * rootHeight - 8,
width: 10,
height: 26,
},
style: {
fill: '#89b7e8',
stroke: '#89b7e8',
}
})
zr.add(elArr[elArr.length - 1]);
initNum++;
} init(data1); function generateNextColumn(targetId, data) {
console.log(data)
var totalData = data;
var target = $(targetId);
var containerId = null,
nextColumn = null;
var targetWidth = target[0].offsetWidth,
targetHeight = target[0].offsetHeight,
targetLeft = target[0].offsetLeft,
targetTop = target[0].offsetTop; var x1, y1, x3, y3; if (targetId == '#root') {
containerId = '#root';
nextColumn = '#index2';
$('#index2, #index3, #index4, #index5').empty();
x1 = targetLeft + targetWidth;
y1 = targetTop + 1 / 2 * targetHeight - 4;
x3 = targetLeft + targetWidth;
y3 = targetTop + 1 / 2 * targetHeight + 4;
} else {
containerId = target.parent().attr('id');
var lastNum = containerId.slice(-1); nextColumn = '#index' + (~~lastNum + 1); if ($(nextColumn)[0].childNodes.length) {
var start = $(nextColumn)[0].childNodes[0].getAttribute('target-index');
for (var i = start; i < elArr.length; i++) {
zr.remove(elArr[i]);
}
} if (lastNum == 2) {
$('#index3, #index4, #index5').empty();
} else if (lastNum == 3) {
$('#index4, #index5').empty();
} else {
$('#index5').empty();
} var diffTop = $('#' + containerId)[0].offsetTop,
diffLeft = $('#' + containerId)[0].offsetLeft;
x1 = diffLeft + targetWidth;
y1 = targetTop + 1 / 2 * targetHeight + diffTop - 4;
x3 = diffLeft + targetWidth;
y3 = targetTop + 1 / 2 * targetHeight + diffTop + 4;
} var text = '';
var extraCss = '';
var elWidth,
elHeight,
elLeft,
elTop;
totalData.data.forEach(function(item, i) {
extraCss = '';
if (item.text == '离开应用') {
extraCss = ' html-index-over';
}
$(nextColumn).append('<div id="' + initNum + '" class="html-index' + extraCss + '" target-index="' + (initNum + 1) + '" target-data=' + JSON.stringify(item) + '>' +
'<p class="index-num">' + item.num + '%</p>' +
'<p class="index-text">' + item.text + '</p>' +
'<div class="index-control displaynone">' +
'<p class="index-root-control">' +
'<img src="control.png" />' +
'</p>' +
'</div>' +
'</div>'); // 获取目标元素的距离父元素的左边距，上边距以及目标元素的宽高
var nextTarget = $(nextColumn)[0].childNodes[2 * i];
elWidth = nextTarget.offsetWidth;
elHeight = nextTarget.offsetHeight;
elLeft = nextTarget.offsetLeft;
elTop = nextTarget.offsetTop; // 补的高度差
var diffHeight = elHeight * (20 + parseFloat(item.num)) / 100 / 2; // 补上父元素距离容器的上边距和左边距
var diffTop = $(nextColumn)[0].offsetTop,
diffLeft = $(nextColumn)[0].offsetLeft; // 波浪图
elArr[elArr.length] = new Wave({
shape: {
x1: x1,
y1: y1,
x2: diffLeft,
y2: diffTop + elTop + 1 / 2 * elHeight - diffHeight,
x3: x3,
y3: y3,
x4: diffLeft,
y4: diffTop + elTop + 1 / 2 * elHeight + diffHeight,
},
});
zr.add(elArr[elArr.length - 1]);
initNum++; // 矩形图
elArr[elArr.length] = new zrender.Rect({
shape: {
x: diffLeft - 3,
y: elTop + 1 / 2 * elHeight + diffTop - diffHeight - 2,
width: 3,
height: diffHeight * 2 + 4,
},
style: {
fill: '#89b7e8',
stroke: '#89b7e8',
}
})
zr.add(elArr[elArr.length - 1]);
initNum++; if (item.text != '离开应用') {
$(nextColumn).append('<div class="mouseover-data displaynone" style="top: ' + (56 * (i + 1) + 10 * i) + 'px">' +
'<p>' +
'<span class="mouseover-data-text">访问次数</span>' +
'<span class="mouseover-data-num">' + item.visitNum +'</span>' +
'</p>' +
'<p>' +
'<span class="mouseover-data-text">平均访问时长</span>' +
'<span class="mouseover-data-num">' + item.avgTime + '</span>' +
'</p>' +
'<p>' +
'<span class="mouseover-data-text">页面跳出率</span>' +
'<span class="mouseover-data-num">' + item.jumpRate + '%</span>' +
'</p>' +
'</div>');
}
}) var y = y1 - 10,
width = 4;
if (targetId == '#root') {
y = y1 - 4;
width = 10;
} elArr[elArr.length] = new zrender.Rect({
shape: {
x: x1,
y: y,
width: width,
height: 26,
},
style: {
fill: '#89b7e8',
stroke: '#89b7e8',
}
})
zr.add(elArr[elArr.length - 1]);
initNum++; if (targetId == '#root') {
$('#17').trigger('click')
}
} var lastClickTargetIndex1 = null, // 记录#index1容器内上次点击的目标在elArr中的位置
lastClickTargetIndex2 = null,
lastClickTargetIndex3 = null,
lastClickTargetIndex4 = null,
lastClickTargetIndex5 = null;
$('#index1, #index2, #index3, #index4, #index5').on('click', '.html-index', function(e) {
var index = ~~$(this).parent().attr('id').slice(-1);
var data = JSON.parse($(this).attr('target-data')); if (data.text != '离开应用' && data.text != '其它') {
if (index == 1) {
if (lastClickTargetIndex1) {
elArr[lastClickTargetIndex1].attr('style', {
fill: '#f1f1f1'
})
}
lastClickTargetIndex1 = $(this).attr('target-index');
}
if (index == 2) {
if (lastClickTargetIndex2) {
elArr[lastClickTargetIndex2].attr('style', {
fill: '#f1f1f1'
})
}
lastClickTargetIndex2 = $(this).attr('target-index');
}
if (index == 3) {
if (lastClickTargetIndex3) {
elArr[lastClickTargetIndex3].attr('style', {
fill: '#f1f1f1'
})
}
lastClickTargetIndex3 = $(this).attr('target-index');
}
if (index == 4) {
if (lastClickTargetIndex4) {
elArr[lastClickTargetIndex4].attr('style', {
fill: '#f1f1f1'
})
}
lastClickTargetIndex4 = $(this).attr('target-index');
}
if (index == 5) {
if (lastClickTargetIndex5) {
elArr[lastClickTargetIndex5].attr('style', {
fill: '#f1f1f1'
})
}
lastClickTargetIndex5 = $(this).attr('target-index');
}
elArr[$(this).attr('target-index')].attr('style', {
fill: '#daecff'
}) if (index != 1) {
generateNextColumn('#' + $(this).attr('id'), data2)
}
}
}) $('#index1, #index2, #index3, #index4, #index5').on('mouseover', '.html-index', function() {
var data = JSON.parse($(this).attr('target-data'));
if (data.text != '离开应用' && data.text != '其它') {
$(this).next().removeClass('displaynone');
$(this).children('.index-control').removeClass('displaynone');
}
}) $('#index1, #index2, #index3, #index4, #index5').on('mouseleave', '.html-index', function() {
var data = JSON.parse($(this).attr('target-data'));
if (data.text != '离开应用' && data.text != '其它') {
$(this).next().addClass('displaynone');
$(this).children('.index-control').addClass('displaynone');
}
}) $('#index1, #index2, #index3, #index4, #index5').on('click', '.index-root-control', function(e) {
var data = JSON.parse($(this).parent().parent().attr('target-data')); init(data2);
e.stopPropagation();
generateNextColumn('#root', data2);
}) generateNextColumn('#root', data1);
</script>
</body>
</html>
Zrender：实现波浪纹效果的更多相关文章
- 一个动态波浪纹Android界面
IndexActivity.java package com.example.rubikrobot; import androidx.appcompat.app.AppCompatActivity; ...
- [转]Android自定义控件三部曲系列完全解析(动画, 绘图, 自定义View)
来源:http://blog.csdn.net/harvic880925/article/details/50995268 一.自定义控件三部曲之动画篇 1.<自定义控件三部曲之动画篇(一)—— ...
- CSS3效果：5种预载动画效果
实现如图所示的动画效果: 预载动画一:双旋圈 在两个不同方向旋转的圆圈.我们对内圈的转速定义了一个CSS代码,即内圈比外圈的速率快2倍.实现如图所示: html代码: <body style=& ...
- Silverlight & Blend动画设计系列六：动画技巧（Animation Techniques）之对象与路径转化、波感特效
当我们在进行Silverlight & Blend进行动画设计的过程中,可能需要设计出很多效果不一的图形图像出来作为动画的基本组成元素.然而在设计过程中可能会出现许多的问题,比如当前绘制了一个 ...
- javascript模拟flash头像裁切上传
是的,jq已经有类似的插件了,或者干脆用flash算了,为什么我还要自己写?因为造(wo)轮(bu)子(hui)也(flash)是一个学习的过程,轮子不会造,将来怎么造飞机?先来一张最终效果图: 一. ...
- 了解IE中filter属性的应用！
在设置不透明属性时,经常用opacity来增加层次感或者增加用户体验,但这个属性是css3属性,对于低级浏览器的兼容性来说就达不到预期的效果. 一般而言,我们都尽可能少用一些浏览私有属性-webkit ...
- 《在纹线方向上进行平滑滤波，在纹线的垂直方向上进行锐化滤波》 --Gabor增强的具体实践
<在纹线方向上进行平滑滤波,在纹线的垂直方向上进行锐化滤波> --Gabor增强的具体实践 一.问 ...
- Unicode字符列表（超完整）
Unicode字符列表(超完整)Unicode, 字符, 列表代码 显示 描述U+0020 空格 U+0021 ! 叹号 U+0022 " 双引号 U+0023 # 井号 U+0024 $ ...
- Unicode字符列表
注:除非有特别指明,否则以下符号皆属“半角”而非“全角”. 代码 显示 描述 U+0020 空格 U+0021 ! 叹号 U+0022 " 双引号 U+0023 # 井号 U+0024 $ ...
随机推荐
- 【阿里云开发】- 安装tomcat
Tomcat配置过程 1.下载Tomcat 官网地址:http://tomcat.apache.org/ 这里我用的是apache-tomcat-8.5.38.tar.gz 2.通过ftp工具将下载好 ...
- input里面的提示文字修改（placeholder里的文字修改，el-input也适用）
input::-webkit-input-placeholder { /* WebKit browsers */ color: red; } input:-moz-placeholder { /* M ...
- java通过poi读取excel中的日期类型数据或自定义类型日期
Java 读取Excel表格日期类型数据的时候,读出来的是这样的 12-十月-2019,而Excel中输入的是 2019/10/12 或 2019-10-12 poi处理excel时,当excel没 ...
- UCOS内存管理
STM32F10xxx内置64K字节的静态SRAM.它可以以字节.半字(16位)或全字(32位)访问 SRAM的起始地址是0x20000000 UCOSII //定义存储区 OS_MEM *DATA_ ...
- 大学课后答案微信小程序项目实践（1）
叨逼叨 还记得以前小编上大学那会苦于课后习题没有答案...到了考试....就像下面这个图一样- 现在,那些同样在纠结于书本后的答案太遥远的同学们,要告诉你们一个好消息,个人历时两周作业的时间开发的小程 ...
- SpringBoot中LocalDatetime作为参数和返回值的序列化问题
欢迎访问我的个人网站 https://www.zhoutao123.com 本文原文地址 https://www.zhoutao123.com/#/blog/article/59 LocalDatet ...
- sql的匹配和正则表达式
1. 匹配:like 关键字 #假设存在表 my_test_copy select * from my_test_copy; 则使用like关键词匹配:注意下划线 '_'和百分号 '%' # 下划线' ...
- 关于CSDN的一些信息
CSDN资源共享规范 为广大用户提供资源(包括但不限于文章.文档.音频.视频.图片.课程.软件.源代码等相关资源)共享的网络存储平台 与不得违反国家法律法规相关的规定 不得上传与CSDN提供的服务内容 ...
- react native jpush
原文链接:https://blog.csdn.net/qq_38719039/article/details/80684144 1 npm install jpush-react-native --s ...
- （二）WCF的Binding模型
上篇博客对WCF中的基础知识进行了介绍,先从概念上知道了WCF的一些理论,在abc模型中B是Binding,WCF为我们提供了多种绑定机制,我们先从了解各种绑定机制开始,只有知道之后才能在实践中更好的 ...