Div层拖动效果图:实现:CSS: 代码如下:<style>div{position:relative;}</style>JS: 代码如下:<script type="text/javascript"> var mouseover=truevar xcoor;var ycoor;function coordinates(){if (event.srcElement.id.indexOf("wishbroad") == 0) { event.srcElement.style.zIndex = 1000; mouseover=true; pleft=event.srcElement.style.pixelLeft; ptop=event.srcElement.style.pixelTop; xcoor=event.cli...
使用JQuery添加如下代码 代码如下:$(#sourceDiv).scroll( function() { $(#targetDiv).scrollTop($(this).scrollTop()); $(#targetDiv).scrollLeft($(this).scrollLeft()); }); $(#targetDiv).scroll( function() { $(#sourceDiv).scrollTop($(this).scrollTop()); $(#sourceDiv).scrollLeft($(this).scrollLeft()); }); 效果图:
改变文字innerHTML每个HTML元素具有InnerHtml属性定义的HTML代码和文字之间发生的元素的开幕式和闭幕式标记。通过改变一个元素的innerHTML后,一些用户交互,您可以更互动网页。但是,使用innerHTML需要一些准备,如果你希望能够利用它轻松,可靠。首先,你必须给予部分要更改身份证。与标识到位,你将能够使用getElementById功能,适用于所有的浏览器。在您认为建立您现在就可以操纵文字的要素。要开始了,让我们尝试改变文字一个...
本例是个非常简单的div拖动,有需要的朋友可根据自己的需求,添加相应的代码。欢迎拍砖 代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html style="height:100%;"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>div width resize</title> <!--引用jquery--> <script src="http://code.jquery.com/jquery-1.8.0.min...
最近做项目中有一个模块是用于实时监控的,左边有个菜单栏用于显示所有的设备,那当然是从数据库中动态获取的了,右边是个iframe用于显示监控画面。本来这个功能并不复杂,左边的菜单项是利用dtree.js来实现的,可时当功能实现完成之后,却发现一个问题,就是左边菜单栏中的设备名有的会很长,会超出了div的长度,准确说是左边iframe的宽度和长度不够。那么,这时就必须要利用滚动条了,可以设置左边菜单项div的overflow-x:auto;ov...
代码如下:<script type=”text/javascript” src=”jquery.js”></script><body><form action=”" method=”post” enctype=”multipart/form-data”><label>请选择上传的图片</label><a href=”javascript:addimg()” >增加图片</a><div class=”mdiv” id=”mdiv”><div class=”iptdiv” ><input type=”file” name=”img[]” class=”ipt” /><a href=”#” name=”rmlink”>X</a></div></div><input type=”submit” name=”...
代码如下:function setheight() { var div=document.getElementById("event_basicInfo"); //div.style.width="40%"; div.style.height=400; div.style.overflow="auto"; } window.onload=setheight;
代码如下:<!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><script src="jquery_last.js" type="text/javascript"></script><script type="text/javascript">$(document).ready( function(){});f...
代码如下:<!DOCTYPE html><html><head> <style> div { background:#ece023; width:30px; height:40px; margin:2px; float:left; } </style> <script src="http://code.jquery.com/jquery-latest.min.js"></script></head><body> <div>a</div> <div>b</div> <div>c</div> <div>d</div> <div>e</div> <div>f</div><script> $("div").click(function () { $(this).hide(1000); });</script></body></html...
本实例使用Javascript实现右下角可关闭最小化div,可以用于展示推荐内容,效果预览网址:http://keleyi.com/keleyi/phtml/xuanfudiv/3.htm 效果图片: 完整源代码: 代码如下:<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>js实现右下角可关闭最小化div--柯乐义</title> <script src="ht...
代码如下:<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>oec2003</title><script language="JavaScript" type="text/JavaScript"><!--function toggle(targetid){ if (document.getElementById){ target=document.getElementById(targetid); if (target.style.display=="block"){ target.style.display="none"; } else { ...
在使用javascript过程中,想循环遍历一个数组,经常使用的语法有两种: 代码如下: for (var i; i < array.length; i++) { statement; } for (var i in array) { statement; }这两种用法看起来能做同样的事情,但实际上两个循环的循环次数一般是不一样的。源码如下: 代码如下: <!DOCTYPE html> <html> <head> <style> #button{text-align:center;} #outer{width:330px; height:100px; margin:10px auto;} #outer div{float...
JQuery计算滚动条长度和位置,代码如下: javascript 代码如下:<script type="text/javascript"> var scrMinHeight = 1; //滚动条最小高度 var scrMaxHeight = 0; //滚动条最大高度 var scrDefualtTop = 80; //滚动条默认位置 var scrHeight = 0; //初始化滚动条 function InitScroll() { scrMaxHeight = $("#mainScrollContent").height(); //文本框高度 scrHeight = document.getElementById("...
在使用Java做后台的时候,都会做到登录的页面,但是自己的页面太难看了,要居中没居中,要颜色没颜色,但是无论是怎么样都得使登录的框居中吧!以前的想法是通过CSS+Div使div居中,但是现在的想法变了,通过JavaScript可以简单的使Div在页面上居中,随着网页大小的改变做出相应的改变。而且只要明白了居中的原理轻而易举的就可以实现了。 先看一下居中的原理吧! 先看一张图。 从图中看到了什么?可以看到红色的框居中了,为什么会...
代码如下:$("#feedbackContainer").scrollTop($("#feedbackContainer").height());