您的位置：首页 > Web前端 > JQuery

jQuery 实现网页图片动态游走，碰到边框反弹

2014-03-05 11:56 288 查看
学学jQuery，实现个小功能练练手

需要用到定时器

html代码如下

　　

<html>
<head>
<title></title>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
</head>
<body>
<h2>ShowOrHide</h2>

<META http-equiv="content-type" content="text/html;charset=utf8">
<input type="button" name="stop" value="咒立停"/>
<input type="button" name="begin" value="颤抖吧"/>
<div id="song" style="text-align: center; font-size: 100px;width:300px;">
<img id="gala" alt="我爱罗" src="gala.jpg" style="width:300px;height:300px"/>
</div>
<script type="text/javascript">
$(function () {
$("h2").click(function () {
//隐藏或显示标签
$("img#gala").slideToggle();
});
$("img#gala").mouseenter(function(){
window.clearInterval(timerlr);
}).mouseleave(function(){
window.clearInterval(timerlr);//非第一次使用定时器必须先停止，否则会导致时间混乱
timerlr=self.setInterval("move()", global.timespan);
});
$("[name='stop']").click(function(){
window.clearInterval(timerlr);
});
$("[name='begin']").click(function(){
window.clearInterval(timerlr);//非第一次使用定时器必须先停止，否则会导致时间混乱
timerlr=self.setInterval("move()", global.timespan);
});
});

//声明全局变量对象，尽量减少污染
var global = {
timespan: 10,//定时器间隔
vdirect: "down",//垂直滚动方向
hdirect: "right",//水平滚动方向
widthspan: 10,//单次宽度变化
heightspan: 10//单次高度变化
}

var timerlr = self.setInterval("move()", global.timespan);

function moveright() {
$song = $("div#song");
var offset = $song.offset();
var left = offset.left + global.widthspan;
$song.offset({ left: left, top: offset.top });
}
function movedown() {
$song = $("div#song");
var offset = $song.offset();
var top = offset.top + global.heightspan;
$song.offset({ left: offset.left, top: top });
}
function moveleft() {
$song = $("div#song");
var offset = $song.offset();
var left = offset.left - global.widthspan;
$song.offset({ left: left, top: offset.top });
}
function moveup() {
$song = $("div#song");
var offset = $song.offset();
var top = offset.top - global.heightspan;
$song.offset({ left: offset.left, top: top });
}

//进行水平和垂直方向的移动
function move() {
$height=$(window).height();
$song = $("div#song");

//离底部还有10像素的距离时开始回弹
if ($song.offset().top + $song.height() >= $height-10) {
global.vdirect = "up";
}
else if ($song.offset().top <= 10) {
global.vdirect = "down";
}
if (global.vdirect == "down") {
movedown();
}
else if (global.vdirect == "up") {
moveup();
}
if ($song.offset().left + $song.width() >= $(window).width()-10) {
global.hdirect = "left";
}
//离右边界还有10像素距离还是回弹
else if ($song.offset().left <= 10) {
global.hdirect = "right";
}
if (global.hdirect == "right") {
moveright();
}
else if (global.hdirect == "left") {
moveleft();
}
}
</script>
</body>
</html>


代码地址：　

http://files.cnblogs.com/mengweidefy/%E5%9B%BE%E7%89%87%E5%8A%A8%E6%80%81%E6%B8%B8%E8%B5%B0-jquery%E7%BB%83%E4%B9%A0.rar
哥们用的图片，话说火影写的越来越没意思了

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航