mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-10-30 19:00:09 +00:00
158 lines
2.9 KiB
HTML
Executable File
158 lines
2.9 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html>
|
|
<style>
|
|
|
|
.container {
|
|
position: absolute;
|
|
top: 200px;
|
|
left: 400px;
|
|
width: 400px;
|
|
height: 400px;
|
|
border: dashed 1px black;
|
|
}
|
|
|
|
.container-center {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 10px;
|
|
height: 10px;
|
|
|
|
border-top: solid 1px black;
|
|
border-left: solid 1px black;
|
|
}
|
|
.container-center:after {
|
|
content: "";
|
|
position: absolute;
|
|
top: -11px;
|
|
left: -11px;
|
|
width: 10px;
|
|
height: 10px;
|
|
|
|
border-top: none;
|
|
border-left: none;
|
|
border-bottom: solid 1px black;
|
|
border-right: solid 1px black;
|
|
}
|
|
|
|
.block {
|
|
position: absolute;
|
|
top: auto;
|
|
left: auto;
|
|
width: 300px;
|
|
height: 300px;
|
|
background: silver;
|
|
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.point, .point-old {
|
|
position: absolute;
|
|
width: 4px;
|
|
height: 4px;
|
|
border: solid 1px blue;
|
|
margin-top: -2px;
|
|
margin-left: -2px;
|
|
|
|
transition-origin: 50% 50%;
|
|
}
|
|
.point-old {
|
|
opacity: 0.3;
|
|
}
|
|
|
|
.block, .point {
|
|
-webkit-transition: all 0.2s linear;
|
|
-moz-transition: all 0.2s linear;
|
|
transition: all 0.2s linear;
|
|
}
|
|
|
|
</style>
|
|
|
|
<script src="../ext-lib/jquery.js"></script>
|
|
<script src="../ext-lib/jquery-ui.js"></script>
|
|
|
|
<script src="../lib/jli.js"></script>
|
|
|
|
<script>
|
|
|
|
function setOffset(l, t){
|
|
setElementOffset($('.block'), l, t)
|
|
}
|
|
|
|
function setScale(s){
|
|
setElementScale($('.block'), s)
|
|
// compensate for point scale...
|
|
setElementScale($('.point'), 1/s)
|
|
setElementScale($('.point-old'), 1/s)
|
|
}
|
|
|
|
// The goal of the experiment is to make this do it's thing without
|
|
// changing element's screen position
|
|
//
|
|
function setOrigin(l, t, no_comp){
|
|
var block = $('.block')
|
|
var o = getElementOrigin(block)
|
|
|
|
if(!no_comp){
|
|
shiftOriginTo(block, l, t)
|
|
} else {
|
|
setElementOrigin(block, l+'px', t+'px')
|
|
}
|
|
|
|
|
|
setElementOffset($('.point'), l, t)
|
|
setElementOffset($('.point-old'), o.left, o.top)
|
|
}
|
|
|
|
|
|
|
|
// Center a block to a point...
|
|
//
|
|
// If not coordinates are given then center to element origin...
|
|
//
|
|
// NOTE: scale indicates the source coordinate scale, if set to 1 t and
|
|
// l will 1:1 to screen, and if set to the same scale as the element
|
|
// then t and l will be 1:1 to the element...
|
|
// supported keywords:
|
|
// 'screen'
|
|
// 'elem'
|
|
//
|
|
// XXX need to make this independent of current position...
|
|
// ...this is to prevent it from getting the wrong target coords
|
|
// during animations..
|
|
function centerBlock(l, t, scale){
|
|
var block = $('.block')
|
|
var container = $('.container')
|
|
|
|
var offset = getRelativeOffset(container, block, {
|
|
top: t,
|
|
left: l,
|
|
scale: scale,
|
|
})
|
|
|
|
setOffset(offset.left, offset.top)
|
|
}
|
|
|
|
|
|
$(function(){
|
|
setOrigin(100, 100)
|
|
setOffset(50, 100)
|
|
setScale(1.3)
|
|
})
|
|
|
|
</script>
|
|
|
|
<body>
|
|
|
|
<div class="container">
|
|
<div class="block">
|
|
<div class="point" title="current origin point"> </div>
|
|
<div class="point-old" title="previous origin point"> </div>
|
|
</div>
|
|
<div class="container-center"> </div>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|
|
<!-- vim:set ts=4 sw=4 : -->
|