本文实例讲述了jQuery模拟360浏览器切屏效果幻灯片，分享给大家供大家参考，具体如下： 运行效果截图如下：点击此处查看在线演示效果。 具体代码如下：360效果幻灯片function changeDesktopBg(index) {$("#desktopList").animate({"margin-left": -(index*1000)+"px", "speed": 2000});}body { margin:0; padding: 0;}#desktop ul { padding:0; border-bottom-style:none; width:5000px; list-style:none; }#desktop li { padding:...
本文主要从三个方面给大家介绍webwork文件上传下载知识，包括以下三个方面： 1. 包装 Request 请求 2. 获取文件上传的解析类 3. 项目实战配置和使用 Web上传和下载应该是很普遍的一个需求，无论是小型网站还是大并发访问的交易网站。WebWork 当然也提供了很友好的拦截器来实现对文件的上传，让我们可以专注与业务逻辑的设计和实现，在实现上传和下载时顺便关注了下框架上传下载的实现。 1. 包装 Request 请求 ?每次客户端请求 Act...
我们知道，一般select下拉框是只能选择的，不能用来输入内容的。而有时我们会遇到下拉框中没有要选择的信息项或者下拉选项特别多时，我们可以让select变成text，允许用户输入想要的内容，同时还可以在输入的时候将包含关键字的项也列出来，供快速选择。查看演示效果 源码下载 本文将用实例和大家分享一款基于jQuery的下拉框插件，它允许用户输入内容，同时下拉选项中会及时匹配相关选项，支持键盘操作，还支持html选项内...
jquery.timelinr.js是一款效果非常炫酷的jQuery时间轴插件。jquery.timelinr可以制作水平和垂直时间轴效果，并且可以进行自动播放。你可以通过参数来控制每次时间轴切换的动画效果。 推荐阅读：之前分享过一款 jQuery实现企业发展简史时间轴特效源码 ，它的界面展示效果很不错。效果展示 源码下载使用方法 使用该时间轴插件需要在页面中引入jQuery和jquery.timelinr.js文件。HTML结构 该时间轴插件的基本HTML结构如下：date1...
大家在汽车驾驶舱里一眼就可以看到仪表盘，使用使用Echarts制作的仪表盘可以轻松展示用户的数据，清晰的看出某个指标值所在的范围，仪表盘形式的报表应用在各种统计系统中，本文结合实例讲解仪表盘在销售任务完成率的统计应用。效果演示 源码下载 HTML 首先引入Echarts，然后在需要放置图表的地方加上div#myChart，同时给它加上宽度和高度属性。Javascript 接下来要初始化echarts实例，然后设置选项，最后渲染图像。var myCha...
基于jQuery实现仿搜狐辩论投票动画代码 ，一款个性的卡通小人正方反方辩论投票特效代码。移动动画效果平滑自然。具有非常好的用户体验。该源码兼容目前最新的各类主流浏览器。效果演示 源码下载 html代码：$(document).ready(function () { var a = 500; var b = 130; $("#white").animate({ width: 0, left: "250px" }, 1000, function () { $("#vs").fadeIn("slow", function () { $("#all").html(a + b); $("#aa").html(a);...
使用jquery拖拽排序插件制作拖拽排序效果是一款非常实用的鼠标拖拽布局插件。效果图如下：效果演示 源码下载 html代码：水平拖拽1 2 3 4 5$(function(){ $('.demo').dad(); });body { margin: 0; border-left: 200px solid #ccc;} h1 { width: 1000px; margin: 40px auto; font: 32px "Microsoft Yahei";} .demo { width: 1000px; margin: 0 auto;} .menu { position: absolute; left: 0; top: 0; bottom: 0; width: 200p...
这是一款基于jQuery的弹出对话框插件，这个jQuery对话框插件的最大特点是弹出和关闭都带有非常炫酷的动画特效，比如旋转飞入、上下抖动飞入等。效果图如下：效果演示 源码下载 html代码：jQuery gDialog Plugin Exampels Alert Dialog Box Prompt Dialog Box Prompt Dialog Box$('.demo-1').click(function(){ $.gDialog.alert("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse libero erat, scelerisq...
本文实例讲述了jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果。分享给大家供大家参考，具体如下： 该插件乃文章作者所写，目的在于提升作者的js能力，也给一些js菜鸟在使用插件时提供一些便利，老鸟就悠然地飞过吧。 此插件旨在实现目前较为流行的点击放大图片并左右点击切换图片的效果，您可以根据自己的实际需求来设置是否添加左右切换图片的效果。整体代码如下：无标题文档*{margin:0;padding:0;} li{list-s...
本文实例讲述了jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法。分享给大家供大家参考，具体如下： 该插件是文章作者所写，目的在于提升作者的js能力，也给一些js菜鸟在使用插件时提供一些便利，老鸟就悠然地飞过吧。 此插件旨在实现目前较为流行的拖拽改变元素大小的效果，您可以根据自己的实际需求来设置被拖拽元素的最小宽高和最大宽高。整体代码如下：无标题文档*{margin:0;padding:0;} .box{position:absolute;lef...
ImageDrawer.js是一款可以实现动态绘制图片动画的jQuery插件。通过ImageDrawer.js插件，你可以制作在页面中绘制图片的动态过程，你可以控制绘制动画的持续时间等参数，非常有趣。效果展示 源码下载 使用方法 使用该动态绘制图片插件需要在页面中引入imagedrawer.css，jquery和imagedrawer.js文件。HTML结构 在页面中插入你需要绘制的图片。初始化插件 在页面DOM元素加载完毕之后，可以通过下面的方法来初始化该图片绘制插件。...
本文实例讲述了JS实现的在线调色板。分享给大家供大家参考，具体如下： 运行效果截图如下：具体代码如下：ColorSchemer - Online Color Scheme GeneratorCurrent Color 255.255.255#FFFFFF 255.255.255#FFFFFF 255.255.255#FFFFFF 255.255.255#FFFFFF 255.255.255#FFFFFF 255.255.255#FFFFFF 255.255.255#FFFFFF 255.255.255#FFFFFF 255.255.255#FFFFFF 255.255.255#FFFFFF 255.255.255#FFFFFF 255.255.255#FFFFFF 255.255.255#FFF...
本文实例讲述了jQuery实现滚动鼠标放大缩小图片的方法。分享给大家供大家参考，具体如下： 在项目制作过程中，遇到了这么一个需求，就开发了一个，记录一下。 首先，需要定义html元素和css样式：滚动鼠标中键，可以放大或者缩小图片在这个样式中，我设置了图片的样式为670px，目的就是避免图片过大的时候，显示到了页面外部的现象。 然后我使用了一个jquery mousewheel 的插件来解决鼠标中键的滚动问题，下面是具体的jquery操作代码...
这是一款基于jQuery的百叶窗焦点图动画，和之前介绍的CSS3百叶窗焦点图动画不同的是，它的兼容性更好，实用性更强，因为它是基于纯jQuery的，基本上所有浏览器都能够支持。焦点图的图片切换动画是百叶窗的动画方式，但也有几种不同的百叶窗动画，因此也不会觉得单调。在线演示 源码下载 HTML代码CSS代码#slider { position: relative; width: 600px; overflow: hidden; margin: 10px auto 30px auto; } #slider li { position:...
为了提高用户体验度，在一些电商网站和家居网站上我们会看到，一张图片中显示多种商品，点击每个商品可以弹出对应商品的简单介绍，包括价格等等，设计非常的人性化，今天我们通过实例给大家分享使用jQuery插件来实现这一效果。 先给大家展示下效果图：效果演示 源码下载HTML 首先，我们加载jQuery库和easypin插件。接着，我们准备一张图片，这是一张展示多个模特服装鞋子包包内的电商图片，注意我们给图片一个easypin-id属...