jQuery 实现网页图片动态游走，碰到边框反弹
学学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>
代码地址：
哥们用的图片，话说火影写的越来越没意思了
jQuery 实现网页图片动态游走，碰到边框反弹的更多相关文章
- jquery实现背景图片动态适应
背景 在我的一个项目中用到了背景图片,发现其中有一个问题,当页面长度动态变化时,原来能占满全部内容背景的图片会变得不能占满全部背景.如下图的效果: 这是正常的,背景图片占满全屏 当页面内容变长出现了滚 ...
- 14种网页图片和文字特效的jQuery插件代码
1.网页图片3d旋转jQuery代码 演示和下载地址 2.存css3实现的tabl选项卡代码 演示和下载地址 3.jQuery标签旋转代码 演示和下载地址 4.鼠标悬浮的图片选项卡代码 演示和下载地址 ...
- 使用jquery获取网页中图片的高度——解惑
jQuery获取网页中图片的高度 使用jquery获取网页中图片的高度其实很简单,有两种常用的方法都可以打到我们的目的 $("img").whith();(返回纯数字) $(&qu ...
- 30款jQuery常用网页焦点图banner图片切换 下载
1.jquery 图片滚动特效制作 slide 图片类似窗帘式图片滚动 查看演示 2.jquery幻灯片插件带滚动条的圆形立体图片旋转滚动 查看演示 3.jQuery图片层叠旋转类似洗牌翻转图片幻灯片 ...
- 30款jQuery常用网页焦点图banner图片切换 下载 （转）
1.jquery 图片滚动特效制作 slide 图片类似窗帘式图片滚动 查看演示 2.jquery幻灯片插件带滚动条的圆形立体图片旋转滚动 查看演示 3.jQuery图片层叠旋转类似洗牌翻转图片幻灯片 ...
- 30款jQuery常用网页焦点图banner图片切换
1.jquery 图片滚动特效制作 slide 图片类似窗帘式图片滚动 查看演示 2.jquery幻灯片插件带滚动条的圆形立体图片旋转滚动 查看演示 3.jQuery图片层叠旋转类似洗牌翻转图片幻灯片 ...
- js和jquery如何获取图片真实的宽度和高度
按照插入的图片的尺寸来判断图片是横图还是竖图.然后判断过后给予不同的展示方式,下面为大家介绍下js和jquery如何获取图片真实的宽度和高度 1.什么时候需要获取图片真实的宽度和高度 在做pc网页 ...
- Adobe Fireworks CS6是一款集网页图片设计、制作与编辑为一体的专业软件
Adobe Fireworks CS6是一款集网页图片设计.制作与编辑为一体的专业软件,它不仅可以轻松制作出各种动感的Gif.动态按钮.动态翻转等网络图片,还可以轻松实现大图切割,让网页加载的图片显示 ...
- 数学建模python matlab 编程(随机游走问题)
1 (1). 随机游走问题.在-10到10的一维线段上,质点以1/5的概率用左运动1单位,以2/5的概率停止不动,以2/5的概率向右运动2单位,且碰到-10时向右运动3单位,碰到10时向左运动4单位. ...
随机推荐
- Ubuntu下VSFTPD(五)(匿名FTP设置方法)
匿名FTP设置方法: 通常在登录FTP服务器的用户不确定的情况下,应将FTP服务器设置为允许匿名账号登录的FTP服务器 1．启用匿名帐号 anonymous_enable=YES local_ ...
- 512字节纠错1位的ECC校验码生成演示
Flash型号: NandFlash型号:TC58NVG2S3ETA00 pagesize: 2KB oobsize : 64B blocksize : 128K 关于ECC可以参考:http:// ...
- 一、Android应用程序的基本原理（Fundamentals [,fʌndə'mentlz]）
Android 应用程序以java作为编程语言.Android SDK工具把代码连同数据.资源文件一起编译成一个以.apk为后缀(suffix)的android 程序存档(archive)文件包.在一 ...
- SQL Server 2008 表值参数用法
下面的示例使用 Transact-SQL 并演示如何执行以下操作:创建表值参数类型,声明变量来引用它,填充参数列表,然后将值传递到存储过程. USE AdventureWorks; GO /*创建表值 ...
- C#之面向对象初步
1.构造函数定义一个类时,C#默认会实现一个隐式的构造函数,默认的构造函数不接受参数,负责把新对象分配到内存中并确保所有字段数据都设置为正确的默认值.然而,一旦自定义了构造函数,默认构造函数就被自动从 ...
- Nodejs新建博客练习(二)添加flash支持
安装必须模块 npm install connect-flash npm install express-session 然后在app.js里面添加一些代码 var flash = require(' ...
- 用英文加优先级来解读C的声明
比如:int ( * func_p ) ( double ); 首先着眼于标识符. func_p is 因为存在括号,(* func_p) 先被处理,这里着眼于* func_p is a pointe ...
- 【原创】C++链表如何像Python List一样支持多种数据类型
用过Python的码友都知道,Python中List支持多种数据类型,如下面代码所示链表li内的数据类型可以是整数,同时也可以是字符串,当然也可以是其他数据类型. 1: >>> li ...
- linux_过程问题记录
常见问题1:-bash: rz: command not found 解决: 安装lrzsz: 解决命令:yum -y install lrzsz 常见问题2:linux 解压乱码 解决11.到htt ...
- Liunx下全局安装 Composer
我把它放在系统的PATH目录中,这样就能在全局访问它. curl -sS https://getcomposer.org/installer | php mv composer.phar /usr/l ...