简单的jquery拖曵原理js特效实例

<!DOCTYPE html> <html> <title>简单拖曵原理实例</title> <script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"…

/* onmousedown : 选择元素 onmousemove : 移动元素 onmouseup : 释放元素 */ 查看Demo:拖拽图片 function drag(obj) { obj.onmousedown = function(ev) { var ev = ev || event; var disX = ev.clientX - this.offsetLeft; var disY = ev.clientY - this.offsetTop; if ( obj.setCapture…

JS鼠标的拖拽原理

拖拽功能主要是用在让用户做一些自定义的动作,比如拖动排序,弹出框拖动移动等等,效果还是蛮不错的.下面讲解一下拖拽的原理,希望可以帮助到有需要的朋友! 一.拖拽的流程动作①鼠标按下②鼠标移动③鼠标松开二.拖拽流程中对应的JS事件①鼠标按下会触发onmousedown事件 obj.onmousedown = function(e) { //.......... } ②鼠标移动会触发onmousemove事件 obj.onmousemove = function(e) { //...... } ③鼠…

分享JQuery动画插件Velocity.js的六种列表加载特效

分享JQuery动画插件Velocity.js的六种列表加载特效.在这款实例中给中六种不同的列表加载效果.分别为从上飞入.从右侧飞入.从左侧飞入.和渐显.一起看下效果图: 在线预览源码下载实现的代码. html代码: <h1> Velocity.js <i>slice + sequence</i></h1> <pre>Only anim X number with FX#1, animate Y number with FX#2 etc…

javascript拖拽原理与简单实现方法[demo]

美国人有一句常用的俗语—“Re-inventing the Wheel”,从字面上来解释就是“重新发明轮子”.可是轮子早已问世,再要去发明岂非劳而无功? 产品经理发下需求,实施者再到网上搜索代码,也许很快就搜到对应的代码.简单的交互和提交常用的交互,很容易的网上找到相应的代码.一些复杂的交互.定制行比较强的交互,网上找代码就有些困难的.所有复杂交互都是简单交互的组成,所以搜索别人的代码是以学习为主,把别人的基础方法掌握了.拿到需求就不必要到网上搜代码,这样永远也不能提升自己的能力. 业余时间写的…

原生js拖拽、jQuery拖拽、vue自定义指令拖拽

原生js拖拽: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible&q…

jQuery实现TAB选项卡切换特效简单演示

本文实例为大家分享jQuery实现TAB选项卡切换特效,供大家参考,具体内容如下 1.tab切换 on ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 6…

简单的jquery进度条插件LineProgressbar.js，myProgress.js

参考 http://www.lanrenzhijia.com/jquery/4121.html demo下载 <script src="js/jquery.lineProgressbar.js" type="text/javascript"></script> $(function(){ $('#progressbar1').LineProgressbar({ percentage: 50 }); $('#progressbar2').L…

150个JS特效脚本

收集了其它一些不太方便归类的JS特效,共150个,供君查阅. 1. simplyScroll simplyScroll这个jQuery插件能够让任意一组元素产生滚动动画效果,可以是自动.手动滚动,水平.垂直方向滚动.此外,它还可以接受动态图片输入通过Flickr供稿或一个本地JSON数据源. 2. Animated Collapsible DIV 为任何DIV层添加Web2.0风格的动画隐藏/显示效果 3. jQuery Pagination (演示地址) jQuery分页插件 4. side…

jQuery懒加载插件jquery.lazyload.js使用说明实例

jQuery懒加载插件jquery.lazyload.js使用说明实例很多网站都会用到‘图片懒加载’这种方式对网站进行优化,即延迟加载图片或符合某些条件才开始加载图片.懒加载原理:浏览器会自动对页面中的img标签的src属性发送请求并下载图片.通过动态改变img的src属性实现. Lazy Load 是一个用 JavaScript 编写的 jQuery 插件.它可以延迟加载长页面中的图片在浏览器可视区域外的图片不会被载入,直到用户将页面滚动到它们所在的位置.与图片预加载的处理方式相反,在包含很多…

jquery select选中表单特效三级联动

好久没发帖了,今天发一个jquery select的表单三级联动,希望能对有需要的朋友有点帮助. js代码,当然还要加上jquery的包,应该都有的,这里就不发了. <script type="text/javascript"> var threeSelectData={ "选择频道":{ val:"", items:{ "二级子菜单":{ val:"", items:{ "三级子菜单…

jquery属性的相关js实现方法

有些公司手机网站开发不用第三方的jquery或者zeptio,直接用原生的javascript.原生javascript功能是蛮强大的,只不过部分属性不支持IE8以下浏览器.下面对jquery相关方法,如何用js来实现,做一些简单总结. 元素操作 Add Class //JQUERY $(el).addClass(className);//js//谷歌浏览器,火狐浏览器,IE8+if(el.classList) el.classList.add(className);else el.classN…

几种流行的AJAX框架jQuery,Mootools,Dojo,Ext JS的对比

AJAX是web2.0的基石,现在网上流行几种开源的AJAX框架,比如:jQuery,Mootools,Dojo,Ext JS等等,那么我们到底在什么情况下该使用那个框架? 让我们来想想选择AJAX框架的基础: 你的项目需求(即你需要哪些特性,例如是否要求做出精美的界面.特效或其它功能)是否支持A等级的浏览器(IE, Firefox等)?文档的质量:是否完善(包含教程,API,代码示例等)框架的可扩展性如何?为框架写插件容易吗?你是否喜欢它的API的风格?能大多程度上统一你的JavaScript…

jQuery图片懒加载插件jquery.lazyload.js使用实例注意事项说明

jQuery图片懒加载插件jquery.lazyload.js使用实例注意事项说明 jquery.lazyload.js是一个用JavaScript编写的jQuery插件.它可以延迟加载长页面中的图片,在浏览器可视区域外的图片不会被载入.直到用户将页面滚动到它们所在的位置,这与图片预加载的处理方式正好是相反的.在包含很多大图片长页面中延迟加载图片可以加快页面加载速度,浏览器将会在加载可见图片之后即进入就绪状态,在淘宝商品详情页.漫画网站很多图片的情况下还可以帮助降低服务器负担. 一.下载和引用:…

微信QQ的二维码登录原理js代码解析

这篇文章主要大家详细解析了微信QQ的二维码登录原理js代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下在很多地方就是都出现了使用二维码登录,二维码付款,二维码账户等应用(这里的二维码种马,诈骗就不说了), 二维码验证,多终端辅助授权应用开始多起来,这里先说下啥是二维码,其实二维码就是存了二进制数据的黑白图片, 当出现要求二维码登录的时候,服务器会生成一条临时的唯一的二维码信息,发送到客户端以二维码(图片)的形式写入到网页, 然后你就会看到统一的四个方形的二维码,如果做的好这个二维码信息应…

jquery动态加载js三种方法实例

这里为你提供了三种动态加载js的jquery实例代码哦,由于jquery是为用户提供方便的,所以利用jquery动态加载文件只要一句话$.getScript(\"test.js\");就OK了. <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">…

个人网站html5雪花飘落代码JS特效下载

如何给自己的网站/页面添加雪花代码.特效呢?有的网站配合自己的主题模板添加雪花飘落效果挺好看的.特别是与冬天季节相关的主题,很多的博客空间都加了雪花的效果.在网上搜索了几种雪花效果,做了简单的修改,在这里给大家分享下.将代码添加到你的页面就可以了. 1.唯美浪漫雪花飘落jquery特效代码.演示页面:http://www.lmlblog.com/winter/.代码添加如下: <script src="http://www.lmlblog.com/winter/templets/xq/js…

【转】简单的jQuery插件开发方法

在实际开发工作中,总会碰到像滚动,分页,日历等展示效果的业务需求,对于接触过jQuery以及熟悉jQuery使用的人来说,首先想到的肯定是寻找现有的jQuery插件来满足相应的展示需求.目前页面中常用的一些组件,都有多种jQuery插件可供选择,网络上也有很多专门收集jQuery插件的网站.利用jQuery插件确实可以给我们的开发工作带来便捷,但是如果只是会简单使用,而对其中的原理不甚了解,那么在使用过程中碰到问题或者对插件进行定制开发时就会有诸多疑惑.本文的目的就是可以快速了解jQuery插件…

jQuery+CSS3文字跑马灯特效

jQuery+CSS3文字跑马灯特效是一款将跑马灯背景制作为3D立方体效果,文字在上面移动时,就像是文字投影到墙壁上,在转角出会改变运动方向. 效果展示 http://hovertree.com/texiao/jquery/83/ 效果图如下: 完整HTML代码如下: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http…

Cropper – 简单的 jQuery 图片裁剪插件

Cropper 是一个简单的 jQuery 图像裁剪插件.它支持选项,方法,事件,触摸(移动),缩放,旋转.输出的裁剪数据基于原始图像大小,这样你就可以用它们来直接裁剪图像. 如果你尝试裁剪跨域图像,请确保您的浏览器支持 HTML5 CORS 属性和图片服务器支持 Access-Control-Allow-Origin 选项.这些浏览器测试通过:Chrome, Firefox, Internet Explorer 8+,Opera, Safari. 在线演示源码下载您可能感兴趣的相…

jquery叠加页片自动切换特效

查看效果:http://keleyi.com/keleyi/phtml/jqtexiao/34.htm 下面是HTML代码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>jquery叠加页片自动切换特效 - 柯乐义</title><bas…

jQuery - 1.简单的JQuery

1.简单的JQuery 2.jQuery对象(包装集).Dom对象 3.JQuery提供的函数 1.简单的JQuery $(document).ready(function () { alert("加载完毕!"); });//注册事件的函数,和普通的dom不一样,不需要在元素上标记on**这样的事件. //当页面Dom元素加载完毕时执行代码,可以简写为: $(function () { alert("加载完毕!"); }); 和onload类似,但是onload只能…

基于jQuery HTML5人物介绍卡片特效

基于jQuery HTML5人物介绍卡片特效.这是一款基于jquery.material-cards插件实现的人物介绍卡片形式特效代码.效果图如下: 在线预览源码下载实现的代码. html代码: <div class="htmleaf-container"> <br> <section class="container"> <div class="row active-with-click">…

jQuery图片无缝滚动JS代码ul/li结构

<!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-…

编写一个简单的Jquery插件

1.实现内容定义一个简单的jquery插件,alert传递进来的参数 2.插件js文件(jquery.showplugin.js) (function ($) { //定义插件中的方法 var methods = { //Object showName: function (name) { alert('Name:' + name); }, showAge: function (age) { alert('Age' + age); } }; //method方法名 $.fn.showplugi…

一款仿PBA官网首页jQuery焦点图的切换特效

一款仿PBA官网首页jQuery焦点图的切换特效,非常的简单大方, 在对浏览器兼容性的方面做了不少的功夫.IE6也勉强能过去. 还是一款全屏的焦点图切换特效.大气而清新.很适合简介大方的网站. 下图还可以看出左侧有3快介绍区,也有特效. 适用浏览器:IE6(有瑕疵).IE7.IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 效果图如下: 特效下载地址:http://www.jqshare.com/Jq/fondone/id/122.html…

11个好用的jQuery拖拽拖放插件

这次我们整理一些拖拽播放类型的jQuery插件,这些可能不是很常用,但偶尔会有网站设计项目用到,特别是后台相关的开发项目,这个拖放排序功能一般都会有,所以适合大家收藏起来,方便日后使用.接下来一起看盾11个简单易用的jQuery拖拽拖放插件. JQuery Gridly Gridly是个网格式的拖放移位jQuery插件,这个插件交互不错,我们在拖动的时候会显示一些移动动画,效果很好看. 此插件还有其它特色功能,比如关闭.点击放大.增加模块等等. 演示及下载 Drag N Drop Scatter…

20款jquery下拉导航菜单特效代码分享

20款jquery下拉导航菜单特效代码分享 jquery仿京东商城左侧分类导航下拉菜单代码 jQuery企业网站下拉导航菜单代码 jQuery css3黑色的多级导航菜单下拉列表代码 jquery响应式导航菜单支持手机导航菜单代码 jquery鼠标导航下滑显示图片列表效果 jQuery个性动画二级下拉导航代码 jquery网站下拉菜单制作企业网站导航菜单代码 jQuery游戏网站顶部滑动导航菜单代码 jquery.superfish.js导航菜单插件制作网页无限级下拉菜单代码 jquery ho…

一个简单的jQuery插件开发实例

两年前写的一个简单的jQuery插件开发实例,还是可以看看的: <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script type="text/javascript"> (function($){ // 为指定节点添加遮盖效果 var methods = { Documents : {}, Options : {}, S…

简单的 jQuery 浮动层随窗口滚动滑动插件实例

写了一个非常简单的 jQuery 插件实例浮动层随窗口滚动滑动 <!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>…