基于jQuery实现自动轮播旋转木马特效

2017年02月06日 11 阅读

本文实例讲述了jQuery实现自动轮播旋转木马特效。分享给大家供大家参考。具体如下：这是一款基于jQuery实现自动轮播旋转木马特效代码，实现过程很简单。运行效果图：-------------------查看效果 下载源码-------------------简要教程jquery.caroursel.js是一款非常实用的可自动轮播的jQuery旋转木马插件。该旋转木马将图片进行堆叠，轮流的将图片推送到最前面来展示，形成旋转木马的效果。使用方法该jQuery...

JS实现点击按钮获取页面高度的方法

2017年02月06日 13 阅读

本文实例讲述了JS实现点击按钮获取页面高度的方法。分享给大家供大家参考，具体如下：这是一个JavaScript特效代码，点击获取网页高度，在ie6下实现position-fixed的效果，另外针对遮罩的问题（大概是做lightBox吧），个人觉得纯css法（不包括其显示/隐藏）将更适合。运行效果截图如下：在线演示地址如下：http://demo.jb51.net/js/2015/js-click-btn-web-height-codes/具体代码如下：&l...

纯javascript移动优先的幻灯片效果

2017年02月06日 12 阅读

简要教程wallop是一款移动优先的纯javascript幻灯片插件。这个幻灯片插件仅4k大小，它的原理仅是为HTML元素添加和移除适当的class来显示和隐藏它们，至于这些class样式你可以完全自定义。特点有：移动优先动画和过渡效果都使用CSS来生成轻量级，仅4k大小高度灵活性和可扩展性可自定义事件和API没有任何外部依赖使用方法使用该幻灯片插件首先需要引入wallop.css和Wallop.min.js文件。<link rel="stylesh...

jquery 表单验证之通过 class验证表单不为空

2017年02月06日 11 阅读

在开发系统时，往往都有某些表单数据为必填项，若用jQuery通过ID去验证，不仅会影响效率，还会有所遗漏，不易于后期维护。本章将介绍如何利用jQuery，通过为表单配置class进行统一验证。（ID一个页面只可以使用一次；class可以多次引用）1：为input添加class，名字可以随意设置，但每个input需要保持一致，本章案例calss设置为noNull。（若input已有class属性，可直接加到其后）2：为input添加一个属性，用来后期通过jq...

jQuery+CSS3折叠卡片式下拉列表框实现效果

2017年02月06日 12 阅读

jQuery下拉列表框特效将每一个列表项都制作为卡片的样式，打开和关闭它有打开和关闭百叶窗的感觉，效果非常不错，分享给大家。简要教程HTML结构该下拉列表框特效的列表项使用一个无序列表来制作，用于切换打开和关闭状态的元素是一个超链接元素。<div class="container"> <div class="card-drop"><a class="toggle" href="#"> <i class="fa fa...

非常实用的12个jquery代码片段

2017年02月06日 11 阅读

jQuery里提供了许多创建交互式网站的方法，在开发Web项目时，开发人员应该好好利用jQuery代码，它们不仅能给网站带来各种动画、特效，还会提高网站的用户体验。本文收集了12段非常实用的jQuery代码片段，你可以直接复制黏贴到代码里，但请开发者注意了，要理解代码再使用哦。下面就让我们一起来享受jQuery代码的魅力之处吧。1. 导航菜单背景切换效果在项目的前端页面里，相对于其它的导航菜单，激活的导航菜单需要设置不同的背景。这种效果实现的方式有很多种，...

js实现文件上传表单域美化特效

2017年02月06日 12 阅读

一款效果非常时尚的文件上传表单域美化特效，下面给出制作的简要教程。先上几个效果饱饱眼福：使用方法这些文件上传域的美化使用的方法都是隐藏原生的<input type="file">元素，然后使用一个<label>元素来制作美化效果。HTML结构该文件上传域美化效果最基本的HTML结构如下：<input type="file" name="file" id="file" class="inputfile" /><lab...

18个非常棒的jQuery代码片段

2017年02月06日 11 阅读

1、jQuery实现的内链接平滑滚动不需要使用太复杂的插件，只要使用下载这段代码即可实现基于内部链接的平滑滚动$（"a[href^="#"]"）.bind（"click.smoothscroll",function （e） {e.preventDefault（）; var anchor = this.hash,$target = $（target）; $（"html, body"）.stop（）.animate（{"scrollTop": $target....

关注jquery技巧提高jquery技能（前端开发必学）

2017年02月06日 11 阅读

一个简单技巧的集合，帮你提升 jQuery 技能。Matt Smith 发起的一个小项目，目前已有 14 个 小技巧。伯乐在线会持续跟进更新。回到顶部按钮预加载图片检查图片是否加载完毕自动修复损坏的图片Hover 上的 Class 开关禁用 input 字段停止链接加载淡入淡出/滑动开关简单的折叠效果将两个 Div 设为相同高度在新窗口打开外部链接找到文本元素切换可视与隐藏的触发器回到顶部按钮通过使用 jQuery 中的 animate 和 scrollT...

Jquery全屏相册插件zoomvisualizer具有调节放大与缩小功能

2017年02月06日 11 阅读

先给大家展示效果图：点击查看效果图 源码下载jQuery可调节放大与缩小功能的全屏相册插件zoomVisualizer。文件引用：<script src="js/jquery.min.js"></script><script src="js/jquery-ui.min.js"></script><script type="text/javascript" src="js/ZoomVisualizer.j...

Jquery时间轴特效（三种不同类型）

2017年02月06日 11 阅读

jquery三种不同类型时间轴切换展示幻灯特效，先给大家展示效果图，喜欢的朋友可以下载源码哦。查看效果 源码下载文件引用：<script type="text/javascript" src="jquery.js"></script> <script src="jquery.timelinr-0.9.4.js" type="text/javascript"></script> <script type=...

js实现动态加载脚本的方法实例汇总

2017年02月06日 11 阅读

本文实例讲述了js实现动态加载脚本的方法。分享给大家供大家参考，具体如下：最近公司的前端地图产品需要做一下模块划分，希望用户用到哪一块的功能再加载哪一块的模块，这样可以提高用户体验。所以到处查资料研究js动态脚本的加载，不过真让人伤心啊！，网上几乎都是同一篇文章，4种方法，讨厌其中拷贝别人成果的人，也不加个原文的链接。哎！关键是最后一种方法还有点错误。经过两天的研究查阅资料，在这里和大家分享一下。首先我们需要一个被加载的js文件，我在一个固定文件夹下创建了...

Jquery效果大全之制作电脑健康体检得分特效附源码下载

2017年02月06日 11 阅读

jquery制作电脑健康体检得分效果图如下所示，喜欢的朋友可以下载源码哦。查看效果图源码下载文件引用：<script type="text/javascript" src="js/jquery-...min.js"></script><script type="text/javascript">var current = ;$（document）.ready（function（）{$（".score-state-righ...

jquery实现简洁文件上传表单样式

2017年02月06日 11 阅读

文章开始先告诉大家制作jquery实现简洁文件上传表单样式的简易教程。效果图：页面结构：<div class="uploader white"><input type="text" class="filename" readonly="readonly"/><input type="button" name="file" class="button" value="Browse..."/><input type="...

JQuery zClip插件实现复制页面内容到剪贴板

2017年02月06日 11 阅读

相信这个功能大家平时上网经常能碰到，以前也没怎么留意怎么实现的，直到项目中需要。最终效果：网上一搜一大堆，单纯使用js方法也不是没有，但是由于各浏览器的安全机制不同，不是跨浏览器的。去看了几个常用的网站，都是用的透明flash遮挡“复制到剪贴板”按钮，所以当你点击“复制到剪贴板”的时候，点击的其实是flash，然后把你需要复制的内容传入到了flash，然后在通过flash的复制功能把传入的内容复制到了剪贴板。加载JQuery库和zclip插件<scr...

jQuery zclip插件实现跨浏览器复制功能

2017年02月06日 11 阅读

jQuery-zclip是一个复制内容到剪贴板的jQuery插件，使用它我们不用考虑不同浏览器和浏览器版本之间的兼容问题。jQuery-zclip插件需要Flash的支持，使用时记得安装Adobe Flash Player。1、jQuery-zclip用法//引入jQuery-zclip相关js及swf文件<script type="text/javascript" src="<%=path%>/resources/js/jquery.m...

jQuery实用技巧必备（上）

2017年02月06日 11 阅读

本文实例总结了经典且实用的jQuery代码开发技巧。分享给大家供大家参考。具体如下：1. 禁止右键点击$（document）.ready（function（）{ $（document）.bind（"contextmenu",function（e）{ return false; }）;}）;2. 隐藏搜索文本框文字Hide when clicked in the search field, the value.（example can be found be...

jQuery实用技巧必备（中）

2017年02月06日 11 阅读

本文实例总结了经典且实用的jQuery代码开发技巧。分享给大家供大家参考。具体如下：12.预加载图片如果你的页面中使用了很多不可见的图片（如：hover 显示），你可能需要预加载它们：$.preloadImages = function （） { for （var i = 0; i < arguments.length; i++） { $（"<img>"）.attr（"src", arguments[i]）; }};$.preloadIm...

JS实现网页标题随机显示名人名言的方法

2017年02月06日 13 阅读

本文实例讲述了JS实现网页标题随机显示名人名言的方法。分享给大家供大家参考，具体如下：这段代码实现每次刷新过后，网页的标题都会随机显示名人名言，一次一条，把这些名言定义在Javascript的数组内，每次调用随机调用一条，随机产生的随机数正好是数组的标号，这样就实现了随机，不错的效果吧。运行效果截图如下：在线演示地址如下：http://demo.jb51.net/js/2015/js-title-show-tips-style-codes/具体代码如下：&...

Javascript设计模式理论与编程实战之简单工厂模式

2017年02月06日 12 阅读

阅读目录基本介绍举例说明总结说明简单工厂模式是由一个方法来决定到底要创建哪个类的实例, 而这些实例经常都拥有相同的接口. 这种模式主要用在所实例化的类型在编译期并不能确定， 而是在执行期决定的情况。 说的通俗点，就像公司茶水间的饮料机，要咖啡还是牛奶取决于你按哪个按钮。简单工厂模式在创建ajax对象的时候也非常有用.通常我们创建对象最常规的方法就是使用new关键字调用构造函数，这会导致对象之间的依赖性。工厂模式是一种有助于消除类之间依赖性的设计模式，它使用...