jQuery实现用方向键控制层的上下左右移动
题目:按下方向键时,使层向相应的方向平滑移动20像素;四个方向键的键码分别是37(左)、38(上)、39(右)和40(下)。
然后我写了下面的代码:
$div就是要移动的层,且它的position已在CSS中设为relative。瞄一眼好像没什么问题,运行之后发现下面的问题:
1.按了向下之后,再按向上没有反应。
2.按了向右之后,再按向左没有反应。
后来经一网友点拨,恍然大悟:
当按了向下的时候,top值为20px,这时候再按向上,从Firebug可以看出此时的bottom值也是20px,而层没有向上移动是因为浏览首先解析的是top,也就是说{top:20px;bottom:100px}和{top:20px}是一样的,不管bottom值是多少。按了向右之后,按向左没有反应也是这个原因,关键在left值。
于是将代码改了下:
运行之后如预期一样,上下左右都没问题。
体会:一直都知道在定位的时候,靠top和left两个属性就足够的,偏偏还写出了right/bottom,真是细节要人命啊。
相关推荐
-
jquery实现标签上移、下移、置顶
eg:如在后台的标签列表中,实现上移.下移.置顶功能 主要实现思路是节点操作,比如说:上移,直接把点击项移动到前一个节点,以此类推,当然实际代码实现还要加些判断,如当前点击操作项是否已经是置底或置底了,如果是则给点相应提示,好让操作者知道发生了什么事情. 思路: 1.先用到的克隆方法.clone(true): 即把当前要移动的项先保存好,备于后用. 2.找到当前标签所对应的相关元素及其相关方法: 如:.prev()当前元素上面的标签 .next()当前元素下面的标签 .after()xxx之后添
-
jQuery实现表格行上下移动和置顶效果
我们在操作列表数据的时候,需要将数据行排列顺序进行调整,如上移和下移行,将行数据置顶等,这些操作都可以在前端通过点击按钮来完成,并且伴随着简单的动态效果,轻松实现表格数据排序. HTML 页面上是一个简单的数据表格,我们在数据行中分别放置"上移","下移"和"置顶"三个链接,并且分别定义三个class属性,我们来通过jQuery实现这些操作. <table class="table"> <tr> <
-
jQuery插件StickUp实现网页导航置顶
实用的jQuery网页元素固定导航置顶插件StickUp,简单的jQuery插件,实现网页元素固定,如导航固定让其总是保持在视图中可见,在one-page页面中就可以看出效果,大家可以研究研究. 使用方法: 1.加载插件和jQuery <script src="js/jquery.js">script> <script src="js/stickUp.min.js">script> <link href="stic
-
jquery实现的鼠标下拉滚动置顶效果
$(function(){ //置顶按钮显示/隐藏实现 $(window).scroll(function(){ var w_height = $(window).height();//浏览器高度 var scroll_top = $(document).scrollTop();//滚动条到顶部的垂直高度 if(scroll_top > w_height){ $("#goto-top").fadeIn(500); }else{ $("#goto-top").f
-
基于jQuery实现文本框缩放以及上下移动功能
想让你的网页更加的炫酷,想让你的留言评论更加的具有互动性吗,那么请仔细研究下本代码吧. jQuery代码: 复制代码 代码如下: $(function(){ var $comment = $('#comment'); $('.bigger').click(function(){ if(!$comment.is(":animated")){ if($comment.height() &
-
jQuery操作Select的Option上下移动及移除添加等等
复制代码 代码如下: <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="jquery-1.9.1.min.js"></script> <script type="text/javascript"> /**
-
Jquery实现Div上下移动示例
复制代码 代码如下: $(this).ready(function() { $(".up").each(function() { $(this).click(function() { var $tr = $(this).parents("li"); if ($tr.index() != 0) { $tr.prev().before($tr); } }); }); var trLength = $(".down").length; $("
-
jquery实现tr元素的上下移动示例代码
复制代码 代码如下: <html> <head> <title></title> <style type="text/css" > table { background:#949494; width:400px; line-height:20px;} td { border-right:1px solid gray; border-bottom:1px solid gray; } </style> <scri
-
jQuery实现表格行上移下移和置顶的方法
本文实例讲述了jQuery实现表格行上移下移和置顶的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <ti
-
jQuery实现用方向键控制层的上下左右移动
题目:按下方向键时,使层向相应的方向平滑移动20像素:四个方向键的键码分别是37(左).38(上).39(右)和40(下). 然后我写了下面的代码: $div就是要移动的层,且它的position已在CSS中设为relative.瞄一眼好像没什么问题,运行之后发现下面的问题: 1.按了向下之后,再按向上没有反应. 2.按了向右之后,再按向左没有反应. 后来经一网友点拨,恍然大悟: 当按了向下的时候,top值为20px,这时候再按向上,从Firebug可以看出此时的bottom值也是20px,而层
-
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
本文实例讲述了jQuery实现通过方向键控制div块上下左右移动的方法.分享给大家供大家参考,具体如下: 在CSS中当DOM元素的position属性为absolute或relative时,我们可以通过改变这个元素的left和top属性的具体值来控制元素在页面中显现的位置. 利用上述属性,我们可以简单实现一个元素在页面中的移动效果,这里我们采用JQuery的animate方法来实现动画效果,利用keydown监听方向键按下的事件(这里采用keydown而不是keyup,是为了能够在方向键被一直按
-
python方向键控制上下左右代码
本文所示代码实现python编程方向键控制图片上下左右,我们首先看下演示结果. 演示: 实例代码: bif="1.jpg" mif="2.jpg" import pygame,sys from pygame.locals import * pygame.init() screen=pygame.display.set_mode((640,360),0,32) background=pygame.image.load(bif).convert() mouse_c=py
-
jQuery实现的页面遮罩层功能示例【测试可用】
本文实例讲述了jQuery实现的页面遮罩层功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
-
jquery实现简单的遮罩层
本文实例讲解了jquery遮罩层,包括遮罩层的不同样式实现.mask实现遮罩层等,分享给大家供大家参考,具体内容如下 一.jQuery实现遮罩层的不同样式 1.1 背景半透明遮罩层样式 需要一个黑色(当然也可以其他)背景,且须设置为绝对定位,以下是项目中用到的css样式: /* 半透明的遮罩层 */ #overlay { background: #000; filter: alpha(opacity=50); /* IE的透明度 */ opacity: 0.5; /* 透明度 */ displa
-
java通过方向键控制小球移动的小游戏
本文需求实现了java通过方向键控制小球移动的具体过程,供大家参考,具体内容如下 需求分析: 第一 要画出一个小球 第二 要能通过控制方向键控制它的移动 第一部分的实现 1.首先要画一个大窗体 public class BallMove extends JFrame 在开发Java应用程序时,通常情况下利用JFrame创建大窗口.利用JFrame创建的窗口分别包含一个标题.最小化按钮.最大化按钮和关闭按钮 用主类去继承JFrame类就可以使用它的方法啦 2.接着用一个类来继承JPanel 如果说
-
jQuery实现鼠标跟随提示层效果代码(可显示文本,Div,Table,Html等)
本文实例讲述了jQuery实现鼠标跟随提示层效果代码.分享给大家供大家参考,具体如下: 运行效果截图如下: Web网站有不少需要用到tip提示层的地方,结合jquery的jquery.cluetip.js ,可以实现本地字符或ajax异步调用显示提示层.如以上购评分明细提示.(优势:宽度需要调用页加载时定义,高度auto , 且三角指定图标能根据显示层的大小位置来调用它的位置,达到醒目直观的效果) jquery.cluetip.css /* global */ #cluetip-close im
-
jQuery实现页面滚动时层智能浮动定位实例探讨
各位兄弟可能碰到定位的问题,特别是在博客或者微博上面也会见到这个效果,于是产品人员在策划的时候就会要人家那种效果,,,而苦逼的我们需要去实现,实现实现.....没办法,谁让我们是攻城师呢,攻吧: 效果图如下,滚动条下拉的时候黑色的块TOP为0:固定显示: 代码如下: 复制代码 代码如下: <!DOCTYPE html> <html > <head> <title>jQuery实现页面滚动时层智能浮动定位</title> <meta name
-
Spring Boot的Controller控制层和页面
一.项目实例 1.项目结构 2.项目代码 1).ActionController.Java: package com.example.controller; import java.util.Date; import java.util.Map; import org.springframework.beans.factory.annotation.Value; import org.springframework.stereotype.Controller; import org.spring
-
javascript控制层显示或隐藏的方法
本文实例讲述了javascript控制层显示或隐藏的方法.分享给大家供大家参考.具体实现方法如下: <html> <head> <title>中国风</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> </head> <script language="JavaScript&qu
随机推荐
- 禁止站外提交表单(author:killer)
- 使用Lua编写Web端模板引擎的实例代码分享
- 浅谈document.write()输出样式
- Java+mysql用户注册登录功能
- 使用脚本和批处理清除电脑中的痕迹的代码第1/2页
- java生成图片验证码示例代码
- Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果
- JavaScript判断访问的来源是手机还是电脑,用的哪种浏览器
- Python lxml模块安装教程
- C语言中的malloc使用详解
- mysql 5.5 安装配置图文教程
- 快速学习jQuery插件 Form表单插件使用方法
- Java正则表达式易错知识点汇总
- Java gbk转utf-8
- Mysql数据库表定期备份的实现详解
- jquery处理checkbox(复选框)是否被选中实例代码
- 基于jQuery ligerUI实现分页样式
- jQuery中的常用事件总结
- datatables 带查询条件java服务端分页处理实例
- JavaScript 一行代码,轻松搞定浮动快捷留言-V2升级版