jquery
kirsten_z
一步一脚印
展开
-
获取客户端 浏览器信息和操作系统信息
获取客户端 浏览器信息和操作系统信息原创 2016-09-12 14:41:19 · 717 阅读 · 0 评论 -
安卓微信video标签浮在最表层覆盖分享框问题
问题:安卓微信里的video标签在播放后中是浮在最表层,覆盖了分享框,效果如图: 解决:暂时解决方案 在点击分享时,除去video标签,添加一个图片,隐藏分享框后,在添加一个video标签 html如下:<div class="video_box" id='video_width' style="padding-bottom: 15px;"> <div class="video_tit原创 2017-03-30 18:19:50 · 6071 阅读 · 0 评论 -
ajax实时更新数据
实现功能: 显示试题结果,并实时更新各题各选项选择人数 效果如图:示例代码:控制器 SurveyController.php public function getResult($id){ $oSuvey = Suvey::find($id); if(!$oSuvey){ etun json_encode(array('success'=>原创 2017-02-24 14:16:09 · 8871 阅读 · 0 评论 -
根据复选框checkbox选中状态隐藏或显示input输入框
jQuery错误实现选中两个复选框,显示输入框,否则隐藏输入框功能("#idname").val()兼容性差,有效请求一次有效,使用("#idname").val()兼容性差,有效请求一次有效,使用(“#idname”).is(expr|obj|ele|fn)或$(“#idname”). prop(n|p|k,v|f)解决例子:界面显示:原创 2016-09-14 17:41:38 · 2080 阅读 · 0 评论 -
jQuery的ajax请求添加"加载中..."提示
主要实现功能:1、下拉加载数据时显示 “加载中…”2、每次加载完后显示 “加载更多”3、当所有数据加载完后页面显示<style type="text/css"> .video_list{padding:5% 2% 0;} .one_list a{display:-webkit-box;margin-bottom:4%;} .loading_box {font-size:1原创 2016-09-14 13:47:18 · 6639 阅读 · 0 评论 -
jquery实现交互函数介绍
1、$.trim(str)1)content.trim() -- 除去content首尾空格字符 -- IE下会报错2)$.trim(str) -- 将str首尾空格字符除去,返回字符串2、$.get(url, [data], [callback], [type])1)url:待载入页面的URL地址2)data:待发送 Key/value 参数。3)callback:载入成功时回调函数。原创 2016-09-14 11:45:49 · 785 阅读 · 0 评论 -
复选弹框实现,并显示所选选项
弹框 显示选项效果-点击弹出弹框原创 2016-09-12 14:26:02 · 1314 阅读 · 0 评论 -
phpcms日期--汉字与数字的转换
效果界面月份数 显示 汉字,参数传入 数字查询返回数据时,返回数字,界面显示 汉字示例:controllercase 'show'://个人积分来源显示 //获取个人积分页面信息 $year = isset($year) ? intval($year) : date('Y'); $month = isset($month) ? intval($month) : date原创 2016-09-19 17:48:33 · 766 阅读 · 0 评论 -
实现多图批量上传
说明 最近做的一个项目,类似贴吧,用户可发表言论,并上传图片,涉及多图批量上传问题,由于设计图已订好的缘故,插件不太好使用,综合前人经验,自我总结整理出一个比较简单的方法,有利有弊,后期慢慢改良~示例style.css@charset "utf-8";/* CSS Document */body{ font:12px/24px "Microsoft YaHei","微软雅黑"; color:#6原创 2017-08-16 18:09:25 · 10323 阅读 · 2 评论 -
js翻页效果实现
1、说明 1)功能:实现书籍翻页效果 2)使用插件:turn.js2、示例 1)前提工作 – 需要提前计算数据总页数,提前生成需要的页数 – 初始化翻书插件 2)实践 html代码片段示例:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>翻书</title>原创 2017-10-24 13:31:48 · 14918 阅读 · 0 评论 -
jQuery UI 实例 - 滑块(Slider)实现
1)说明 实现滑动滑块选择数值 2)示例代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>滑块实现</title> <meta name="description" content="滑块实现"> <meta name="keywords" content="滑块实现">原创 2017-10-24 16:35:19 · 5034 阅读 · 0 评论 -
js音频插件实践应用
说明 应用于微信中,详情页播放音频,列表页循环播放多个音频 1、单个音频 仿微信公众号语音框插件weixinAudio.js 1)实践示例代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>音频</title> <meta name="description" content原创 2017-10-24 15:16:14 · 779 阅读 · 0 评论 -
分享微信端判断,覆盖提示框显示
实现功能:1、点击分享图标,显示覆盖层,分享提示图片,再次点击任意处覆盖层隐藏2、判断是否处于微信客户端,只有使用微信,才能进行分享功能controller层/** * * Enter description here ...视频详细页 */public function getVideoInfo($id) { $oVideo = Video::find($id);原创 2016-09-14 14:03:22 · 1343 阅读 · 1 评论 -
CKplayer与video标签实用于ios和Android的示例
1、使用html5视频播放器-video标签 效果: 微信浏览器中显示,点击皆可全屏播放(ios默认显示播放按钮) 浏览器中显示,ios点击全屏播放(Android默认小屏播放) 实现:Android浏览器实现点击全屏播放 结果:目前在Android浏览器中,第一次点击,全屏播放 示例:<div class="record_video"> <vid原创 2017-06-22 12:01:52 · 4032 阅读 · 1 评论 -
swiper-移动端网页触摸内容滑动js插件
实现动态垂直切换图片效果 示例:<!-- Swiper --><div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> <a href="#"><img src="test1.jpg"></a> </d原创 2017-06-29 16:46:24 · 482 阅读 · 0 评论 -
web开发常用插件总结
多图上传 类似qq控件图片上传效果 示例文档:http://www.52doit.com/show/341图片浏览插件 1)phtoswipe 官网: http://www.photoswipe.com/ 源码:https://github.com/dimsemenov/photoswipe 2)Lightbox2 常具有功能包括:自动根据窗口的大小缩放图片,模式窗口,幻灯片方原创 2017-07-19 17:08:56 · 879 阅读 · 0 评论 -
同类元素实现click事件
多个相同的元素执行click事件$(selector).click(function(){ //执行动作})常用选择元素的js方法1) find(selector) 查找selector元素,并对之进行操作2) addClass() 添加类 removeClass 移除类3) removeAttr() 移除某属性4) siblings() 遍历同胞元素,并对其执行相关动作原创 2016-09-14 11:09:29 · 417 阅读 · 0 评论 -
获取复选框、单选框的值
单选框的值<div class="ques_one"> <p>1. 一个月健身几次最好?(单选)</p> <ul> <li> <label> <input type="radio" name="question1" value="A" /> <span>A 一月八次</span>原创 2016-09-14 11:22:53 · 758 阅读 · 0 评论 -
jquery表单插件 jquery.form.js
一个ajax表单插件,两个核心方法 – ajaxForm()、ajaxSubmit()下载地址: http://malsup.github.com/jquery.form.js1、ajaxForm() – 增加需要的事件监听器,为提交表单做好准备,接受0或1个参数2、ajaxSubmit() – 对用户提交表单进行响应,接受0或1个参数3、formSerilize() – 序列化表单中的数据 n原创 2016-09-14 11:23:33 · 406 阅读 · 0 评论 -
添加音乐
添加音乐<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script><style type="text/css"> /*音乐*/ .music{ position:fixed; top:5px; right:5px; z-index:9999;原创 2016-09-14 11:41:39 · 484 阅读 · 0 评论 -
滑动插件scroll.js
(function(){ var Roll = function(pgno,pageSize){ this.page_num = pgno?pgno:1; this.pageSize = pageSize?pageSize:3; this.isEnd = false; }; Roll.prototype = {原创 2016-09-14 17:29:57 · 1300 阅读 · 0 评论 -
Google浏览器 js调试
1.F12 审查元素,显示调试模式原创 2016-10-24 17:04:41 · 177 阅读 · 0 评论 -
$.ajaxFileUpload上传文件出现错误...问题总结
**加载报错:**ajaxfileupload.js:1 Uncaught ReferenceError: jQuery is not defined ** 上传报错:**Uncaught TypeError: $.ajaxFileUpload is not a function 原因: jquery.js,ajaxfileupload.js加载顺序不正确,应先加载 jquery.js,再加载a原创 2017-03-22 14:13:13 · 14233 阅读 · 0 评论 -
sweetalert弹框使用
注:类似js中的默认弹框alert,样式更加美化 sweetalert下载链接:http://t4t5.github.io/sweetalert/ 示例:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">原创 2017-04-27 11:45:16 · 1237 阅读 · 0 评论 -
js原生alert弹框美化
1、说明通过自定义方式美化弹框,使用alert弹框错误提示2、示例html代码片段:<!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/x原创 2017-07-28 12:01:20 · 15342 阅读 · 0 评论 -
photoswipe之图片浏览应用
1、说明 适用于移动端,点击图片放大,再次点击缩小,类似微信朋友圈浏览图效果 2、示例 注:本示例使用php语法 1)html代码片段 test.html<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd原创 2017-07-27 14:53:35 · 883 阅读 · 0 评论 -
转盘抽奖js实现
效果:点击抽奖按钮,转盘开始旋转数圈后停止 示例: 抽奖html代码:<!DOCTYPE html><html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="apple-touch-fullscreen" content="YES" /><原创 2017-07-19 18:39:23 · 14892 阅读 · 0 评论 -
ppt轮播效果实现
实现: 实现PPT轮播效果示例:<script src="http://www.lanrenzhijia.com/ajaxjs/jquery.min.js" type="text/javascript"></script> <script src="/assets/ppt/layer/layer.min.js" type="text/javascript"></script> <s原创 2017-12-27 17:33:45 · 1806 阅读 · 0 评论