jQuery做一个小小的移动图片的位置
样式图点击按钮移动:

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做一个小小的移动图片的位置的更多相关文章
- 用jQuery做一个三级菜单,鼠标移动到二级菜单的选项上,然后再迅速离开后,当鼠标再移动到该一级菜单或其他二级菜单选项,三级菜单也会显示。
用jQuery做一个三级菜单,鼠标移动到二级菜单的选项上,然后再迅速离开后,当鼠标再移动到该一级菜单或其他二级菜单选项,三级菜单也会显示. 原因:在为一个元素绑定hover事件之后,用户把光标移入元素 ...
- 用Jquery做一个时间日期选择器
今天我们就用Jquery做一个时间日期选择器,当打开网页时,文本框里面显示的是当前的日期,点击文本框可以出现年.月.日的下拉菜单,并且可以选择,会根据年份的选择判断是否是闰年,从而改变二月的天数,闰年 ...
- jquery做一个小的轮播插件---有BUG,后续修改
//首页无缝轮播 ; (function($, window, document, undefined) { $.fn.slider = function(options) { var default ...
- jquery做一个表单验证
正则表达式的写法: var re=new RegExp('规则', '可选参数');var re=/规则/参数;(这个最常用) 正则表达式的规则 和其他语言的正则表达式规则一样,可以参考我的另一边博文 ...
- 从0开始做一个的Vue图片/ 文件选择(上传)组件[基础向]
原文:http://blog.csdn.net/sinat_17775997/article/details/58585142 之前用Vue做了一个基础的组件 vue-img-inputer ,下面就 ...
- 【UI组件】——用jQuery做一个上拉刷新
技术要点: 1.jQuery的插件写法 2.上拉刷新步骤分解 3.css样式 jQuery的插件写法: $.fn.pluginName = function() { return this.each( ...
- js/html/css做一个简单的图片自动(auto)轮播效果//带注释
FF(firefox)/chrom/ie稳定暂无bug...注意:请自己建立一个images文件,放入几张900*238的图片(注意图片格式和名字与程序中一致). 1. [图片] 1.JPG 2. [ ...
- 基于jQuery的一个简单的图片查看器
项目中自己diy了一个图片查看器.因为初始代码不是自己的,只是在上面改了一下也没有弄的很漂亮.等以后有时间了在重写一下样式和封装,作为备用的只是积累吧.如果有童鞋有用到,完全可以在此基础上改,比较容易 ...
- 用jquery做一个带导航的名单列表
代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
随机推荐
- 《CSS实现单行、多行文本溢出显示省略号》
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方式: overflow: hidden; te ...
- twaver拓扑图拖拽后保存json数据
功能描述:拓扑图.对节点进行拖拽,序列化获取拓扑图信息,保存到本地localStorage,刷新页面,执行反序列化,从本地获取之前保存的数据,展现之前拖拽后的拓扑 拓展:此处存储用的是web本地存储l ...
- ECMAscript 变量作用域
使用var操作符声明的变量与未使用var操作符声明的变量区别 未使用var操作符声明 function test() { message='hi'; console.log(message); } c ...
- JS监测鼠标指针位置
需求1:鼠标移入正方形的时候,蓝色小圆点跟随鼠标滚动(不许蓝色小圆点超出正方形区域),正方形里实时显示当前鼠标相对于body的坐标. <!DOCTYPE html> <html la ...
- 用户选择wordpress程序建站需要知道的一些事情 - 安全、优化速度、配置
WordPress是我们使用最多的CMS程序之一,无论是我们的个人博客,还是企业网站,甚至中小型站点,我们都可以用WP程序部署.我们看到海外网站的时候,大部分都是用的WORDPRESS程序.在我们国人 ...
- Cass和ArcGIS交换
南方cass图形为CAD,把CAD图形转换成arcgis没有任何问题,到属性有问题,cass存放数据是放在CAD扩展XDATA中,和 arcgis导入导出CAD标准扩展属性不一样,只能二次开发使用,c ...
- setExecuteExistingDelayedTasksAfterShutdownPolicy方法与setContinueExistingPeriodicTasksAfterShutdownPolicy方法的比较
一.setExecuteExistingDelayedTasksAfterShutdownPolicy方法 这个方法大多是与schedule方法和shutdown方法搭配使用的. public voi ...
- Hadoop fs命令(转)
最近使用hive做一些etl工作,除了日常sql的编写,了解hadoop及hive的一些底层原理性质的东西包括调优非常有必要,一次hive调优就把原来的零散文件做了合并.首先记下hadoop常用的命令 ...
- oracle-2_dblink的创建和使用
一.创建dblink 1.查询创建dblink表 SELECT * FROM DBA_DB_LINKS; ); BEGIN SELECT COUNT(*) INTO I FROM DBA_DB_LIN ...
- 初涉京东及淘宝开放平台API-商品模型
============ 京东 ============ [Product]http://help.jd.com/jos/question-568.html#A2ware_id(相当于SPU?)sku ...