我们在浏览一些网站，尤其是一些小说网站的时候，都会有修改页面背景颜色的地方，这个功能使用jquery很容易实现。 效果图： show you code: 代码如下: jquery test white red green yellow $("button").click( function() { var color = this.value; $("body").css("background-color",color); } ) 我们先根据元素名选择我们要操作的对象：button，然后使用click方法找到被点击的按钮，然后在触发的事件中获取该按钮...
今天为大家带来的是jquery和css3实现的不错的导航菜单。点击列表图表后，内容页面向内移动显示菜单项。当单击关闭菜单按钮时，菜单项隐藏，内容页恢复原位。看下图源码下载 我们看下实现代码： html代码：WIFEO/CODEPost hoc impie perpetratum quod in aliis quoque iam timebatur, tamquam licentia crudelitati indulta per suspicionum nebulas aestimati quidam noxii damnabantur. quorum pars necati, alii puniti bonorum ...
现在Web应用中有大量的JavaScript代码,而我们也一直在追寻各种使他们更快的解决方案。 1.我们通过 事件代理(event delegation) 让事件监听更高效, 2.我们利用 函数降频技术(function debouncing) 来限制一段时间内给定方法被调用的次数,请参考:如何防止事件函数的高频触发(中文翻译) 3.我们使用 JavaScript加载器 来加载我们确实需要的那部分资源,等等。 还有一种方式,可以让我们的页面更加的快速和高效.那就是直接通过JS动态地添加...
z-index 必须大于遮罩元素demo无标题文档 ul, ul ul { list-style-type:none; margin: 0; padding: 0; width: 15em; } ul a { display: block; text-decoration: none; } ul li { margin-top: 1px; } ul li a { background: #333; color: #fff; padding: 0.5em; } ul li a:hover { background: #000; } ul li ul li a { background: #ccc; color: #000; padding-left: 20px; } ul li ul li a:hover,ul li ul ...
CSS伪元素非常强大，它经常被用来创建CSS三角形提示，使用CSS伪元素可以实现一些简单的效果但又不需要增加额外的HTML标签。有一点就是Javascript无法获取到这些CSS属性值，但现在有一种方法可以获取到： 看看下面的CSS代码：.element:before {content: NEW;color: rgb(255, 0, 0); }.element:before {content: NEW;color: rgb(255, 0, 0); }为了获取到.element:before的颜色属性，你可以使用下面的代码：var color = window.getCom...
效果图：css：/* 带复选框的下拉框 */ ul li{ list-style: none; padding:0px; margin: 0px; } .select_checkBox{ border:0px solid red; position: relative; display:inline-block; } .chartQuota{ height:23px; float:left; display:inline-block; border:0px solid black; position: relative; } .chartOptionsFlowTrend{ z-index:300; background-color:white; border:1px solid gray; display:none; pos...
在页面点击"注册"，出现一层有不透明度的黑色遮罩；遮罩层的上方是注册框；此时无法点击页面上除注册框外的其他元素；点击注册框上的"随便逛逛"，遮罩层消失。 预览地址： http://jsfiddle.net/p2x3c7df/embedded/result/ 要点： 1.注册框始终水平、垂直居中，包括鼠标滚轮上下滚动页面、缩放页面和调整浏览器窗口大小时 主要由CSS控制，注册框的宽度和高度都已经确定( 620*420px )，首先使用position:fixed来使它相对于浏览器窗口...
用过Arcgis的筒子们对于Arcmap里面的一个卷帘效果肯定记忆很深刻，想把它搬到自己的WebGIS系统中去，抱着同样的想法，我也对这种比较炫的卷帘效果做了一下研究，吼吼，出来了，给大家汇报一下成果 看到这样的效果，你是不是小鸡动了一下，嘿嘿，别急，听我慢慢道来。 首先，容器。分别用两个DIV来显示两个不同时期的影像。接下来设置两个容器的样式，代码：#after{ position: absolute; top: 0px; left: 0px; background-image...
本文实例讲述了js与css实现弹出层覆盖整个页面的方法。分享给大家供大家参考。具体实现方法如下： 弹出层透明背景加框的常用样式和结构如下:代码如下:.alertMessageBg{ position:fixed; _position:absolute; width:100%; height:100%; left:0; top:0; background:#000; opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50); z-index:97; display:none; } .alertMessageDivBorder{ position:fixed; _position:absolute; width...
Animated Opening Type（教程） 漂亮的文字翻开效果，很有意思。查看演示 Direction-Aware Hover Effect With Css3 And Jquery（教程） 鼠标跟随悬停效果教程，话说以前看到这个很流行呢。查看演示 Css3 Hover Effects With Websymbols Tutorial（教程）查看演示 Magnifying Glass For Image Zoom Using Jquery And CSS3 通过Jquery 和 CSS3.实现放大镜效果。查看演示 Social Media Icons With CSS3 Hover Effects 通过CSS3实现3D旋...
这周不小心看到了百度百科的页面导航效果，感觉挺不错的，周末抽空写了下。 下图为导航部分的效果图：css和图片都是抄百度的，可从百度百科下载。 具体的代码如下：代码如下:* {margin: 0;padding: 0}.wrap {width: 1000px;overflow: hidden;margin: 0 auto;}.content {width: 780px;float: left;}.slide {width: 200px;float: right;}1part1content1,content12part2content2,content22-1part2-1content2-1,content2-12-2part2-2co...
本文实例讲述了js+CSS实现弹出一个全屏灰黑色透明遮罩效果的方法。分享给大家供大家参考。具体分析如下： 在众多的网站都有这样的效果，当进行一定的操作之后，会弹出一个灰黑色的半透明的遮罩，在上面可以操作指定的内容，例如可以弹出一个登陆框之类的内容，下面就介绍一下如何实现此种效果，代码实例如下:代码如下: CSS如何实现弹出一个全屏灰黑色透明遮罩效果-脚本之家 * { margin:0px; padding:0px; } .zhezhao { widt...
一、添加打印样式 1. 为屏幕显示和打印分别准备一个css文件，如下所示：用于屏幕显示的css： 用于打印的css： 2. import方式：@import url("css/printstylesheet.css") print; 3. 直接把屏幕显示样式和打印样式写在一个css文件中：@media print {}{h1 {color: black;}h2 {}{color: gray;}}@media print里面的内容只对打印出来的内容有效，之外的内容就是屏幕显示的样式。 其他： 创建一个不指定媒体类型的样式表通常很有用（或者利...
本文实例讲述了js+css实现tab菜单切换效果的方法。分享给大家供大家参考。具体实现方法如下： index.css如下：代码如下:* { margin: 0px; padding: 0px; } body { width: 600px; margin: 0 auto; background-color: silver; } #contanier { background-color: yellow; width: 600px;height: 400px; } #tabNavi { width: 600px;height: 30px; background-color: #00bfff; text-decoration: none; list-style...
代码如下: function addStyle(stylePath) {var container = document.getElementsByTagName("head")[0];var addStyle = document.createElement("link");addStyle.rel = "stylesheet";addStyle.type = "text/css";addStyle.media = "screen";addStyle.href = stylePath;container.appendChild(addStyle);}addStyle('http://www.xxx.com/wintys/dynamic.css');JS写的函数，用来控制JS文件的动态加载，也就是在需要的时候才加载JS文件...