样式图点击按钮移动:

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. CSS中关于linebox的baseline位置移动的理解

    前言 最近看到一篇文章,弗里得木的翻译笔记,里面有个问题没有解决,就是linebox的baseline为什么会移动呢? 在讨论这个问题之前读者需要对 默认值baseline 以及 其他属性值(天镶的博 ...

  2. CSS3媒体查询总结

    1.什么是媒体查询 媒体查询可以让我们根据设备显示器的特性(如视口宽度.屏幕比例.设备方向:横向或纵向)为其设定CSS样式,媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成.媒体查询中可用于 ...

  3. 纯css 简单网页

    <div id="wrapper"> <header> <section> <h1>Web Design<h1> < ...

  4. 菜鸟学习Spring——SpringMVC注解版控制层重定向到控制层

    一.概述. SpringMVC中界面请求Contorller1,Contorller1需要重定向到Contorller2中显示其他页面或者做一些业务逻辑,Spring中提供了这个功能利用"r ...

  5. AMOLED原理介紹

    1. OLED发光原理 OLED(Organic Light Emitting Display,有机发光显示器)是指有机半导体材料在电场驱动下,通过载流子注入和复合导致发光的现象.其基本原理是用ITO ...

  6. 关于使用metronic时里modal模拟框使用ueditor时不能全屏的情况

    ueditor里有这么断代码, 1.初始显示状态下(非全屏),修改一下代码的z-index UE.Editor.defaultOptions = function(editor){ var _url ...

  7. Python——追加学习笔记(二)

    文件处理 # 文件内移动 seek()方法可以在文件中移动文件指针到不同的位置,offset字节代表相对于某个位置偏移量,默认为0,代表从文件开头算起,1代表从当前位置算起,2代表从文件末尾算起. s ...

  8. June 07th 2017 Week 23rd Wednesday

    Failure is the condiment that gives success its flavor. 失败是让成功变美味的调味料. There are kinds of flavors in ...

  9. Excel-怎样实现行列转置

    有时候,我们为了某些需要,必须把工作表的行列进行转置的方式显示.重新输入很浪费时间,怎样简单的实现转置呢,强大的excel2007提供了此项功能,具体怎么做,下面看我来演示一下. 工具/原料   装有 ...

  10. html或jsp页面自动提交,无需每次重启服务

    从eclipse转到idea遇到各种问题,之前eclipse可以自动保存页面内容无需重启服务,但是idea不可以,网上找了n种办法也没用,可能版本不一样吧,把我的解决方法纪录一下,方便以后有人遇到这个 ...