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 ...
随机推荐
- input文本框点击第一次光标在最右边
效果: 样式效果引入bootstrap4.0就OK了. HTML代码: <div class="input-group w-25"> <div class=&qu ...
- Java访问控制权限
在Java中一共存在四种访问控制权限,即 private.default(默认).protected和public 1.private 访问权限 private属于私有访问权限,可以用在属性的定义.方 ...
- Stage3--Python控制流程及函数
说在前面: Stage1-Stage4简单介绍一下Python语法,Stage5开始用python实现一些实际应用,语法的东西到处可以查看到,学习一门程序语言的最终目的是应用,而不是学习语法,语法本事 ...
- ArcGIS Enterprise 10.5.1 静默安装部署记录(Centos 7.2 minimal)- 4、安装 ArcGIS for Server
安装ArcGIS for Server 解压server安装包,tar -xzvf ArcGIS_Server_Linux_1051_156429.tar.gz 切换到arcgis账户静默安装serv ...
- wxpython 简单表格控件
import wx, wx.grid class GridData(wx.grid.PyGridTableBase): _cols = "a b c".split() _data ...
- matlab练习程序(结构张量structure tensor)
根据结构张量能区分图像的平坦区域.边缘区域与角点区域. 此算法也算是计算机科学最重要的32个算法之一了.链接的文章中此算法名称为Strukturtensor算法,不过我搜索了一下,Strukturte ...
- asyncio标准库1 Hello World
利用asyncio的event loop,编写和调度协程 coroutine [,kəuru:'ti:n] n. 协程 Simple coroutine(调用1个协程) import asyncio ...
- 如何用css将一个div设置为一个圆
直接上代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> ...
- 【java开发系列】—— Tomcat编译报错
由于之前Eclipse里面有一个可移植性的web工程,但是在我很久没用后,再次登录这个IDE的时候就发现了问题. 首先,我的电脑里面有两个版本的JDK,1.6和1.7.两个版本的Tomcat6和7以及 ...
- js中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版
网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offset ...