Problem creating pic-viewer with pure JavaScript
I'm learning the basics of JavaScript in a course at school. This because I want to have a big understanding of JavaScript when I'm diving into different libraries.
I've successfully managed to create a function who spawn a <div> that is hidden with a picture within it (I've cheated with "the pure" JavaScript with the fadeIn function as you see).
The problem now is that i want the function to be dynamic and work for more than just one element. I don't now how to proceed with this problem.
Any help or thoughts will be appreciated.
<div id="hiddenElement">
<img src="#" alt="image" class="maxImg"/>
</div>
var hiddenElement = document.getElementById('hiddenElement');
anchor.addEventListener('click', spawnImage, false);
function spawnImage() {
$(hiddenElement).fadeIn('slow', function() {
hiddenElement.style.display = 'block';
});
looks like开发者_如何学JAVA this now: http://oscarlandstrom.se/javascript/pic.html
Do you mean you want to unify this function?Then you can pass div and back ids as function parametrs:
function spawnImage(divId, backId) {
$(divId).fadeIn('slow', function() {
document.getElementById('divId').style.display = 'block';
});
$(backId).fadeIn('slow', function() {
document.getElementById('backId').style.display = 'block';
});
When you load page call something like that:
spawnImage(fistDivId, backId);
spawnImage(secondDivId, backId);
So you can set class="spawn" for all elements you want your function hold. (class="spawn" - it is empty class used just to mark elements). Then you should set on load event like:
$(document).ready(function() {
var spawnedElamants = getElementsByClassName("spawn");
for(var i=0; i<spawnedElamants.length; i++)
{
spawnImage(spawnedElamants[i].id, backId);
}
});
Check that:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="sheet.css" />
<script src="js.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<div id="bkgFade"></div>
<div id="container">
<div class="imgWrap">
<img src="http://www.morrharet.se/images/morrharet.jpg" alt="image" id="anchor" class="minImg"/>
</div>
<div class="imgWrap">
<img src="http://www.morrharet.se/images/morrharet.jpg" alt="image" id="anchor2" class="minImg"/>
</div>
</div>
<div id="hiddenElement">
<img src="http://www.morrharet.se/images/morrharet.jpg" alt="image" class="maxImg"/>
</div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function() {
var minImgs = document.getElementsByClassName("minImg");
var maxImgs = document.getElementsByClassName("maxImg");
var bkgFade = document.getElementById('bkgFade');
for(var i=0; i<minImgs.length; i++)
{
minImgs[i].addEventListener('click', spawnImage, false);
}
for(var i=0; i<maxImgs.length; i++)
{
maxImgs.addEventListener('click', despawnImage, false);
}
}
)
function spawnImage() {
$(hiddenElement).fadeIn('slow', function() {
hiddenElement.style.display = 'block';
});
$(bkgFade).fadeIn('slow', function() {
bkgFade.style.display = 'block';
});
}
function despawnImage() {
$(hiddenElement).fadeOut('slow', function() {
document.getElementById('hiddenElement').style.display = 'none';
});
$(bkgFade).fadeOut('slow', function() {
document.getElementById('bkgFade').style.display = 'none';
});
}
</script>
加载中,请稍侯......
精彩评论