因为虽然实现起来麻烦点，如果用自带的Select，很简单的就完成了，但是本代码实际上是在向大家讲述一种Js在网页中的应用实战，多种元素之间的配合作用等。效果如下图： 下拉select选择框 body{margin:20px auto;font-family:Arial,Helvetica,sans-serif;font-size:12px;width:950px;height:400px;border:solid 1px #aaa;position:relative;padding:10px;} h1{font-size:12px;color:#444;} ul{margin:0;padding:0;list-style:none...
代码如下:/*********************************************** * Ajax Page Fetcher- by JavaScript Kit (www.javascriptkit.com) ***********************************************/ var ajaxpagefetcher={ loadingmessage: "Loading Page, please wait...", exfilesadded: "", connect:function(containerid, pageurl, bustcache, jsfiles, cssfiles){ var page_request = false var bustcacheparameter="" if (window.XMLHttpReq...
html布局代码 代码如下: 无标题文档 * { margin:0; padding:0; } #demo { /*********必须的 保证超出宽度能够滚动*********/ width:600px;/*可视区域宽度*/ overflow:hidden; /*********必须的 保证超出宽度能够滚动*********/ height:80px; } #demo1,#demo2 { width:800px;/*整个图片宽度*/ float:left; } #demo img{ display:block; float:left; } #demo li { float:left; width:60px; height:80px; } #demo0 { /*******...
样式表(CSS) 格式整理与压缩 html,body,form,fieldset,textarea { height:100%; margin:0; padding:0; border:0; font-size:10pt; background:#eee; } form { margin:0 1%; overflow:hidden; } legend { line-height:3em; font-weight:bolder; } button { float:left; margin:1% 1% 0 0; cursor:pointer; } textarea { width:100%; height:20em; border:1px solid #ccc; display:block; background:#fff; } function $(id){ret...
本文实例讲述了jQuery+css实现的切换图片功能代码。分享给大家供大家参考，具体如下： 运行效果截图如下：具体代码如下：demobody {margin:0; padding:0;}.container {border:6px solid gray; background:black;width:600px; height:400px; position:relative;left:50%; margin-left:-300px; border-radius:6px;-webkit-border-radius:6px; -moz-border-radius:6px;overflow:hidden;}.text-center {text-align:center;}h1 {font-si...
本文实例讲述了jQuery+css实现的时钟效果。分享给大家供大家参考，具体如下： 运行效果截图如下：这里没有做太多的修饰，简单的实现了一下功能，另外，用的是js的setTimeout方法，当时间长了之后，会有一定的延时，建议，在每隔多少分钟执行一次时钟校准！哈哈，都有误差的嘛，反正我是没给你校。 具体代码如下：var addRadian = Math.PI / 30;var wrapper = null;var minutes = 0;var hours = 0;var secondsLineLength = 14;var s...
本文实例讲述了jQuery+css3实现转动的正方形效果。分享给大家供大家参考，具体如下： 主要是应用到了css3中的rotate来控制旋转角度 运行效果截图如下：点击此处查看在线演示效果。 具体代码如下：img { width:50px; height:50px; }.margin1 { margin-top:50px; margin-left:100px; }.margin2 { margin-top:50px; margin-left:100px; }.margin3 { margin-top:50px; margin-left:100px; }.margin4 { margin-top:50px; margin-left:10...
本文实例讲述了jquery+css3实现会动的小圆圈效果。分享给大家供大家参考，具体如下： 运行效果截图如下：具体代码如下：那些变换颜色的小豆豆h1{font-size:16px;}.circle{position:absolute;width:100px;height:100px;border-radius: 50px;-webkit-border-radius:50px;-moz-border-radius:50px;-o-border-radius:50px;-ms-border-radius:50px;border:1px solid #ddd;background-color:#eee;text-align:center;-moz-transition:back...
本文实例讲述了jQuery+css实现的换页标签栏效果。分享给大家供大家参考，具体如下： 运行效果截图如下：具体代码如下：indexbody {margin:0; padding:0; font-size:12px; color:gray;}.container {height:200px; background:#F2F2F2; border-radius:6px;-webkit-border-radius:6px; -moz-border-radius:6px; border:6px solid #D5D5D5; }.wrapper {width:90%; margin:0px auto;}.pageContainer {margin:0 auto; height:30px; posit...
本文为大家分享的第一个实例：JS控制DIV层的展开、收缩效果。CSS+JS实现一个DIV层的展开/折叠效果* { margin:0; padding:0;} body { text-align:center; font:75% Verdana, Arial, Helvetica, sans-serif;} h1 { font:125% Arial, Helvetica, sans-serif; text-align:left; font-weight:bolder; background:#555; padding:3px; display:block; color:#99CC00} .class1 { width:40%; background:#CCCCCC; position:relative; margin...
本文实例讲述了jQuery+css实现的动态块漂移效果.分享给大家供大家参考，具体如下： 运行效果截图如下：具体代码如下：function createColor() {var color = [];for (var i = 0; i width left - width : left;top = top > height top - height : top;var html = [];html.push('');return html.join("");}function initRect() {var body = $("#body");var width = body.width();var height = body.height();var index = new Date(...
本文实例讲述了jQuery+css实现的tab切换标签。分享给大家供大家参考，具体如下： 运行效果截图如下：具体代码如下：tab切换(function ($) {function set_active(tab, isActive, mode) {if (!tab) return;if (!isActive) {tab.removeClass('active');if (mode == "header") {var related_body = $(tab.find('a').attr('tab_body'));set_active(related_body, false, "body");}} else {tab.addClass('active');if (mode == "header")...
一个菜单按钮特效案例，简单的实现了动态效果。 废话不多说了，直接给大家贴代码了，代码写好不好，还请给位大侠多多指教。.bar{ width:px; height:px; border:px solid #ccc; border-radius:%; position:fixed; top:px; right:px; z-index:; cursor:pointer; } .menu{ width:px; height:px; background-color:#ccc; position:absolute; transform:translated(-%,-%,); left:%; transition:all .s cubic-bezier(., ., ., .) s } #m...
本文实例介绍了javascript结合HTML CSS实现橙色导航菜单，分享给大家供大家参考，具体内容如下 效果图：超漂亮的HTML导航菜单CSS代码#top {display: block;text-align: left;height: 105px;position: relative;z-index: 0;}.m {margin: 0 auto;width: 970px;}body {font-size: 12px;}a {color: #333;text-decoration: none;}a:link {text-decoration: none;}/* Download by http://hovertree.com*/a.blue:link, a.blue:visited {co...
本文实例讲述了JavaScript+CSS实现的可折叠二级菜单。分享给大家供大家参考，具体如下： .aspx文件：无标题页*{margin: 0px;padding: 0px;border:0px; } #nav{width: 200px;margin: 0px;padding: 0px;font-size: 14px;line-height: 30px; } #nav li{width: 180px;padding-left: 20px;padding-bottom: 1px;list-style-image: none;list-style-type: none;background-color: #FFFFFF;float: left; } #nav a{padding-left: 20px;backg...