学学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. postgrel 调试

    http://blog.csdn.net/anzelin_ruc/article/details/8539411

  2. DropDownList的多级联动

    DropDownList的多级联动的问题最典型的案例就是实现省市级三级联动的案例,对这个问题的描述是当选中山东省之后,在选择市的下拉菜单时,市一栏只出现山东省下面的市.对于县也是同样的道理. 我也做的 ...

  3. Java构造器和方法的区别

    摘要要学习Java,你必须理解构造器.因为构造器可以提供许多特殊的方法,这个对于初学者经常混淆.但是,构造器和方法又有很多重要的区别.原作者:Robert Nielsen 原站:www.javawor ...

  4. LeetCode23 Merge k Sorted Lists

    题意: Merge k sorted linked lists and return it as one sorted list. Analyze and describe its complexit ...

  5. 开发工具 之 PowerDesigner

    PowerDesigner是一款功能非常强大的建模工具软件,足以与Rose比肩,同样是当今最著名的建模软件之一.Rose是专攻UML对象模型的建模工具,之后才向数据库建模发展,而PowerDesign ...

  6. 自定义PopupWindow弹出框（带有动画）

    使用PopupWindow来实现弹出框,并且带有动画效果 首先自定义PopupWindow public class LostPopupWindow extends PopupWindow { pub ...

  7. Rolls.java （page44）

    对象的数组:模拟T次投掷骰子的Counter对象的用例: Rolls.java 如下:所用类列表:Counter, StdOut, StdRandom 见page42 public class Rol ...

  8. [转]关于position 的 static、relative、absolute、fixed、inherit

    本文转自:http://www.56770.com/faq/list/?id=410 position 有五个值:static.relative.absolute.fixed.inherit. sta ...

  9. HDU 2571 命运 (DP)

    命运 Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Submit Status Pr ...

  10. centos6.5 iptables实现端口转发

    将本地接口IP 61.144.a.b 的3389端口 转发到 116.6.c.d的3389      (主要访问到61.144.a.b的3389端口,就会跳转到116.6.c.d的3389) [步骤] ...