看到了一个轮播图的思路，就想的自己动手实践一下，总体来说用jQuery实现起来简单多了 如果对代码中使用的方法有疑问，可以参考我的jQuery学习之路(持续更新)，里面有讲解；或者你和我一样学习jQuery不久，那你可以看看我的jQuery小案例(持续更新)，互相学习！ 预览：优酷首页轮播图 ▓▓▓▓▓▓ 思路 思路其实非常简单，就是当点击图片下面的圆点或者图片两边的箭头时，让想要看到的图片走到它的位置，然后当前的图片和...
因一个项目的需要，需要在前端界面实现在折叠面板里拖曳控件到工作区的功能（类似于Android和MFC的可视化界面开发），于是就开始学起了强大的jQuery，发现里面的jQuery-UI有折叠面板、按钮等控件，但当在折叠面板里拖曳按钮时，按钮的拖曳范围只能是折叠面板内部，不能拖到工作区。所以这里绕了个弯实现了一下：主要的实现过程是：首先在控件表明生成一个副本，每次拖曳控件的时候拖曳的都是副本，当拖曳完成，即鼠标弹起后，原控件...
jQuery实现瀑布流js分析：首先监听window事件获取图片加载的位置，调用图片加载位置的函数，然后以鼠标滑动的距离来加载图片1.HTML布局： 1<div id="container"> 2<div class="box"> 3<div class="content"> 4<img src="../img/1.jpg"> 5</div> 6</div> 7<div class="box"> 8<div class="content"> 9<img src="../img/9.jpg">10</div>11</div>12<div class="box">13<div class="content">14<img src="../img/11.jpg">15</div>16</d...
项目应用-布局钟表支架和页面图片在前面实现两种时钟的效果，将前面用到的知识整合于一小项目中用到的素材： 由于这张截取的素材太大，我就不放在该位置了项目页面初始布局效果： 初始布局代码： 1 <!DOCTYPE html>2 <html>3 <head>4 <meta charset="UTF-8">5 <title></title>6 <style>7 *{8 margin:0px ;9 padding: 0px; 10 } 11 ...
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">div{width:125px;border:1px solid #369;line-height:25px;padding-left:10px;}div.menu{height:30px;line-height:30px;font-size:14px;text-indent:10px;font-weight:bold;color:#fff;background-color:#369;}</style><script src="js/jq8.js"></script><script>$(function(){$(‘div.menu‘).toggle(function(){var id =this.id;$(‘#‘...
请勿盗版。转载请加上出处http://blog.csdn.net/yanlintao1请勿盗版，转载请加上出处http://blog.csdn.net/yanlintao1css样式：@CHARSET "UTF-8"; #div{margin-bottom:10px;position:relative; } #div1{width:153px;padding-top:0px;padding-left:0px;position:absolute; } #div1 ul{margin-top:0px;padding-left:0px;background-color:#ccc;list-style:none; } #div1 ul li{padding-left:0px; } #div1 ul li input{margin-left:15...
额，这个标题取的还真是挺装的...其实我想表达的是jquery click事件如何在移动端自动转换成touchstart事件。因为移动端click事件会比touchstart事件慢几拍移动设备某个元素上事件执行顺序是：touchstarttouchmovetouchendclick｛<SPAN style=‘font-family: "Times New Roman";‘>mousedown->mousemove->mouseup｝ click事件在移动设备上虽然会识别但却是最后一个执行的，所以如果不把<SPAN style=‘font-family: "Times New Rom...
在此随笔之前，博主已经做过一次图片滑动轮播，如过你也有看过就会知道里面的效果在自动轮播的时候有一个不太美观的效果，就是当最后一张图片滑动切换到第一张图片的时候会看到一个快速向左滑动的效果，这是很不美观的，当然也有网站是这样做。但博主参照过很多网站的图片轮播基本上都是无缝的（一张紧接着一张），所以博主也决定自己做一个。 做这个之前博主还在某客学院看了视频教程，此方法为纯jquery方法，比js混合jq方法易懂简...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head> <title>复选多选反选</title> <meta charset="UTF-8"> <script src="jquery-3.4.1.js"></script></head><body><div> <button onclick="selectAll()">全选</button> <button onclick="cancel()">取消</button> <button onclick="reverse()">反选</button></div><table border="1"> ...
<html> <head> <meta charset="utf-8"> <title>完成左移右移</title> <script src="jquery.js"></script> <style type="text/css">table{background-color:purple;}input{background-color:blue;} </style> <script language="javascript">$("document").ready(function(){$("#b1").click(function(){var v1=$("#k1").find("option:selected").text();if(v1!=null){$("#k2").append("<option value=‘‘>"+v1+"</option>");$("#k1 ...
demo如下：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title><meta name="description" content=""/><meta name="keywords" content=""/><style type="text/css">html{background:white;color:black}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav...
转自：http://www.jb51.net/article/76595.htm jQuery Validate插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息，且已翻译成其他 37 种语言。第一节：jQuery Validation让验证变得如此容易一、官网下载jquery，和jquery validation plugin 二、引入文件<script src="js/jquery-1.8.0.min.js" type="text/javascript"></script> <scr...
转自：http://www.muzilei.com/archives/136如何实现拖动效果？浏览DEMO首先分析下拖动效果原理：1.当鼠标在被拖动对象上按下鼠标（触发onmousedown事件，且鼠标在对象上方）2.开始移动鼠标（触发onmousemove事件）3.移动时更显对象的top和left值4.鼠标放开停止拖动(触发onmouseup事件)注意：拖动的对象必须是定位对象(即设置了position:absolute或 relative)。也就是说拖动事件=onmousedown事件+onmousemove事件整个过程就是处理这...
//编辑修改或新增页面联动可以这样写jQuery(function(){ // 省级 $(‘#province‘).combobox({valueField:‘itemvalue‘, //值字段textField:‘itemtext‘, //显示的字段url:‘/user/sort/province_list‘,panelHeight:‘auto‘,required:true,editable:true,//不可编辑，只能选择value:‘${user.province}‘,onChange:function(province){//$(‘#city‘).combobox(‘clear‘);$(‘#city‘).combobox({valueField:‘itemvalue‘, /...
今天早上遇到了这个问题，结果我写的顺序是惨不忍睹啊，所有现在留个模版以示标准。$(function(){ $.ajax({ url : "Servlet", //传地址 type : "post", //类型 async : "true", //是否异步 data : { "action": "action" }, //数据 dataType : "json", //数据格式 success : function(data){ //成功后操作 alert("AJAX"); ...