样式图点击按钮移动:

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. Lucene 初识

    因为业务需要,虽然自己不是专门写搜索的,但是需要自己拼一些搜索条件去调用搜索的接口,而之前看的JVM crash里也涉及到了Lucene,所以大概了解一下. 参考文档: http://www.itey ...

  2. css3总结之居中

    居中在前端布局上很常见,也很常用,也是最基本的技巧.居中效果在方向控制上基本可以分解成水平居中,垂直居中和水平垂直居中. 针对调整的元素不同,具体的处理方式上有些差异.这里我们先不讲绝对定位下的居中, ...

  3. mfc自动创建按钮消息处理并清除

        以前参加一次面试有这道题,当时没有网络没有做出来,今天在网上整理了一下,实现如下. .h中增加下面代码     //生成的消息映射函数     virtual BOOL OnInitDialo ...

  4. Apache Flume

    An Event is a unit of data that flows through a Flume agent. The Event flows from Source to Channel  ...

  5. Java—集合框架 List和Set的contains()以及Map的containsKey()、containsValue()

    如何判断集合中是否存在某个元素——contains() 1.List的contains(obj)方法 实际上,List调用contains(Object obj)方法时,会遍历List中的每一个元素, ...

  6. SharePoint2010 HTTP Error 503. The service is unavailable 解决方法

    1.更改系统管理员用户密码前提 因为更改系管理员用户密码会影响到 "SharePoint2010"正常运行,所在尽量不要更改系统管理员用户的密码, 必须更改密码的话,需要注意以两点 ...

  7. MyISAM引擎表出现“Error 'Incorrect key file for table”

    mysql主从复制中的从库突然出现了警报,sql_thread停止了,show slave status\G;查看 mysql> show slave status\G ; . row **** ...

  8. php文件编程

    一:文件常见操作 流的概念:当数据从程序(内存)->文件(磁盘),我们称为输出流,当数据从文件(磁盘)->程序(内存),我们称为输入流 1,获取文件信息 <?php //打开文件 f ...

  9. 【java开发系列】—— java输入输出流

    前言 任何语言输入输出流都是很重要的部分,比如从一个文件读入内容,进行分析,或者输出到另一个文件等等,都需要文件流的操作.这里简单介绍下reader,wirter,inputstream,output ...

  10. February 28 2017 Week 9 Tuesday

    Time you enjoy wasting, was not wasted. 你乐于挥霍的时间,都不能算作是浪费. A few days ago, I learned a sentence from ...