本文实例讲述了jQuery+css实现的动态块漂移效果.分享给大家供大家参考，具体如下： 运行效果截图如下：具体代码如下： <!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><title></title><script src="jquery-1.7.1.min.js" type="text/javascript"></script><script type="text/javascript" >func...
本文实例讲述了jQuery+css实现的换页标签栏效果。分享给大家供大家参考，具体如下： 运行效果截图如下：具体代码如下： <!DOCTYPE html> <html><head><title>index</title><script type="text/javascript" src="jquery.js"></script><style type="text/css" >body {margin:0; padding:0; font-size:12px; color:gray;}.container {height:200px; background:#F2F2F2; border-radius:6px;-webkit-border-radius:6px; -moz-border-ra...
本文实例讲述了jQuery+css实现的切换图片功能代码。分享给大家供大家参考，具体如下： 运行效果截图如下：具体代码如下： <!DOCTYPE html> <html> <head><title>demo</title><script type="text/javascript" src="jquery.js"></script><style type="text/css" >body {margin:0; padding:0;}.container {border:6px solid gray; background:black;width:600px; height:400px; position:relative;left:50%; margin-left:-300px; bord...
本文实例讲述了jQuery实现平滑滚动的标签分栏切换效果。分享给大家供大家参考。具体如下： 运行代码如下具体代码如下 <html><head><title>jQuery平滑滚动的标签分栏切换</title><meta charset="gb2312"><style>ul,li{margin:0px;padding:0px;list-style:none}li{float:left;background-color:#8c6239;color:white;padding:5px;margin-right:2px;border:1px solid white;}li.myLi{background-color:#ea5500;border:1px solid #ea550...
本文实例讲述了jquery+css实现动感的图片切换效果代码。分享给大家供大家参考。具体如下： 运行效果截图如下：具体代码如下： 基本思路：定义一个数组存放需要展示的图片，接着当单击图片时删除zoomIn类，添加fadeOutRight类，实现实图右移并消失，记数器加1（用于调用下一张图片），当图片删除500毫秒后判断图片是不是最后一张，如果是，就把记数器调为0，从第一张图片开始，删除图片代码，接着创建一张新的图片代码，并把src设为...
本文实例讲述了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....
本文实例讲述了jQuery+CSS实现的网页二级下滑菜单效果。分享给大家供大家参考。具体如下： 这是一款简洁型的 jQuery+CSS网页二级下滑菜单，练手写的，有需要的自己拿去美化吧，基本的动画效果和菜单下滑效果和渐变效果已经做出来了，在IE下表现不错，在火狐下发现菜单有闪烁现象，有空会继续修正，感谢大家捧场哦。 运行效果截图如下：在线演示地址如下： http://demo.jb51.net/js/2015/jquery-css-web-2level-menu-style-codes/ 具...
本文实例讲述了jquery+CSS实现的多级竖向展开树形TRee菜单效果。分享给大家供大家参考。具体如下： 这里演示垂直的树形菜单，应用CSS和jquery技术来实现，显示在网页左侧比较合适，考虑到简洁，没有使用图片之类的作修饰。本效果兼容IE、火狐等主流浏览器。 运行效果截图如下：在线演示地址如下： http://demo.jb51.net/js/2015/jquery-css-nlevel-vshow-tree-codes/ 具体代码如下： <!DOCTYPE html> <head> <meta http-equiv="Con...
本文实例讲述了jquery+css实现的红色线条横向二级菜单效果。分享给大家供大家参考。具体如下： 这是一款带导航的菜单，当前是哪一项菜单，会很个性的显示出来，鼠标放上后会显示菜单缺口，挺有意思的吧，希望大家喜欢。 运行效果截图如下：在线演示地址如下： http://demo.jb51.net/js/2015/jquery-css-red-color-2row-nav-style-codes/ 具体代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w...
首先给大家展示下效果图：查看效果 源码下载 html代码部分： 代码如下： <!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" /> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> <link href="css/lanrenzhiji...
本文实例讲述了JQuery+CSS实现图片上放置按钮的方法。分享给大家供大家参考。具体分析如下： position:relative日常应用的时候一般是设置给position:absolute;的父层的, 父层position:relative; 子层position:absolute;的话, 就是依照父层的边界进行定位的, 不然position:absolute 会逐层向上寻找设置了position:relative的元素边界, 直到body元素.. 第一种写法（连同CSS一起追加进去） var freeOne=""; freeOne=$(".freePreview...
一、添加打印样式 1. 为屏幕显示和打印分别准备一个css文件，如下所示： 用于屏幕显示的css： <link rel="stylesheet" href="css/mainstylesheet.css" media="screen" /> 用于打印的css：<link rel="stylesheet" href="css/printstylesheet.css" media="print" /> 2. import方式： <style type="text/css"> @import url("css/printstylesheet.css") print; </style> 3. 直接把屏幕显示样式和打印样式写在一个css文件...
这周不小心看到了百度百科的页面导航效果，感觉挺不错的，周末抽空写了下。 下图为导航部分的效果图：css和图片都是抄百度的，可从百度百科下载。 具体的代码如下：代码如下: <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <link rel="stylesheet" href="baidu.css"> <style> * { margin: 0; padding: 0 } .wrap { width: ...
在页面点击"注册"，出现一层有不透明度的黑色遮罩；遮罩层的上方是注册框；此时无法点击页面上除注册框外的其他元素；点击注册框上的"随便逛逛"，遮罩层消失。 预览地址： http://jsfiddle.net/p2x3c7df/embedded/result/ 要点： 1.注册框始终水平、垂直居中，包括鼠标滚轮上下滚动页面、缩放页面和调整浏览器窗口大小时 主要由CSS控制，注册框的宽度和高度都已经确定( 620*420px )，首先使用position:fixed来使它相对于浏览器窗口...
代码如下:<html> <head> <meta charset="utf-8" /> <script type="text/javascript" src="jquery-1.8.2.js"></script> <title>背景透明</title> <style> *{ 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:n...