很有意思。小邪就跟着做了一个Demo，木有用插件，只挂了jQuery。 Demo 演示页面 一. CSS+jQuery实现随滚动条增减汽水瓶中的液体： 话说喝汽水的那个网站是用一个瓶子的图片，分为瓶口、瓶身、吸管还有瓶底。在这些图片中瓶子内部都是透明的，所以我们可以在底下一层按 x 轴平铺液体的图片，当然记得弄好吸管，吸管则是按照 y 轴平铺。其他具体的请看代码中注释。 啊，对了，那家公司的地址在这里 - http://janploch.de/ 代...
一个项目想用jQuery做一个可以半折叠的DIV元素，苦于jQueryUI中accordion没有提供相关的方法，就自己写了个。以前使用jQueryUI的时候发现能够用的accordion全部折叠起来了，没办法设置折叠的最小高度。 代码质量很低，希望老鸟能够指点指点。 下图是效果展示，能够借由jQuery的函数展开收缩 代码如下: //author: hlhr //require: Jquery1.4 and above function animate_toggle_height(maxh,minh,maxo,mino,element,speed) {//这个...
源码下载bxCarousel参数说明： move：每次滚动移动图片的数量，默认为4。 display_num：展示图片的数量，默认为4。 speed：图片滚动速度，默认为500毫秒。 margin：图片间的间距，默认为0。 auto：是否自动滚动，默认为false。 auto_interval：当设为自动滚动时，每次滚动的时间间隔（毫秒），默认为2000毫秒即2秒。 auto_dir：自动滚动的方向，默认为next，你可以试下prev。 next_image：向右滚方向按钮图片，可以用CSS设置。 pre...
功能很实用，代码非常的简单 效果1. 效果2. 样式代码如下： 代码如下: body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,br,pre,form,fieldset,input,textarea,p,blockquote,th,td{ margin:0; padding:0 } span{ color:#FF2B13 } a{ text-decoration:none; color:#515050 } a:hover{ text-decoration:underline; color:red } .box_all{ overflow:hidden; width:350px; font-family:"微软雅黑"; font-size:14px; border:1px solid #E...
代码如下: 背景透明 *{ margin:0; padding:0; } body{ position:relative; width:100%; height:100%; } .aaa{ background-color:#fff; border:10px solid gray; border-radius:4px 4px 4px 4px; display:none; width:300px; position:absolute; top:30%; left:30%; z-index:11; } .show{ display:none; width:100%; height:100%; position:absolute; z-index:10; left:0; top:0; background:#000000; opacity:0.3; filter:alp...
在页面点击"注册"，出现一层有不透明度的黑色遮罩；遮罩层的上方是注册框；此时无法点击页面上除注册框外的其他元素；点击注册框上的"随便逛逛"，遮罩层消失。 预览地址： http://jsfiddle.net/p2x3c7df/embedded/result/ 要点： 1.注册框始终水平、垂直居中，包括鼠标滚轮上下滚动页面、缩放页面和调整浏览器窗口大小时 主要由CSS控制，注册框的宽度和高度都已经确定( 620*420px )，首先使用position:fixed来使它相对于浏览器窗口...
这周不小心看到了百度百科的页面导航效果，感觉挺不错的，周末抽空写了下。 下图为导航部分的效果图：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...
一、添加打印样式 1. 为屏幕显示和打印分别准备一个css文件，如下所示：用于屏幕显示的css： 用于打印的css： 2. import方式：@import url("css/printstylesheet.css") print; 3. 直接把屏幕显示样式和打印样式写在一个css文件中：@media print {}{h1 {color: black;}h2 {}{color: gray;}}@media print里面的内容只对打印出来的内容有效，之外的内容就是屏幕显示的样式。 其他： 创建一个不指定媒体类型的样式表通常很有用（或者利...
本文实例讲述了JQuery+CSS实现图片上放置按钮的方法。分享给大家供大家参考。具体分析如下： position:relative日常应用的时候一般是设置给position:absolute;的父层的, 父层position:relative; 子层position:absolute;的话, 就是依照父层的边界进行定位的, 不然position:absolute 会逐层向上寻找设置了position:relative的元素边界, 直到body元素.. 第一种写法（连同CSS一起追加进去）var freeOne=""; freeOne=$(".freePreviewO...
本文实例讲述了jquery+css实现的红色线条横向二级菜单效果。分享给大家供大家参考。具体如下： 这是一款带导航的菜单，当前是哪一项菜单，会很个性的显示出来，鼠标放上后会显示菜单缺口，挺有意思的吧，希望大家喜欢。 运行效果截图如下：在线演示地址如下： http://demo.jb51.net/js/2015/jquery-css-red-color-2row-nav-style-codes/ 具体代码如下：css+js红色线条横向二级菜单body {font-family:\5B8B\4F53,Arial Narrow,arial...
首先给大家展示下效果图：查看效果 源码下载 html代码部分： 代码如下：jquery+css实现横向二级下拉菜单Chocolate Bar browsersfirefoxchromeoperaIENetscapehtmlhtmlxhtmlhtml5cssTCP/IP xmlXSLXSLTXSL-FOXPathXQueryXLinkXPointerDTDSchemaXFormsbrowsersscriptingJavaScriptDHTMLVBScriptAJAXjQueryE4XWMLScriptserverscriptingSQLASPADOPHPdotnet multimediaMediaSMILSVG以上代码很简单，jquery+css实现绚丽的横向二级下拉菜单...
本文实例讲述了jquery+CSS实现的多级竖向展开树形TRee菜单效果。分享给大家供大家参考。具体如下： 这里演示垂直的树形菜单，应用CSS和jquery技术来实现，显示在网页左侧比较合适，考虑到简洁，没有使用图片之类的作修饰。本效果兼容IE、火狐等主流浏览器。 运行效果截图如下：在线演示地址如下： http://demo.jb51.net/js/2015/jquery-css-nlevel-vshow-tree-codes/ 具体代码如下：jQuery多级层叠树形菜单效果.topnav {width: 213...
本文实例讲述了jQuery+CSS实现的网页二级下滑菜单效果。分享给大家供大家参考。具体如下： 这是一款简洁型的 jQuery+CSS网页二级下滑菜单，练手写的，有需要的自己拿去美化吧，基本的动画效果和菜单下滑效果和渐变效果已经做出来了，在IE下表现不错，在火狐下发现菜单有闪烁现象，有空会继续修正，感谢大家捧场哦。 运行效果截图如下：在线演示地址如下： http://demo.jb51.net/js/2015/jquery-css-web-2level-menu-style-codes/ 具...
这篇文章主要介绍了jquery+CSS实现的水平布局多级网页菜单效果，涉及jquery页面元素属性动态变换效果实现技巧，非常具有实用价值，需要的朋友可以参考下，具体如下：这里演示的Jquery和CSS共同实现的网页常见的导航菜单，支持两级形式，蓝色风格，最多支持二级，三级可能要对代码进行改造了。本菜单属于中规中矩型，实用性比较强，适合的网站种类也是很多的，希望大家会喜欢。运行效果截图如下：在线演示地址如下：http://demo.jb5...
本文实例讲述了jQuery+css实现的蓝色水平二级导航菜单效果。分享给大家供大家参考。具体如下：这是一款蓝色经典的jQuery+CSS实现水平二级导航菜单，相信你会喜欢的，蓝色，超级经典的一种风格，从其它网站上扣下来的，我认为很不错，赶紧分享给大家吧。运行效果截图如下：在线演示地址如下：http://demo.jb51.net/js/2015/js-css-blue-line-2level-nav-menu-codes/具体代码如下：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tra...