样式图点击按钮移动:

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. cocoapods的安装和安装过程中遇到的问题

    查看当前的ruby版本,我的版本是ruby 2.0.0p648 小于2.2安装cocoapods时会遇到以下问题 $ ruby -v 查看当前ruby源,默认为 https://rubygems.or ...

  2. The twentyth day

    10th Dec 2018 Cause It's hard for me to lose in my life I've found  因为失去你是一种煎熬 Only time will tell a ...

  3. ASP.NET全局异常处理

    Web项目部署后,异常直接暴露给用户会产生很不好的体验.只是暴露在服务器端又无法实时记录异常原因以便加以重现并修复.所以配合Log4Net记录日志信息,同时全局异常处理来营造良好用户体验就比较重要了. ...

  4. wxpython,wx.EVT_ENTER_WINDOW

    这个例子是鼠标移入,button的label显示“Over Me”,但是我运行没有显示求怎么回事

  5. ORACLE查询删除重复记录三种方法

    本文列举了3种删除重复记录的方法,分别是rowid.group by和distinct,小伙伴们可以参考一下.   比如现在有一人员表 (表名:peosons) 若想将姓名.身份证号.住址这三个字段完 ...

  6. Django问卷调查项目思路流程

    Django问卷调查项目思路流程: 1 后端思路 : 需求分析 ---- 找出各实体对应关系 ---- 设计model架构 ---- 统一资源封装 --- 提供资源API入口 ---- 设计项目实体功 ...

  7. npm run dev运行Vue项目报错:Node Sass does not yet support your current environment

    导入Vue项目后,#npm run dev 报错: error in ./src/pages/hello.vue Module build failed: Error: Node Sass does ...

  8. Linux文件寻址算法:逻辑地址到物理地址的转换

    题目描述: 编写一个函数实现Linux文件寻址的算法,即读取文件当前位置到物理存储位置的转换函数,需要给出运行的测试数据,可以假设和模拟需要的数据和结构.即编写一个函数unsigned long lt ...

  9. 字符串相关函数-strcpy()与strcmp()

    一些小问题,避免出现低级错误. 1.strcmp(s1,s2): 字符串指针不见'\0'不回头,这个常在与单个字符作比较时写着写着就忘了. char* p_ch1="this is an e ...

  10. Windows 系统 Unicode 文件名操作(新建、重命名、枚举、复制)全攻略

    常见的那些文件操作函数都不支持,于是为了达到目的,需要各种方法配合,应该是不如其他语言方便.我只是想看看Perl到底是否适合做这件事,于是折腾了一回. 文件的建立: 模块:Win32 Code: [全 ...