Beste front-enders,
Zelf werk ik ook als front-end developer en heb nog wel eens dat de designer naar me toekomt van "Dit moet toch echt nog 2 pixels naar links".
Heb daarom een script geschreven zodat ik zijn ontwerp (opgeslagen als jpg). als achtergrond kan gebruiken en met de "+" en "-" kan ik de opacity van dat element aanpassen.
Op die manier kan ik soort van overtekenen en altijd pixel perfect werken. Dus bij deze stel ik het ook beschikbaar voor jullie zodat je zekerheid heb dat alles pixel perfect is en maakt het werk een stuk makkelijker.
De js code.
$(document).ready(function() {
jOverdraw();
});
function jOverdraw() {
var jOverdraw = ".jOverdraw";
var _browserWidth = $("body").outerWidth();
var _browserHeight = $("body").outerHeight();
var _jOverdrawWidth = $(jOverdraw).outerWidth();
var _jOverdrawMarginLeft = -(_jOverdrawWidth / 2);
$(jOverdraw).css("margin-left", _jOverdrawMarginLeft);
$('*').keydown(function(event) {
if (event.keyCode == '107') {
event.preventDefault();
var _currentOpacity = $(jOverdraw).css("opacity");
_currentOpacity = parseFloat(_currentOpacity);
var _newOpacity = _currentOpacity + 0.1;
if (_newOpacity > 1) {
_newOpacity = 1;
}
}
if (event.keyCode == '109') {
event.preventDefault();
var _currentOpacity = $(jOverdraw).css("opacity");
var _newOpacity = _currentOpacity - 0.1;
if (_newOpacity < 0) {
_newOpacity = 0;
}
}
$(jOverdraw).css("opacity", _newOpacity)
});
}
|
|
De code in je html
<img src="template.jpg" class="jOverdraw" alt="" />
|
|
De css
html, body
{
margin:0px;
width:100%;
height:100%;
}
.jOverdraw
{
position:absolute;
display:block;
left:50%;
top:0px;
}
|
|
De code in het zip met voorbeeld:
(Log in om link te zien!)
demo link:
(Log in om link te zien!) 
5 nov 2010 11:44 
