最近正在回顾之前的一些基础知识，用jquery写了一个图片滑动的插件，虽然还是有些问题存在，用法很简单，只要在对目标元素绑定slideW()函数即可，该函数最多支持两个输入，分别是图片变化之后的宽度，以及动画的速度，如果不输入，则采用默认的宽度以及默认的速度。 下面是我自己测试的例子： 代码如下: //html代码 css代码 代码如下: //css代码 *{margin:0px;padding:0px;list-style-type:none;} body{text-align:cent...
用 jQuery 的都知道，jQuery 的 get 和 post 方法有三个参数：地址，数据 和回调函数，但我们知道地址也可以跟随数据的（形如：get_data.phpv1=1&v2=2），而且第二个参数可以省略，即第二个参数可 以直接写回调函数，那么数据写在地址后面和写在 data 参数里有什么区别呢？ 刚刚做了几个实验，看看下面的代码就清楚了: 以下内容需要回复才能看到 jquery_data.phpecho "post: "; print_r($_POST); echo "get: "; print_r($_GET); ?>...
本文实例讲述了jquery ui 实现 tab标签功能。分享给大家供大家参考，具体如下： <!DOCTYPE html> <html> <head><title>www.gxlcms.com tab切换</title><style type="text/css">#tabs{width:500px;height:500px;margin:0 auto;}.ui-widget-header{border:1px solid grey;background:grey;color:#fff;font-weight:bold;}</style><link rel="stylesheet" href="https://cdn.bootcss.com/jqueryui/1.11.0/jquery-ui.css" rel="external...
本文实例讲述了jquery-ui 进度条功能。分享给大家供大家参考，具体如下： <!DOCTYPE html> <html> <head> <meta charset="utf8" /> <title>www.gxlcms.com progressbar</title> <style type="text/css">#divprogressbar{width:300px;height:30px;}.progress-label{float:left;margin-left:40%;margin-top:3px;} </style> <link rel="stylesheet" href="https://cdn.bootcss.com/jqueryui/1.11.0/jquery-ui.css" rel="external nofo...
本文实例讲述了jquery操作checkbox的常用方法。分享给大家供大家参考，具体如下： 做系统的过程中，与checkbox 复选框打交道，是难免的，而且在每个系统中，简直是必不可少的一道菜，通常的操作有一下几种： 1.用jquery 全部选择checkbox 2.用jquery 全部取消checkbox 3.用jquery 实现checkbox 反选 4.用jquery 获取所有已选择checkbox的值。 现在将这些常用的操作总结在一个例子中，方便以后查询,不愿意看代码的，也可以下载源码运...
本文实例讲述了jQuery实现的页面弹幕效果。分享给大家供大家参考，具体如下： <!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" content="ie=edge"> <title>juqery弹幕</title> <style> *{ margin: 0px; padding: 0px; } html,body{ width: 100%; height: 100%; font-family: "微软雅黑"; background...
本文实例讲述了jQuery+CSS实现的标签页效果。分享给大家供大家参考，具体如下： CSS代码： #tabs{width:600px;height:250px;background:white;margin:20px; } #tabs ul{float:left;margin:20px 0 0 20px;padding:0; } #tabs li{width:80px;height:40px;line-height:40px;display:inline-block;text-align:center;border-bottom:1px solid grey;border-top-left-radius:5px;border-top-right-radius:5px;background:#eeeeee;positio...
本文实例讲述了jQuery实现的简单拖拽功能。分享给大家供大家参考，具体如下： <!doctype html> <html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>www.gxlcms.com jQuery拖拽</title><style type="text/css">#box{position:fixed;left:100px;top:100px;background-color:red;width:300px;height:200px;}#out{height:2000px;}</style><script src="http://libs.baidu.com/jquery/2.0.3/jqu...
本文实例讲述了jQuery实现图片上传预览效果功能。分享给大家供大家参考，具体如下： <!DOCTYPE html> <html><head><meta charset="utf-8" /><title>www.gxlcms.com jquery图片上传预览效果</title><script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script></head><body><input type="file" id="browsefile" > <div class="images_show" id="images_show"> <p class="first">上传图片预览区</p> <p>图片仅限JPG、...
本文实例讲述了jQuery实现通过方向键控制div块上下左右移动的方法。分享给大家供大家参考，具体如下： 在CSS中当DOM元素的position属性为absolute或relative时，我们可以通过改变这个元素的left和top属性的具体值来控制元素在页面中显现的位置。 利用上述属性，我们可以简单实现一个元素在页面中的移动效果，这里我们采用JQuery的animate方法来实现动画效果，利用keydown监听方向键按下的事件（这里采用keydown而不是keyup，是为了...
本文实例讲述了jQuery实现的点击标题文字切换字体效果。分享给大家供大家参考，具体如下： 这个主要通过判断被点击的元素的子元素中是否包含了b元素来进行字体的切换，其中wrapInner函数是为了在$author元素的内部添加b标签。 切换回正常字体是通过将内容转化为纯文本形式，再替换元素内容来实现的。 核心代码如下： $(#f-author).css(cursor,pointer); $(#f-author).click(function(event){var $author = $(this);if(!$author.chi...
本文实例讲述了jQuery实现DIV响应鼠标滑过由下向上展开效果。分享给大家供大家参考，具体如下： 鼠标浮动时div由下向上缓慢展开效果 1. 演示效果（鼠标浮动时div由下向上展开，浮动后div由上向下折叠恢复原样）2. 代码 <!doctype html> <html> <head> <meta charset="utf-8"> <title>www.gxlcms.com jQuery响应鼠标实现div由下向上展开</title> <style type="text/css">.big{position:relative; width:234px; height:300px; backgr...
本文实例讲述了jQuery实现鼠标滑过商品小图片上显示对应大图片功能。分享给大家供大家参考，具体如下： 1 . 效果截图2 . 代码 <!doctype html> <html> <head> <meta charset="utf-8"> <title>www.gxlcms.com jQuery图片变换</title> </head> <style type="text/css">.show{width:330px; height:auto; margin:50px auto; background:#eee}.item{background:#fff; width:300px; height:auto; float:left; margin:15px;}p{ padding:15...
本文实例讲述了jQuery实现的手动拖动控制进度条效果。分享给大家供大家参考，具体如下： 这是一个手动控制进度条的小程序，分享给大家： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>www.gxlcms.com jQuery手动拖动进度条...