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单位. ...
随机推荐
- C#开源类库
PDFsharp PDFsharp是一款可以让.NET框架支持的任何语言很容易的创建PDF文件的类库. ASP.NET FO PDF FO PDF 是一款C#编写类似于ASP.NET服务器控件的控件. ...
- NopCmmerce的FakeHttpContext类
在 Web 中进行测试驱动的开发,比较大的困难是模拟 HttpContext; 1.Nop提供了完整的FakeHttpContext实现,如图 1.FakeHttpContext的作用. 控制器进行单 ...
- 用komodo建立python开发环境
配置 在菜单中选择Edit.Preferences. 代码自动完成 更改tab代表的空格数 括号自动关闭和语法检查 interactive shell 中文支持 缩写 点击菜单View.Tabs &a ...
- 对lua继承中self.__index = self的释疑
首先看看从lua表中查找一个键时的流程: -- 当从表t中查找键k时,lua处理如下: -- 1.t中是否有k,有则直接返回值,否则第2步 -- 2.t是否有元表, 无则返回nil, 有则第3步 -- ...
- 用 Gearman 分发 PHP 应用程序的工作负载
尽管一个 Web 应用程序的大部分内容都与表示有关,但它的价值与竞争优势却可能体现在若干专有服务或算法方面.如果这类处理过于复杂或拖沓,最好是进行异步执行,以免 Web 服务器对传入的请求没有响应.实 ...
- WPF 之 布局（二）
一.Canvas Canvas是最基本的面板,只是一个存储控件的容器,它不会自动调整内部元素的排列及大小,它仅支持用显式坐标定位控件,它也允许指定相对任何角的坐标,而不仅仅是左上角.可以使用Left ...
- C# 之 HttpWebRequest类
提供 WebRequest 类的 HTTP 特定的实现. 继承层次结构 System.Object → System.MarshalByRefObject → System.Net.We ...
- 【IT名人堂】何云飞：阿里云数据库的架构演进之路
[IT名人堂]何云飞:阿里云数据库的架构演进之路 原文转载自:IT168 如果说淘宝革了零售的命,那么DT革了企业IT消费的命.在阿里巴巴看来,DT时代,企业IT消费的模式变成了“云服务+数据”, ...
- Android adb not responsing
netstat -aon | findstr "5037" and you will find the process "kadb.exe" that used ...
- iOS之GCD的DEMO
由DEMO得知,串行队列同步执行会按照顺序一步一步执行,不会开辟线程 由DEMO得知,串行队列异步执行,队列中的任务会一步一步按顺序执行,队列外的任务不确定.会开辟线程 由DEMO得知,并行队列同步执 ...