看本文得先了解以下几个事件（摘自w3c）。 blur事件: 当元素失去焦点时发生 blur 事件。 focus事件:focus() 方法用于赋予文本域焦点(也值让某些元素得到焦点事件)。 tabIndex属性:tabIndex 属性可设置或返回按钮的 tab 键控制次序。 我们都知道blur只是针对form表单控件的，而对于 span , div , li 之类的，则没办法触发它们的动作，现在我们只需要设置一个tabindex属性则可以触发它们的焦点事件了。 真实项目代码: 代码如下:Esc....
代码如下:$(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; $(".down").each(function() { $(this).click(function() { var $tr = $(this).parents("li"); if ($tr.index() != trLength) { $tr.next().after($tr); } }); }); $("a[name=up]").click(function()...
代码如下:<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>JS实现div居中</title> <style> /*外层div居中*/ #main { position: absolute; /*极为重要*/ background-color: blue; width:400px; height:200px; /*left:50%; top:50%; margin-left:-200px; margin-top:-100px;*/ border:1px solid #00F; } #content { position: absolute; /*极为重要*/ background-color: yellow; width: 200px; height: 100px; /*lef...
代码演示： http://www.imqing.com/demo/movediv.html 大概原理： 使div的position为绝对定位absolute，然后控制其top与left值，需要监听鼠标事件，主要用到mousedown, mousemove, mouseup。 在mousedown后，记录mousedown时鼠标与需要移动的div的位置，然后取得两者之差，得到在鼠标移动后，div的位置。即： left = 当前鼠标位置.x - (鼠标点击时的.x值 - div的初始位置x值) top = 当前鼠标位置.y - (鼠标点击时的.y值 - div的初始...
实现代码: 代码如下:<script type="text/javascript">var rollSet = $(#widget); var offset = rollSet.offset(); var fwidth = $("#footer").height(); $(window).scroll(function() { var scrollTop = $(window).scrollTop(); var scrollBtm = $(document).height() - $(window).scrollTop() - $("#widget").height(); if (offset.top < scrollTop) { if (scrollBtm > fwidth) { ...
以下代码块就能始终让弹出div位于屏幕的正中心，希望对大家有所帮助！ 代码如下: //让指定的DIV始终显示在屏幕正中间 function setDivCenter(divName){ var top = ($(window).height() - $(divName).height())/2; var left = ($(window).width() - $(divName).width())/2; var scrollTop = $(document).scrollTop(); var scrollLeft = $(document).scrollLeft(); $(d...
这是某位大神写的jquery下div 的resize事件。 代码如下://resize of div (function($, h, c) { var a = $([]), e = $.resize = $.extend($.resize, {}), i, k = "setTimeout", j = "resize", d = j + "-special-event", b = "delay", f = "throttleWindow"; e[b] = 250; e[f] = true; $.event.special[j] = { setup: function() { if (!e[f] && this[k]) { return false; } var l = $(this); a = a.add(l); $.data(this, d, { w: ...
代码如下:<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Resize</title> <style type="text/css"> #rRightDown,#rLeftDown,#rLeftUp,#rRightUp,#rRight,#rLeft,#rUp,#rDown{ position:absolute;background:#C00;width:6px;height:6px;z-index:5;font-size:0;} #rLeftDown,#rRightUp{cursor:ne-resize;} #rRightDown,#rLeftUp{cursor:nw-resize;} #rRight,#rLeft{cursor:e-resize;}...
jquery代码: 代码如下:$(function(){$("#test").load("${contextPath}/notepad/toCreate.do");} 加载 ${contextPath}/notepad/toCreate.do 页面到id为test的div中,加载完成之后,create页面中的js不会执行 这种方式没办法实现,换个思路: 代码如下:<div id="test"> <iframe name="testLoad" style="width:100%"></iframe></div>js事件: 代码如下:function loadPage(){ window.open("${contextPath}/notepad/toCreate.do",testL...
思路是利用jquery的mousemove，mousedown，mouseup三个事件，定义两个相对位置，分别是 1、组件左上角与屏幕左上角的相对位置 2、鼠标所在坐标与组件左上角的相对位置。 具体函数如下： 代码如下:.drag{ position:absolute; background:#0000CC; top:100px;left:200px; padding:0; } 代码如下:$(document).ready(function(){ var move=false;//移动标记 var _x,_y;//鼠标离控件左上角的相对位置 $(".drag").mousedown(function(...
代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>侧边栏广告</title> <style type="text/css"> #show { width:100px; height:80px; background:#0f0; position:fixed; _position:absolute; right:0px; ...
代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>定时关闭的层</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <style> #divbox{ border:5px solid #0066cc; background:skyblue; padding:20px; font-size:22px; color:white; } </style> <scri...
代码如下:<div id="slides"> <div id="content-main" name="content-main"> <div id="a"> <img src="img/example-slide-1.jpg" alt="1"> </div> </div> <div id="content-main" name="content-main"> <div id="b"> <img src="img/example-slide-2.jpg" alt="1"> </div> </div> </div> <input id="p" type="button" value="add" onclick="add1();"/> <input id="p" type="button" value="add33" onclick="clear();"/> 代码如下:fu...
代码如下:<head> <script> function check(){ var num = document.getElementById("choose").value; alert(num); if(num=="4"){ document.getElementById("show").style.display="block"; }else{ document.getElementById("show").style.display="none"; } } </script> </head> <body onload="check()"> <select id="choose" onchange="check()"> <option value="1">第一</option> <option value="2">第二</option> <option value=...
用jquery的hover事件，当鼠标移动到menu时，把遮挡下拉菜单的div设置为负值，鼠标离开时恢复正值， 代码如下： 代码如下:$("#menu").hover( function() { $(".divName").css("z-index", "-1"); }, function() { $(".divName").css("z-index", "0"); });