javascript - How do I stop an image at the bottom of the window? -
$(".raindrop1").clone().removeclass("raindrop1").addclass("raindropdelete").appendto("body").css({ left: $(".shape").position().left - 29.50, top: $(".shape").position().top + 1, position: "relative" }).animate({ top: "+=1000" }, function() { $(".raindropdelete").remove(); });
body { background: rgb(0, 0, 0); } .shape { border-radius: 50px; width: 10px; height: 10px; background-color: white; position: absolute; left: 50%; top: 50%; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="shape" onclick="curse()"></div> <img src='http://images.clipartpanda.com/raindrop-clipart-rtgdn5btl.png' width="15px" class="raindrop1">
i got bit of code can't seem work way want to. want make image fall down bottom of screen delete before scrollbar appears.
js:
$(".raindrop1").clone().removeclass("raindrop1").addclass("raindropdelete").appendto("body").css({ left: $(".shape").position().left - 29.50, top: $(".shape").position().top + 1, position: "relative" }).animate({top :"+=1000"}, function() { $(".raindropdelete").remove(); });
html:
<div class = "shape" onclick = "curse()"></div> <img src = 'http://images.clipartpanda.com/raindrop-clipart-rtgdn5btl.png' width = "15px" class = "raindrop1"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
and css:
body{ background: rgb(0, 0, 0); } .shape{ border-radius: 50px; width: 10px; height: 10px; background-color: white; position: absolute; left: 50%; top: 50%; }
am doing wrong?
using css
can stick image bottom of window in new browsers
.fix{ position:fixed; bottom:0px; left:50%; } <img src="yourimagepath" class="fix"/>
and ie6 can use position:absolute;
instead of fixed. position image on bottom of page scroll image scroll page. unfortunately position:fixed
in not supported in ie6
using code can detect if user has reached bottom of page. here can add code deleting image. if put code here image deleted automatic if user reaches bottom of page.
window.onscroll = function(ev) { if ((window.innerheight + window.scrolly) >= document.body.offsetheight) { // you're @ bottom of page } };
Comments
Post a Comment