样式图点击按钮移动:

jQuery代码如下:

$(function () {

//上
            $("#btnUp").click(function () {

var f = parseInt($("img").parent().attr("id"));
                if (f-3 >= 1) {
                        $("img").remove().clone().appendTo("td[id="+(f-3)+"]")
                }
               
            })
            //下
            $("#btnDown").click(function () {
                var f = parseInt($("img").parent().attr("id"));
                if (f + 3 <= 9) {
                    $("img").remove().clone().appendTo("td[id=" + (f + 3) + "]")
                }
            })
            //左
            $("#btnLeft").click(function () {

var f = parseInt($("img").parent().attr("id"));
                if (f - 1 >= 1 && f % 3 != 1) {
                    $("img").remove().clone().appendTo("td[id=" + (f - 1) + "]")
                }

})
            //右
            $("#btnRight").click(function () {

var f = parseInt($("img").parent().attr("id"));
                if (f + 1 <= 9 && f % 3 != 0) {
                    $("img").remove().clone().appendTo("td[id=" + (f + 1) + "]")
                }
            })
        })

jQuery做一个小小的移动图片的位置的更多相关文章

  1. 用jQuery做一个三级菜单,鼠标移动到二级菜单的选项上,然后再迅速离开后,当鼠标再移动到该一级菜单或其他二级菜单选项,三级菜单也会显示。

    用jQuery做一个三级菜单,鼠标移动到二级菜单的选项上,然后再迅速离开后,当鼠标再移动到该一级菜单或其他二级菜单选项,三级菜单也会显示. 原因:在为一个元素绑定hover事件之后,用户把光标移入元素 ...

  2. 用Jquery做一个时间日期选择器

    今天我们就用Jquery做一个时间日期选择器,当打开网页时,文本框里面显示的是当前的日期,点击文本框可以出现年.月.日的下拉菜单,并且可以选择,会根据年份的选择判断是否是闰年,从而改变二月的天数,闰年 ...

  3. jquery做一个小的轮播插件---有BUG,后续修改

    //首页无缝轮播 ; (function($, window, document, undefined) { $.fn.slider = function(options) { var default ...

  4. jquery做一个表单验证

    正则表达式的写法: var re=new RegExp('规则', '可选参数');var re=/规则/参数;(这个最常用) 正则表达式的规则 和其他语言的正则表达式规则一样,可以参考我的另一边博文 ...

  5. 从0开始做一个的Vue图片/ 文件选择(上传)组件[基础向]

    原文:http://blog.csdn.net/sinat_17775997/article/details/58585142 之前用Vue做了一个基础的组件 vue-img-inputer ,下面就 ...

  6. 【UI组件】——用jQuery做一个上拉刷新

    技术要点: 1.jQuery的插件写法 2.上拉刷新步骤分解 3.css样式 jQuery的插件写法: $.fn.pluginName = function() { return this.each( ...

  7. js/html/css做一个简单的图片自动(auto)轮播效果//带注释

    FF(firefox)/chrom/ie稳定暂无bug...注意:请自己建立一个images文件,放入几张900*238的图片(注意图片格式和名字与程序中一致). 1. [图片] 1.JPG 2. [ ...

  8. 基于jQuery的一个简单的图片查看器

    项目中自己diy了一个图片查看器.因为初始代码不是自己的,只是在上面改了一下也没有弄的很漂亮.等以后有时间了在重写一下样式和封装,作为备用的只是积累吧.如果有童鞋有用到,完全可以在此基础上改,比较容易 ...

  9. 用jquery做一个带导航的名单列表

    代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...

随机推荐

  1. 22_AOP_切面——静态切面

    [Spring AOP 如何定位连接点] 1.增强提供了连接点的方位信息:如织入到方法前面.后面等. 2.切点描述的是织入到哪些类的哪些方法上. [切点] Spring通过org.springfram ...

  2. HTML 5入门知识(一)

    了解HTML 5 HTML5 并非仅仅用来表示web内容,它的使命是将web带入一个成熟的应用平台,在这个平台上,视频.音频.图像.动画,以及与电脑的交互都被标准化. HTML 5概述 HTML 5实 ...

  3. EL表达式的内置对象

    在EL表达式中,无需创建就可以使用的对象称之为EL隐藏(隐含.内置)对象.在EL中一共有11个隐藏对象,它们都与Map相似.其中10是Map,一个是 PageContext. 参数隐藏对象 这些隐藏对 ...

  4. maven学习(一)setting.xml配置文件详解

    maven环境搭建: 1.官网下载zip包,解压至任意目录(如:E:\wly\apache-maven-3.2.5) 2.环境变量MAVEN_HOME(E:\wly\apache-maven-3.2. ...

  5. 常见WEB开发安全漏洞 原因分析及解决

    目 录 1 会话标识未更新 3 1.1 原因 3 1.2 解决 3 2 SQL注入 3 2.1 原因 3 2.2 解决 5 3 XSS跨站脚本编制 5 3.1 原因 5 3.2 解决 5 4 XSRF ...

  6. Flask入门request session cookie(二)

    1 HTTP方法分类 1 GET 浏览器告知服务器:只获取页面上的信息并发给我.这是最常用的方法. 2 HEAD 浏览器告诉服务器:欲获取信息,但是只关心消息头 .应用应像处理 GET 请求一样来处理 ...

  7. 解决SQLite打开已有路径下的db问题

    最近遇到的需要加载已有路径下(sd card下)db的问题,找了一下资料,以下是解决的方法,仅供参考(转载自eoe): SQLiteOpenHelper 是Android框架为我们提供的一个非常好的数 ...

  8. 什么是Load Average?

    运维工程师在日常运维中经常使用w.top.uptime等命令来查看系统当前运行的负载情况.那么作为运维工程师是如何通过以上命令来判断系统当前负载是否已经达到极限了呢?为此笔者总结了一下如何通过load ...

  9. 【洛谷5294】[HNOI2019] 序列(主席树维护单调栈+二分)

    点此看题面 大致题意: 给你一个长度为\(n\)的序列\(A\),每次询问修改一个元素(只对当前询问有效),然后让你找到一个不下降序列\(B\),使得这两个序列相应位置之差的平方和最小,并输出这个最小 ...

  10. hdu 6243,6247

    题意:n只狗,n个笼子,每个笼子只能有一只,求不在自己笼子的狗的数量的期望. 分析:概率是相等的,可以直接用方案数代替,k 不在自己的笼子的方案数是 n!- (n-1)!,这样的k有n个,总的方案数n ...