学学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

哥们用的图片，话说火影写的越来越没意思了

jQuery 实现网页图片动态游走，碰到边框反弹的更多相关文章

  1. jquery实现背景图片动态适应

    背景 在我的一个项目中用到了背景图片,发现其中有一个问题,当页面长度动态变化时,原来能占满全部内容背景的图片会变得不能占满全部背景.如下图的效果: 这是正常的,背景图片占满全屏 当页面内容变长出现了滚 ...

  2. 14种网页图片和文字特效的jQuery插件代码

    1.网页图片3d旋转jQuery代码 演示和下载地址 2.存css3实现的tabl选项卡代码 演示和下载地址 3.jQuery标签旋转代码 演示和下载地址 4.鼠标悬浮的图片选项卡代码 演示和下载地址 ...

  3. 使用jquery获取网页中图片的高度——解惑

    jQuery获取网页中图片的高度 使用jquery获取网页中图片的高度其实很简单,有两种常用的方法都可以打到我们的目的 $("img").whith();(返回纯数字) $(&qu ...

  4. 30款jQuery常用网页焦点图banner图片切换 下载

    1.jquery 图片滚动特效制作 slide 图片类似窗帘式图片滚动 查看演示 2.jquery幻灯片插件带滚动条的圆形立体图片旋转滚动 查看演示 3.jQuery图片层叠旋转类似洗牌翻转图片幻灯片 ...

  5. 30款jQuery常用网页焦点图banner图片切换 下载 （转）

    1.jquery 图片滚动特效制作 slide 图片类似窗帘式图片滚动 查看演示 2.jquery幻灯片插件带滚动条的圆形立体图片旋转滚动 查看演示 3.jQuery图片层叠旋转类似洗牌翻转图片幻灯片 ...

  6. 30款jQuery常用网页焦点图banner图片切换

    1.jquery 图片滚动特效制作 slide 图片类似窗帘式图片滚动 查看演示 2.jquery幻灯片插件带滚动条的圆形立体图片旋转滚动 查看演示 3.jQuery图片层叠旋转类似洗牌翻转图片幻灯片 ...

  7. js和jquery如何获取图片真实的宽度和高度

    按照插入的图片的尺寸来判断图片是横图还是竖图.然后判断过后给予不同的展示方式,下面为大家介绍下js和jquery如何获取图片真实的宽度和高度   1.什么时候需要获取图片真实的宽度和高度 在做pc网页 ...

  8. Adobe Fireworks CS6是一款集网页图片设计、制作与编辑为一体的专业软件

    Adobe Fireworks CS6是一款集网页图片设计.制作与编辑为一体的专业软件,它不仅可以轻松制作出各种动感的Gif.动态按钮.动态翻转等网络图片,还可以轻松实现大图切割,让网页加载的图片显示 ...

  9. 数学建模python matlab 编程(随机游走问题)

    1 (1). 随机游走问题.在-10到10的一维线段上,质点以1/5的概率用左运动1单位,以2/5的概率停止不动,以2/5的概率向右运动2单位,且碰到-10时向右运动3单位,碰到10时向左运动4单位. ...

随机推荐

  1. Windows 之 win10快捷键

    1.Windows10系统常用快捷键: 1)贴靠窗口(窗口可以变为1/4大小放置在屏幕4个角落):Win +左/右 或 Win +上/下 2)切换窗口:Alt + Tab 3)任务视图(松开键盘界面不 ...

  2. Android（java）学习笔记266：Android线程形态之 IntentService

    1. IntentService原理 IntentService是一种特殊的Service,既然是Service,使用的时候记得在AndroidManifest清单文件中注册. 并且它是一个抽象类,因 ...

  3. Android进阶笔记20：Android手机屏幕坐标系

    1. 手机屏幕坐标系: 整个坐标系是以手机屏幕左上角为原点(0,0),如下:

  4. css+div网页设计（二）--布局与定位

    在网页设计中,能否控制好各个模块中在页面中的位置是非常关键的,与传统的表格定位不同,css+div定位方式更加的灵活,本篇博客将为大家介绍css+div的布局与定位. 一.盒子模型 由图可以看出 盒子 ...

  5. ajax中的setRequestHeader设置请求头

    1.问题引发点: 前不久发现一个问题: 前端并没有设置请求头信息里面的Accept-Encoding:gzip...但是在请求头中可以明显的看到Accept-Encoding:gzip, deflat ...

  6. 4560 NOIP2015 D2T2 子串

    4560 NOIP2015 D2T2 子串  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold 题解  查看运行结果     题目描述 Description 有两 ...

  7. Sharepoint中有关文件夹的操作

    1.GetItemsWithUniquePermissions根据返回数量和是否返回文件夹获取唯一权限的列表项集合 对于SharePoint对象模型中SPList的GetItemsWithUnique ...

  8. Sublime Text—自带快捷键介绍

    前言: Sublime Text是个小巧便捷的编辑器,除了众多好用的插件外,还有它自带的快捷键,打代码事半功倍,不会用的赶紧看看吧! 其实菜单上都有,看不懂可以汉化,Key Bindings-Defa ...

  9. 使用命令修改ip地址

    简述:以serverv 2012 r2为例 常用的几种,当然不全,希望能较快的速率记下一种便可 直接配置 1.      查看网卡的显示名称 2.      配置静态iP地址 3.      查看配置 ...

  10. C# lock用法

    当我们使用线程的时候,效率最高的方式当然是异步,即各个线程同时运行,其间不相互依赖和等待.但当不同的线程都需要访问某个资源的时候,就需要同步机制了,也就是说当对同一个资源进行读写的时候,我们要使该资源 ...