话不多说，跟这小编来一起看下吧 1、CSS <style type="text/css">#scroll_head {position: absolute;display: none;} </style>2、Javascript <script type="text/javascript">//该函数在上面一个table数据加载完成后调用//把表头的宽度设置到会滚动的页头去var copyWidth = function () {var b = $(#data_tbody).prev().find(tr:last).find(th);var c = $(#scroll_head).find(tr:last).find(th);for (var i = 0; i < b.length; i++...
废话不多说了，直接给大家贴代码了，具体代码如下所示： <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>jquery实现进度条</title> <style type="text/css"> body{padding:30px;margin-left:450px;margin-top:200px;width:350px;border: 1px solid #98AFB7; } .progressBar{width:280px;height:20px;border: 1px solid #98AFB...
这个游戏主要分为三部份，HTML5+CSS+JAVASCRIPT来完成的。在这里详细讲一下js的代码。因为这个游戏的主要部分其实就是js。 大多数都是靠js来完成的。完成后的效果如下： HTML代码：<body> <div class="wrap"> <div class="play_wrap"> <div id="play_area"></div> <div class="play_menu"> <p>下一个：</p> <div id="play_nextType"></div> <a id="play_btn_start" class="play_btn" href="javascript:void(0);" unselectable="on"...
本文实例为大家分享了js复选框全选与反选实现代码，供大家参考，具体内容如下 <html><head><title>html+css+js实现复选框全选与反选</title><meta http-equiv="content-type" content="text/html;charset=utf-8" /><meta name="keywords" content="js,笔试题目" /><style type="text/css">table,tr,td{border:1px solid red;}</style><script type="text/javascript">function quanxuan(){for(var i=1;i<=3;i++){var cbox_id="cb"+...
jQuery时间轴插件效果图预览 （图一） （图二）附注说明： 图一是浏览器宽度像素大于560px下的展示效果，图二是在浏览器宽度像素小于560px下的展现效果。使用的是CSS3的Media Query（媒体查询）实现的效果。 另外页面中圆形、圆角和三角同样使用了CSS3的特殊样式。这些基础的样式和效果在本文中不会赘述，不了解的童鞋可以上网搜索学习一下，很简单。 页面上每个时间节点的展示内容提供了三种展示样式，多张图片的展示风格、...
先给大家展示下效果图，如果大家感觉还不错，请参考实现代码哦！HTML： <div class="container iden_top"> <ul> <li> <p class=iden_add_name>应用标识1</p> <span class="iden_top_button"></span> <div class="iden_top_dete"></div> </li> </ul> <span class="iden_add">+</span> </div><div class="data_z_create_box"> <div class="create_z_create_box_top"> <span class="data_z_create_box_top_title"></span> <div class=...
web页面中很多地方都会用到日历显示，选择等，本文用html、css、javascript实现简单的日历。完成以后的效果与页面左侧的效果差不多，可以切换上个月、下个月。也可以根据实际情况进行扩展。 html html部分比较简单，声明一个div，具体的html用javascript生成。整体内容大概是这样的： <!doctype html> <html> <head><meta charset=utf-8><link rel=stylesheet href=外部的css文件路径 /> <title>demo</title> </head> <body><di...
js仿百度切换皮肤效果：(换肤出来一个div，选择你想要的图片，作为网页背景，保存) 要点：cookie保存状态 html代码:<body><div id="header"><div id="header_con"><div class="dbg"><a href="javascript:;" onclick="showImgBox()">换肤</a></div></div></div><div id="dimgBox"><div id="dimgtitle"><div id="imgtitle_con"><div id="title1"><a href="javascript:;">热门</a></div><div id="title2"><a href="javascript:;" oncl...
弹出层用来向用户展示详细的信息，交互性非常强。弹出层有对话框、模态窗口等形式，这里我都把他们叫做弹出层，我的同事们也是这么叫的。一般我们喜欢使用比较成熟的弹出层插件如fancybox等，但在本文，我将先抛弃插件，给大家介绍如何使用jQuery+CSS3+Html5实现弹出层。效果展示 源码下载 我们完全使用HTML5+CSS3+jQuery来实现一个基本的弹出层效果，因此我们可以在示例中任意修改弹出层外观样式、甚至js方法调用。我们最终...
本文分享了纯js+html制作手风琴和纯css+html制作手风琴两种效果，供大家参考，具体内容如下 一、纯css+html的手风琴效果 这种用css写的手风琴比较简单，主要是应用到css中的，transition属性。 代码如下： <!DOCTYPE HTML> <html> <head> <style> body{background: url(bg.gif) repeat;} ul,li,p{margin: 0px;padding: 0px;list-style: none;}#div{width: 1180px;height: 405px;border:5px solid #ccc;padding: 0px;margin: 0px au...
在BS中，xml，html，css和js我们都学过，起初分不清这四者的区别和联系，随着知识的增长，有了一些体会。 首次，我们看一下这四项技术都是什么，能干什么？ （一）XML—Extensible Markup Language 可扩展标记语言（标准通用标记语言的子集）是一种简单的数据存储语言，使用一系列简单的标记描述数据，而这些标记可以用方便的方式建立，虽然可扩展标记语言占用的空间比二进制数据要占用更多的空间，但可扩展标记语言极其简单易于掌...
本文实例介绍了javascript结合HTML CSS实现橙色导航菜单，分享给大家供大家参考，具体内容如下 效果图：<html > <head><title>超漂亮的HTML导航菜单CSS代码</title><style>#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....
之前发布了一款简易的计算器，今天做了一下修改，添加了键盘监听事件，不用再用鼠标点点点啦 JS代码： var yunSuan = 0;// 运算符号，0-无运算;1-加法;2-减法;3-乘法;4-除法 var change = 0;// 属于运算符后需要清空上一数值 var num1 = 0;// 运算第一个数据 var num2 = 0;// 运算第二个数据 var cunChuValue = 0;// 存储的数值 $(function() { $(".number").click(function() {// 点击数字触发事件 var num = $(this).attr(name);...
本文实例讲述了jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码。分享给大家供大家参考。具体如下： 这里实现圆角表单，圆角输入框，无刷新验证，漂亮唯美，是对这款基于HTML5/CSS3/jQuery来实现的表单效果的简要概括，用HTML5可以实现很多超乎寻常的效果，从此你会喜欢上HTML5,会骂一下万恶的IE,到现在IE8还不支持HTML5，正悲哀着呢。 先来看看运行效果截图：在线演示地址如下： http://demo.jb51.net/js/2015/jquery-htm...
看下面的效果图很不错吧，是怎么实现的呢？下面小编给大家分享下我的一番宝物，Lisa唱的 在angel beats的插曲。用到html5、css、jquery实现此音乐播放器。 一番宝物，Lisa唱的 在angel beats的插曲最后在简述这个东西怎么写之前，本人男，24岁，籍贯上海，诚招女友一枚，要求：性格温顺。。。（省略500字） <div class="Music"><div class="MusicPlaySound"> <img class="MusicPlayBg" src="image/music/zsy.png" /> <img class=...