代码如下:String.prototype.replaceAll = function(s1,s2){ return this.replace(new RegExp(s1,"gm"),s2); }; (function($){ /* * $-layer 0.1 - New Wave Javascript * * Copyright (c) 2008 King Wong * $Date: 2008-10-09 $ */ var ___id___ = ""; var ___settings___ = {}; var isMouseDown = false; var currentElement = null; var dropCallbacks = {}; var dragCallbacks = {}; var bubblings = {}; var lastMouseX;...
很多公司的前端设计开发人员都是女孩子，而这些女孩子很多JavaScript技能都不是很好。而前端开发过程中，JavaScript技能又是必不可少的。所以，如果前端小MM正在为某个JavaScript效果发愁的时候，你潇洒的过去，然后对她说：“嗨，美女，用这个吧。这是我写的一个jQuery插件。”我想基本上你的人生大事就能很快解决。 先想好做个什么功能 这是第一步，也是很重要的一步，鉴于咱们都是刚学习写jQuery插件，所以，这个功能一定要简单...
本文实例讲述了jQuery+css3实现转动的正方形效果。分享给大家供大家参考，具体如下： 主要是应用到了css3中的rotate来控制旋转角度 运行效果截图如下：点击此处查看在线演示效果。 具体代码如下：img { width:50px; height:50px; }.margin1 { margin-top:50px; margin-left:100px; }.margin2 { margin-top:50px; margin-left:100px; }.margin3 { margin-top:50px; margin-left:100px; }.margin4 { margin-top:50px; margin-left:10...
本文实例讲述了jQuery实现可以控制图片旋转角度效果。分享给大家供大家参考，具体如下： 运行效果截图如下：点击此处查看在线演示效果。 具体代码如下：img { margin-top:100px; margin-left:400px; width:300px; border:3px solid #F2F2F2; height:300px; box-shadow:4px 4px 4px #DDDDDD;}input { margin-top:10px; margin-left:480px; }window.onload = function () {document.getElementById('range').onchange = function () ...
本文实例讲述了jQuery实现横向带缓冲的水平运动效果。分享给大家供大家参考，具体如下： 这里使用jQuery生成横向带缓冲的水平运动，用鼠标点一下才能激活，点一下以后可看到Div层在做水平运动，由此可派生出诸多的其它形式的动画效果。 点击此处查看在线演示效果。 具体代码如下：水平移动*{margin:0;padding:0;} body { padding: 60px } #panel {position: relative; width: 100px; height:100px;border: 1px solid #0050D0;backg...
本文实例讲述了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:...
我们知道，一般select下拉框是只能选择的，不能用来输入内容的。而有时我们会遇到下拉框中没有要选择的信息项或者下拉选项特别多时，我们可以让select变成text，允许用户输入想要的内容，同时还可以在输入的时候将包含关键字的项也列出来，供快速选择。查看演示效果 源码下载 本文将用实例和大家分享一款基于jQuery的下拉框插件，它允许用户输入内容，同时下拉选项中会及时匹配相关选项，支持键盘操作，还支持html选项内...
jquery.timelinr.js是一款效果非常炫酷的jQuery时间轴插件。jquery.timelinr可以制作水平和垂直时间轴效果，并且可以进行自动播放。你可以通过参数来控制每次时间轴切换的动画效果。 推荐阅读：之前分享过一款 jQuery实现企业发展简史时间轴特效源码 ，它的界面展示效果很不错。效果展示 源码下载使用方法 使用该时间轴插件需要在页面中引入jQuery和jquery.timelinr.js文件。HTML结构 该时间轴插件的基本HTML结构如下：date1...
基于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...
ECharts地图主要用于地理区域数据的可视化，展示不同区域的数据分布信息。ECharts官网提供了中国地图、世界地图等地图数据下载，通过js引入或异步加载json文件的形式调用地图。效果演示 源码下载 本文将结合实例讲解如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据，我们以中国地图为例，展示去年（2015年）我国各省份GDP数据。通过异步请求php，读取mysql中的数据，然后展示在地图上，因此本文除了你掌握前端知识外，...
本文实例讲述了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元素加载完毕之后，可以通过下面的方法来初始化该图片绘制插件。...