- 浏览: 197171 次
- 性别:
- 来自: 深圳
文章分类
最新评论
-
lisafx:
...
word文件转换为html文件等 -
glang010:
openlayer调用geoserver发布的地图实现地图的基本功能 -
w156445045:
请问请问怎么使用google的离线地图文件呢 谢谢。
openlayer调用geoserver发布的地图实现地图的基本功能 -
影非弦:
我最近也正在学习GIS,但是不知道在哪找地图资源
openlayer调用geoserver发布的地图实现地图的基本功能 -
2321726042:
靠, 我以为你下载包里有CSS样式,既然没有,晕喔 还等 了一 ...
openlayer调用geoserver发布的地图实现地图的基本功能
<!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"> <!-- #Layer1 { position:absolute; left:258px; top:16px; width:243px; height:223px; z-index:1; border:#00CCFF solid 1px; background:#FFC488; } --> </style> <script type="text/javascript" language="Javascript" src="jquery.js"></script> <SCRIPT LANGUAGE="JavaScript"> var _divShowTimer;//20000 var _divObj; var divHeight; var divWidth; function showDiv(divId,_sType,_time){ _divObj=document.getElementById(divId); if(!_divObj)return; if(!_sType){ if(_divObj.style.display==""){ _divObj.style.display="none"; }else{ _divObj.style.display=""; } return; } if(!_time)_time=500; //gpsPlayerTimer = setInterval("gpsTrack2()", 300); if(_sType=="1"){//竖直逐渐张开或收缩 if(_divObj.style.display!="none"){ divHeight=_divObj.clientHeight; _divShowTimer = setInterval("displaySTyle1('none')", 5); }else{ _divShowTimer = setInterval("displaySTyle1('')", 5); } }else if(_sType=="2"){ //由角落逐渐张开或收缩 if(_divObj.style.display==""){ divHeight=_divObj.clientHeight; divWidth=_divObj.clientWidth; _divShowTimer = setInterval("displaySTyle2('none')",5); }else{ _divShowTimer = setInterval("displaySTyle2('')",5); } }else if(_sType=="3"){ //由角落逐渐张开或收,且颜色慢慢变淡 //$d.toggle("slow"); //("slow", "normal", "fast"),hide("slow")隐藏 ,show("slow")显示 $(_divObj).toggle(_time); }else if(_sType=="4"){ }else if(_sType=="5"){ }else if(_sType=="6"){ }else if(_sType=="7"){ } } function displaySTyle1(_diSty){ try{ if(_diSty=="none"){ _divObj.style.height=_divObj.clientHeight-5+"px"; if(_divObj.clientHeight==3){ _divObj.style.display="none"; clearInterval(_divShowTimer);//清除计时器 return; } }else if(_diSty==""){ _divObj.style.height=_divObj.clientHeight+5+"px"; _divObj.style.display=""; _divSH=parseInt(_divObj.style.height); if(_divSH==divHeight){ clearInterval(_divShowTimer);//清除计时器 return; } } }catch(err){} } function displaySTyle2(_diSty){ try{ if(_diSty=="none"){ _divObj.style.height=_divObj.clientHeight-5+"px"; _divObj.style.width=_divObj.clientWidth-5+"px"; if(_divObj.clientHeight==3){ _divObj.style.display="none"; clearInterval(_divShowTimer);//清除计时器 return; } }else if(_diSty==""){ _divObj.style.height=_divObj.clientHeight+5+"px"; _divObj.style.width=_divObj.clientWidth+5+"px"; _divObj.style.display=""; _divSH=parseInt(_divObj.style.height); if(_divSH==divHeight){ _divObj.style.width=divWidth; clearInterval(_divShowTimer);//清除计时器 return; } } }catch(err){} } function displaySTyle3(){ var $d=$(_divObj) $d.toggle("slow"); //("slow", "normal", "fast"),hide("slow")隐藏 ,show("slow")显示 } </SCRIPT> </head> <body> <div id="Layer1"> </div> <input type="button" name="Submit" value="1" onclick="showDiv('Layer1','1')" /> <input type="button" name="Submit" value="2" onclick="showDiv('Layer1','2')" /> <input type="button" name="Submit" value="3" onclick="showDiv('Layer1','3',700)" /> <input type="button" name="Submit" value="4" onclick="showDiv('Layer1','4')" /> <input type="button" name="Submit" value="5" onclick="showDiv('Layer1','5')" /> <input type="button" name="Submit" value="6" onclick="showDiv('Layer1','6')" /> <input type="button" name="Submit" value="7" onclick="showDiv('Layer1','7')" /> </body> </html>
该样式主要有三种:一、竖直逐渐张开或收缩,二、由角落逐渐张开或收缩三、由角落逐渐张开或收,且颜色慢慢变淡
把该代码拷贝到dreamweaver运行即可看到效果
发表评论
-
转载:WdatePicker日历控件使用方法
2012-05-09 16:04 41911. 跨无限级框架显示 无论你把日期控件放在哪里,你 ... -
设置输入框只能输入数字和逗号
2011-03-16 11:52 1839只能输入数字 onkeyup="this.val ... -
使用json-lib JSONObject JSONArray
2010-11-03 17:40 2534下载 到http://json-lib.sourc ... -
js封装hashMap并调用
2010-08-16 15:23 1984新建一个hashMap.js文件,文件内容如下: Arra ... -
Jquery初步学习
2010-08-11 12:08 1166Jquery初步学习要点:1.如何获取对象?$("# ... -
Microsoft.AlphaImageLoader滤镜讲解,jsp显示本地图片
2010-04-20 11:21 7013在jsp中显示本地图片 ... -
js设置select
2010-04-12 18:16 1114在html的标签中显示为: <select id=&q ... -
JSON實例
2010-01-06 16:39 1017JSON一般在什麽情況下用了,在我的理解來說一般是在 ... -
学习正则表达式
2009-09-21 17:51 918学习脚本很久了,但每次遇到那些验证匹配问题,需要用到正则表达式 ... -
JS实现div圆弧
2009-09-11 10:36 1847这个网站不错http://www.cnzzad.com/jsc ... -
js实例讲解this用法
2009-05-14 11:45 1610<html> <head> < ... -
position:absolute relative 得到一个对象的top和left
2009-05-07 14:25 1839当设定position:absolute ---有父亲无兄弟 ... -
js中top,left,height,width相关参数的解析和实例
2009-05-07 11:50 5297下面的这些参数的解析都是针对于IE浏览器的: 得到屏幕 ... -
firefox、IE下的几个不同属性的方法调用
2009-03-17 17:14 1459声明:document.all:该对象只有IE中才存在,故用 ... -
任何对象的top和left
2009-03-11 17:34 869var e=this; //对象 var t=e.off ... -
IE,FF兼容的鼠标移动样式转换
2009-03-11 17:18 1469主要是实现任何页面只要引入class="button ... -
Window 中窗口的层次关系以及窗口的属性
2009-02-05 16:30 1714转自:http://www.51testing.com/?ac ... -
动态添加删除table
2008-11-14 17:19 1022<!DOCTYPE html PUBLIC " ... -
几种开源的AJAX框架(jQuery,Mootools,Dojo,Ext JS等等) 比较
2008-11-14 15:49 2958AJAX是web20的基石,现在网上流行几种开源的AJAX框架 ... -
jquery跳出each循环
2008-11-14 15:05 2841$(function (){ $("input[ ...
相关推荐
总之,利用jQuery实现`div`元素的展开收缩效果是一种常见的网页交互功能,它可以提高用户的交互体验,使得信息展示更加灵活且易于管理。通过熟练掌握jQuery库和DOM操作,你可以创造出更多丰富的网页动态效果。
在网页设计中,Div+CSS是一种常见的布局方式,它通过定义HTML中的<div>元素样式来实现页面的结构和样式分离。这种技术对于创建响应式、可定制的网页菜单尤其有用。"利用Div+CSS自动收缩菜单"就是这样一个例子,它...
在网页开发中,动态效果的实现往往能提升用户体验,其中,JS+CSS实现的DIV层的展开和收缩效果就是一个常见的交互设计。这种效果允许用户通过点击按钮或链接来隐藏或显示指定的内容区域,使页面布局更加灵活且富有...
在这个"jQuery 左右2列可收缩的div布局"示例中,我们将深入探讨如何使用少量代码实现一个灵活的、响应式的布局,允许用户隐藏或展开左侧栏。 首先,我们来理解基本的布局概念。通常,左右两列布局涉及两个主要部分...
在网页设计中,创建一个上下可收缩的div模块是一项常见的需求,这通常涉及到JavaScript和jQuery的交互技术。本文将深入探讨如何使用这两种语言来实现这一功能,并提供相关的代码示例和设计技巧。 首先,让我们理解...
CSS+JS 实现 DIV 层的展开折叠效果 本文将详细介绍如何使用 CSS 和 JS 实现一个 DIV 层的展开折叠效果。这个效果可以在网页上实现一个折叠的样式,用户可以点击按钮来展开或折叠内容。 HTML 结构 首先,我们需要...
在网页开发中,jQuery 是一个...实际项目中,你可能需要根据具体需求调整代码,比如添加多个收缩效果,或者根据不同的触发条件执行不同的收缩动作。通过深入学习 jQuery 和 CSS,你可以创造出更复杂的交互式用户体验。
在这个框架中,CSS可能被用来设置div的宽度、间距、位置以及实现左右栏的对齐和收缩效果。 3. **jQuery**:jQuery库提供了便利的API,简化了DOM操作,如元素的选择、属性的修改和事件的绑定。在左右分栏收缩功能中...
手风琴效果是一种常见的交互设计,它允许用户逐个展开或收缩内容区域,以节省页面空间并提高用户体验。 首先,让我们了解jQuery的基本概念。jQuery是一个快速、简洁的JavaScript库,它简化了HTML文档遍历、事件处理...
在网页设计中,实现“左右2列可收缩的布局效果”是一种常见的需求,尤其是在响应式设计中,这种布局能够提供良好的用户体验,适应不同设备的屏幕尺寸。本文将深入探讨这一主题,结合弹性布局(Flexbox)的概念,详细...
本资源提供的"漂亮的菜单效果(div+css)"旨在展示如何利用HTML的`<div>`元素和CSS(层叠样式表)来创建吸引人的、交互式的菜单。下面将详细介绍这些知识点。 首先,`<div>`元素是HTML中的一个块级元素,通常用于...
接下来,CSS(如contactable.css)用于设置div的样式和隐藏效果。`display:none;`属性使得div在页面加载时不显示。可以为div和按钮添加其他样式以增强视觉效果: ```css #hiddenDiv { width: 300px; background-...
在网页开发中,JavaScript(JS...总结,JavaScript显示隐藏DIV的动画效果涉及到DOM操作、CSS样式控制、定时器函数以及可能的浏览器兼容性处理。这种技术在现代网页设计中广泛使用,可以显著提升用户与网页的互动体验。
在JavaScript中,实现一个div层缓慢收缩与展开的效果通常涉及到DOM操作、事件处理以及定时器的使用。这个实例中,我们看到的是一个简单的JavaScript代码,它通过监听用户的点击事件来改变div元素的高度,从而实现层...
综上所述,制作“div+css 三级导航”需要掌握HTML的布局元素(如 `div`)和CSS的样式控制技巧,包括定位、层级管理和交互效果实现。通过实践和理解这些知识点,你将能够创建出既美观又实用的网页导航菜单,提升网站...
这种“网站后台页面左侧收缩折叠效果”是一种常见的交互设计,它利用JavaScript(JS)技术来增强用户体验。通过点击一个小箭头图标,左侧的导航菜单会收合起来,为主要内容区域腾出更多空间,同时也使得页面布局更加...
"收缩式导航菜单"是一种常见的交互设计模式,特别是在移动设备上,它可以节省屏幕空间,提高用户体验。这种菜单在未展开时通常只显示主要的导航选项,当用户点击时会展示更多子级菜单项。在本案例中,我们将深入探讨...
layui是一款流行的前端UI框架,它提供了丰富的组件和样式,用于构建现代、响应式的Web应用。在layui中,侧边收缩菜单是一项重要的功能,它能够帮助优化网页布局,提高用户体验。当我们点击图标时,菜单可以进行收缩...
标题中的“滑动层收缩效果”指的是在网页设计或移动应用开发中常见的一种交互效果,通常用于导航菜单、侧边栏或任何可扩展和收缩的内容区域。这种效果允许用户通过滑动或点击来展开和收起内容,提高用户体验并节省...
特别是CSS3的过渡和动画属性,可以实现平滑的展开和收缩效果。同时,CSS的媒体查询(Media Queries)还可以确保菜单在不同设备和屏幕尺寸上的响应式布局。 3. div元素:在HTML中,div是用于分组其他HTML元素的容器...