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单位. ...
随机推荐
- 小白日记44：kali渗透测试之Web渗透-SqlMap自动注入（二）-sqlmap参数详解REQUEST
Sqlmap自动注入(二) Request ################################################### #inurl:.php?id= 1. 数据段:--d ...
- C#获取进程的主窗口句柄的实现方法
通过调用Win32 API实现. public class User32API { private static Hashtable processWnd = null; public delegat ...
- SpringMvc多文件上传简单实现
public ResponseItem uploadFile(MultipartHttpServletRequest request,FileItem fileItem,PageData pd) { ...
- 1.6.3 Uploading Data with Solr Cell using Apache Tika
1. Uploading Data with Solr Cell using Apache Tika solr使用Apache Tika工程的代码提供了一个框架,用于合并所有不同格式的文件解析器为so ...
- 【Linux/Ubuntu学习 14】Linux下查看文件和文件夹大小
当磁盘大小超过标准时会有报警提示,这时如果掌握df和du命令是非常明智的选择. df可以查看一级文件夹大小.使用比例.档案系统及其挂入点,但对文件却无能为力. du可以查看文件及文件夹的大小. ...
- Java各种类型占用的字节数
Java 占用字节数 转自:http://www.blogjava.net/stevenjohn/archive/2013/10/18/405416.html 数据类型 大小(二进制位数) 范围 默认 ...
- msql_DDL_创建table
• 语法: create table 表名(• 列名1 列类型 [<列的完整性约束>],• 列名2 列类型 [<列的完整性约束>],• ... ... ); • PRIMARY ...
- 我关于SecureCRT远程连接失败的问题解决办法
使用VirtualBox搭建一个ubuntu14.04的系统环境,为了省去主机与虚拟机直接互相直接一直切换的频繁操作,所以想到了使用SecureCRT连接,但是出现了连接问题,问题如下图:
- POJ 1733 Parity game (并查集)
Parity game Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 6816 Accepted: 2636 Descr ...
- java的技术调用栈图示例