移动手机设备上有一个屏幕解锁的应用相信大家都不陌生，在移动设备上，用户可以通过设置锁定图案作为密码对设备用户界面进行锁定，锁定界面如下图所示。 效果图如下所示JavaScript Code <script> $("#gesturepwd").GesturePasswd({ backgroundColor:"#2980B9", //背景色 color:"#FFFFFF", //主要的控件颜色 roundRadii:50, //大圆点的半径 pointRadii:12, //大圆点被选中时显示的圆心的半径 space:60, //大圆点之间的间隙 ...
本文实例讲述了jquery仅用6行代码实现滑动门效果。分享给大家供大家参考。具体如下： 这是一个基于jQuery的滑动门导航栏，仅6行代码，不知还有没有比此更少的代码了，在滑动门的实现过程中，用背景图片修饰了每个“门”的背景，更美观漂亮，有着极好的用户操作体验。 运行效果如下图所示：在线演示地址如下： http://demo.jb51.net/js/2015/jquery-simple-nav-menu-style-codes/ 具体代码如下： <!DOCTYPE html PUBLIC "-//W3C//DT...
下文以span元素为例子，介绍一下如何实现span元素在div中实现水平垂直居中效果，代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>脚本之家</title> <style type="text/css"> #box{width:200px;height:150px;background:blue;position:relative; } #antzone{background:green; } </style> <script type="text/javascript"> window.onload=funct...
一款适用于方案和图片的JS无缝滚动代码，可控制向左或向右滚动，代码不算复杂，而且本无缝滚动代码兼容性也挺好，你几乎不需要修改什么代码，就能使用了。测试时候把那些带标号的方块都改成图片吧，这样就更有感觉了。 代码如下： <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无缝滚动</title> <style> * { margin: 0; padding: 0; } .other { width: 100%; height: 50px; background: ...
文章写的不好，还请各位高手指教，不废话了，先上张效果图吧看下：在线演示 下载源码 首先是初始化部分：将除了第一张轮播图片意外的图片都隐藏，并且隐藏向前、向后按钮，使第一个索引按钮处于激活状态。 事件部分：通过jquery的hover()绑定鼠标上悬以及离开时的事件处理， jquery的bind()方法绑定鼠标点击事件处理向前、向后翻动、轮播控制：pre(), next(), play(), start()开始自动轮播，stop()停止自动轮播。 下篇是一...
分享一款基于jQuery发展历程时间轴特效代码，带左右箭头，数字时间轴选项卡切换特效下载。有效果图有实现代码给大家展示如下：html代码： <div id="timeline"><ul id="issues"><li id="1900"><img src="images/img4.jpg" width="436" height="300" /></li><li id="1944"><img src="images/img4.jpg" width="436" height="300" /></li><li id="1950"><img src="images/img4.jpg" width="436" height="300" /></li><li id="1971"><im...
下文通过简单的代码实现此功能，并通过效果图展示给大家。 一、具体实现代码代码如下: <div class="bdsharebuttonbox"> <a href="#" class="bds_more" data-cmd="more"></a> <a title="分享到QQ空间" href="#" class="bds_qzone" data-cmd="qzone"></a> <a title="分享到新浪微博" href="#" class="bds_tsina" data-cmd="tsina"></a> <a title="分享到腾讯微博" href="#" class="bds_tqq" data-cmd="tqq"></a> <a title="分享到人人...
下面一段代码就是用js实现的随机颜色的小方块，不多说了代码很简单，直接上代码了。 /**/js注释已删<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF- "><meta charset="utf- "><title>koringz</title><link rel="stylesheet" href="css/demo.css"></head><body><div class="container"><div class="main"><div class="colorful"></div></div></div></body></html>* {-webkit-box-siz...
为了便于大家理解我使用了jQuery.当然用源生js代码执行的效率会高一些，但是很多人多源生js不是很熟练 代码： <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jquery随机图片瀑布流无限加载</title> <style type="text/css"> *{margin:0;padding:0;list-style-type:none;} a,img{border:0;} body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";} /* container */ #container{width:940px;margin:50px auto;...
Javascript能做的事情越发的多了起来，随之而来的问题即是Js代码量的增加，面对代码的加多，我选择了仿面向对像类实例化里的构造函数自动启动的方式，把所有的js代码，以注册的形式，类化了起来。 代码 /*** @version $Id$* @author xjiujiu <xjiujiu@foxmail.com>* @description HHJsLib Framework Apps* @copyright Copyright (c) 2011-2012 http://www.xjiujiu.com.All right reserved*/HHJsLib.register({init: function() {th...
这是我之前网上看到的,很牛逼的一位大神写的,一直膜拜中 <!doctype html><html><head></head><body> <div id="box" style="width:252px;font:25px/25px 宋体;background:#000;color:#9f9;border:#999 20px ridge;text-shadow:2px 3px 1px #0f0;"></div> <script> var map=eval("["+Array(23).join("0x801,")+"0xfff]"); var tatris=[[0x6600],[0x2222,0xf00],[0xc600,0x2640],[0x6c00,0x4620],[0x4460,0x2e0,0x6220,0x740],[0x2260...
今天突然心血来潮，想到一个很简单的方法即可达到的tab效果 其实逻辑很简单，但看到网上基本上没这样写的 不知道实际应用中是否会有问题呢，请大侠指教代码如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery简易选项卡</title> <style> *{ margin:0; padding:0;} body, ul, li { margin:0; padding:0; } body { font:12px/1.5 Tahoma; } #outer { width:450px; ...
按一个普通程序员8000的月收入算就是1800的社保金,而且要延迟到65岁退休,我过完年就是30岁,这笔账和余额宝比对一下,我顿时明白了代码如下: fuckShebao: function (req, res, next) { //每个月1800的社保 var day = (1800 / 30); //交15年交满 var full_days = 365 * 15; //到65岁退休 var old_days= 365*35; var i = 0; var p = 0; var total = 0; ...
本文实例讲述了不到30行JS代码实现Excel表格的方法，可见jQuery并非不可替代。分享给大家供大家参考。具体分析如下： 某国外程序员展示了一个由原生JS写成不依赖第三方库的，Excel表格应用，有以下特性： ① 由不足30行的原生JavaScript代码实现 ② 不依赖第三方库 ③ Excel风格的语义分析 (公式以 "=" 开头) ④ 支持任意表达式 (=A1+B2*C3) ⑤ 防止循环引用 ⑥ 基于localStorage的自动本地持久化存储 效果展示如下图所示：代码分析...
<!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" /> <title>中国绿色厨房计划</title> <style> @media print{.noprint{display:none} } </style> <script language=javascript> function printsetup(){// 打印页面设置w...