学学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. Xcode快照——管理应用程序版本

    转自:http://blog.csdn.net/yuanbohx/article/details/8919474 1.创建快照:FIle → Create Snapshot 2.查看快照:Window ...

  2. ext2磁盘布局

    概述           本篇博客主要关注ext2文件系统的磁盘布局,即ext2会在格式化时将磁盘划分成什么样子.   ext2磁盘布局   任何Ext2分区中的第一个块从不受Ext2文件系统的管理, ...

  3. DQS安装失败——系统重新引导是否处于挂起状态

    问题:         安装完SQL Server 2012后,准备安装DQS服务,但是总是提示:操作"检查系统重新引导是否处于挂起状态"已完成,但有错误,正在中止安装.非常无奈, ...

  4. linux modprobe命令参数及用法详解--linux加载模块命令

    转:http://www.linuxso.com/command/modprobe.html modprobe(module probe) 功能说明:自动处理可载入模块. 语 法:modprobe [ ...

  5. 编写一个简单的Jquery插件

    1.实现内容 定义一个简单的jquery插件,alert传递进来的参数 2.插件js文件(jquery.showplugin.js) (function ($) { //定义插件中的方法 var me ...

  6. seleniu IDE 点点滴滴

    在使用selenium webdriver +python 的过程中遇见了许多的问题,这些问题在网上都没有找到很好的答案,后来在看selenium IDE的时候发现这里面有很好的解决方法,写写.记记. ...

  7. 【转】详解spring事务属性

    转载自:http://blog.chinaunix.net/u1/55983/showart_2091761.html 7个传播行为,4个隔离级别, Spring事务的传播行为和隔离级别[transa ...

  8. 在提交SVN时有时候会报svn is already locked 错误

    svn is already locked 解决方案: 如题所述经常在更新代码的时候会产生这样的问题!并且在对应的目录上操作Clean Up 没有任何的效果!如下解决方法. 在出错文件夹下,鼠标右键T ...

  9. iOS 关于NSString的一些方法

    在项目中整理的一些关于字符串应用方法,可以全部封装在一个类里面进行调用,会不断更新添加: 1.数字转换成对应的中文数字(项目中课程分级目录的章节号用到) 摘自:http://blog.csdn.net ...

  10. Oracle 常用的SQL语法和数据对象

    一.数据控制语句 (DML) 部分 1.INSERT (往数据表里插入记录的语句) INSERT INTO 表名(字段名1, 字段名2, ……) VALUES ( 值1, 值2, ……);  INSE ...