样式图点击按钮移动:

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. SharePoint 2013 - Cross-domain Library

    首先,参考链接:https://msdn.microsoft.com/en-us/library/office/fp179893.aspx?f=255&MSPPError=-214721739 ...

  2. html网页访问WebAPI中的方法遇到的问题

      1.移动端访问远程服务时,建议使用WebAPI 2.用不同浏览器访问WebAPI时返回的文本格式是不同的,Chrome Firefox将在浏览器中以XML形式显示此列表,IE浏览器将获得Json格 ...

  3. 爬虫入门之爬取策略 XPath与bs4实现(五)

    爬虫入门之爬取策略 XPath与bs4实现(五) 在爬虫系统中,待抓取URL队列是很重要的一部分.待抓取URL队列中的URL以什么样的顺序排列也是一个很重要的问题,因为这涉及到先抓取那个页面,后抓取哪 ...

  4. 初涉京东及淘宝开放平台API-商品模型

    ============ 京东 ============ [Product]http://help.jd.com/jos/question-568.html#A2ware_id(相当于SPU?)sku ...

  5. 一点一点学写Makefile(4) - 编译时指定宏参数

    我们在项目中有时为了方便会自定义一些与项目无关的功能,例如打印输出一些提示信息.将关键协议生成文件等,但是如果每次都通过修改代码的方法来实现,测试部门就会认为你改的这些代码可能会带来其他问题.对于这种 ...

  6. 716. Max Stack (follow up questions for min stack)

    Design a max stack that supports push, pop, top, peekMax and popMax. push(x) -- Push element x onto ...

  7. MySQL学习(三)函数

    一.数学函数 绝对值函数ABS():ABS(X) 返回圆周率函数PI() 平方根函数SQRT() 求余函数MOD(X,Y) 获取整数函数CEIL(X),CEILING(X)返回不小于X的最小整数:FL ...

  8. 小故事学设计模式之Observer : (三) 老婆帮忙订机票

    (IT的事就是过场多,过场多了就容易忘,所以我们不妨看一个记一个,这也是一个办法,顺便还能跟同行们交流一下)  要和老婆一起回老家了, 成都离我们安徽太远, 两个人飞一下过去就要花掉近三千块, 于是我 ...

  9. html5 5个重要特性

    HTML5已经火了一段时间了,相信作为web相关开发project师,肯定或多或少的了解和尝试过一些HTML5的特性和编程.还记得曾经我们介绍过的HTML5新标签. 作为未来前端开发技术的潮流和风向标 ...

  10. POJ 3308 最少点集覆盖

    题意:和Uva 11419 类似. 首先最少点集覆盖 = 最大匹配. 我们可以在 S 和行 的边 不是1,有了权值,但是题意要求的是乘积最小,那么可以用 log(a*b) = loga + logb ...