jquery
夏末_阳光依然耀眼
一个人,走在陌生的城市,听伤感的音乐,看陌生的风景。我们都在寻找,人生就是寻找爱的过程,每个人都会遇到三种人,你爱的,爱你的,与你共度一生的。并不是每一对有缘相爱的恋人,都有相守一生的缘分;也许这一场恋爱是情深缘浅,下一场就缘定终生,去爱吧,像不曾受伤一样。
展开
-
原生js ajax封装post,get方法
方法一:function ajax(method, url, callback, data, flag) { var xhr; flag = flag || true; method = method.toUpperCase(); if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else { xhr = new ActiveXObject('Microsoft.转载 2021-08-26 10:48:32 · 298 阅读 · 0 评论 -
echarts dataZoom动态控制
//方法一:x轴数据>20条显示滚动条,否则不显示dataZoom: [{ type: 'slider', show: false, start: 0, endValue: 20, filterMode: 'empty', ..原创 2021-04-07 10:45:28 · 1857 阅读 · 1 评论 -
js获取前7天日期,包含当天
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta http-equiv="Content-Language" content="zh-cn"><title>js获取前7天日期,包含当天</title></head><body></body></html>.转载 2020-08-07 16:05:20 · 479 阅读 · 0 评论 -
js可控旋转音乐播放按钮
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>可控旋转音乐播放按钮</title><style>*{ margin:0; padding:0; list-style:none;}#lanren #audio-btn{width: 44px;heig.转载 2020-07-13 14:16:38 · 865 阅读 · 1 评论 -
解决js鼠标滑轮Unable to preventDefault inside passive event listener due to target being treated as passiv
// 解决缩放报错 $(document).on('mousewheel DOMMouseScroll',onMouseScroll,{passive: false}); function onMouseScroll(e){ // 判断默认行为是否可以被禁用 if (event.cancelable) { // 判断默认行为是否已经被禁用 if (!event.defaultPrevented) { event.preventDefault(); } } }.原创 2020-06-28 18:19:44 · 853 阅读 · 0 评论 -
js 批量空格替换成
<textarea contenteditable="true" id="t" onkeyup="this.value=this.value.replace(/\s+/g,'')" rows="3" placeholder="请填写详细地址,不超过100个字"></textarea><script> var d = document.getElem...原创 2019-12-28 11:41:05 · 1028 阅读 · 0 评论 -
jQuery弹出层垂直居中效果
<!DOCTYPE html><html> <head> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <title>jQuery弹出层垂直居中效果</title> <st原创 2018-08-01 00:15:24 · 218 阅读 · 0 评论 -
jquery背景渐变切换banner
<script type="text/javascript">$(document).ready(function(){ var $tab_li = $('#tab ul li'); $tab_li.hover(function(){ $(this).addClass('selected').siblings().removeClass('selected'); var ...转载 2018-06-27 19:00:56 · 691 阅读 · 0 评论 -
iOS系统及微信中audio自动播放
//音乐播放暂停 $("#audioBtn").click(function(){ if(music.paused){music.play(); $("#audioBtn").removeClass("pause").addClass("play"); }else{music.pause(); $("#audioBtn").removeClass("play").addC转载 2017-12-19 16:30:18 · 496 阅读 · 0 评论 -
TweenMax.js背景位移动画
背景动画* { margin: 0; padding: 0;}.fibers { display: block; width: 275px; height: 600px; background: url(images/spectra-wire-sprite.png) no-repeat 0 0 transparent;} var st=0; TweenM原创 2018-01-11 15:05:47 · 971 阅读 · 0 评论 -
做网站经常会用到的一些js效果
1.返回顶部 $(function(){ $('.top').hide(); $(window).scroll(function() { if($(window).scrollTop() >= 100){ $('.top').fadeIn(300);转载 2017-11-27 10:54:58 · 353 阅读 · 0 评论 -
jquery搜索框点击下拉,不选择鼠标移开自动隐藏
<!--样式--><style type="text/css">.search{ height: 48px; background: #fff; margin-bottom: 21px;}.sosleft{ float: left; width: 828px; border: solid 1px #fff; height: 46px; }.sosleft inpu...原创 2018-11-24 22:07:34 · 388 阅读 · 0 评论 -
jquery封装选项卡
<style type="text/css"> ul,li,div{ margin:0; padding:0;} ul,li{ list-style:none;} .tabWrap{ width:450px; margin:0 auto 50px; overflow:hidden;} .tab{ background:#F93; overflow:hidden; wid...原创 2018-11-24 22:19:51 · 168 阅读 · 0 评论 -
video.js 结合 flv.js播放flv视频
<!DOCTYPE html><html lang="en"><head> <title>video</title> <!-- Video.js --> <link href="https://unpkg.com/video.js/dist/video-js.css&转载 2018-11-23 15:45:34 · 26356 阅读 · 4 评论 -
localstorage本地存储样式实例
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8" /> <title>localstorage本地存储样式实例</title> <script src="http://libs.bai原创 2018-12-06 11:24:15 · 319 阅读 · 1 评论 -
videojs 播放.M3U8格式视频
1.原生video标签网页端只支持MP4、OGG、WebM的视频格式2.直播的视频格式一般为.m3u8,如果不行对video进行格外处理,可以采用video.js插件3.video.js须配合第三方的videojs库videojs-contrib-hls.js来播放.m3u8视频<!DOCTYPE html><html lang="en"> <he...转载 2019-03-15 17:27:23 · 24493 阅读 · 5 评论 -
Web前端NW.js开发桌面应用教程
最近要做个桌面的应用,用起来也方便。找了一圈发现NW.js挺容易上手,分享给大家。NW.js 官网https://nwjs.io/ 1.下载适合当前版本的js 【这里下载的SDK版本,方便后续调试】 2.解压到本地 3.构建自己的project index.html和package.json这两个文件必须要有的。 4.把项目放到n...转载 2019-05-23 17:06:53 · 817 阅读 · 0 评论 -
解决后台iframe框架刷新跳转问题
//菜单点击$(".J_menuItem").on('click',function() { var iframe = $("#J_iframe").contents().find("#Login").length; if (iframe>0) { window.location.href = '/admin/login'; } else { ...原创 2019-07-20 13:57:17 · 445 阅读 · 0 评论 -
可控制导航下拉方向的jQuery下拉菜单代码
可控制导航下拉方向的jQuery下拉菜单代码:可控制导航下拉方向的jQuery下拉菜单代码*{ margin:0; padding:0; list-style:none;}.nav{ width:700px; height:30px; line-height:30px; margin:200px auto;}.nav li a{ color:#fff; text-decora转载 2016-11-03 10:58:30 · 417 阅读 · 0 评论 -
html2canvas.js截取网页保存为图片
*{ margin: 0; padding: 0;font:12px/1.5 "Microsoft YaHei",arial,simsun} img{ max-width:100%;} html,body{ width:100%; height: 100%;} .main{ position: relative; top: 50%; left: 50%; width: 80%;min-hei原创 2017-11-30 15:00:19 · 17104 阅读 · 1 评论 -
textarea 自适应内容高度
$('textarea').each(function(){ this.setAttribute('style', 'height:' + (this.scrollHeight) + 'px;overflow-y:hidden;'); }).on('input',function(){ this.style.height = 'auto'; this.style.hei原创 2017-09-01 15:15:56 · 277 阅读 · 0 评论 -
jquery带定时器的多个下拉菜单
jquery带定时器的多个下拉菜单无标题文档*{ margin:0; padding:0; list-style:none;}.list{ width:800px;}.pl-text{padding: 20px 0; font-size: 14px; height: 21px;}.pl-fr{float: right; position: relative原创 2016-11-02 09:50:13 · 541 阅读 · 0 评论 -
jquery多个鼠标移上显示下拉菜单
jquery多个鼠标移上显示下拉菜单: demo <!-- jQuery(document).ready(function ($){ //$(".subCategory").hide(); $(".down").each(function(i,obj){ $(obj).hover ( function原创 2016-11-02 09:25:48 · 628 阅读 · 0 评论 -
jquery简单菜单下拉导航
jquery简单菜单下拉导航代码如下:复制运行即可简单导航菜单*{ margin:0; padding:0; list-style:none;}#nav { margin: 0; padding: 0; list-style: none; border-left: 1px solid #d5dce8; border-right: 1px solid #d5原创 2016-11-02 09:22:55 · 543 阅读 · 0 评论 -
原生JS实现中文简繁切换
原生JS实现中文简繁切换:原生JS实现中文简繁切换 - 站长素材* { margin: 0; padding: 0; list-style: none; border: 0;}body { background: #eee;}.content { padding: 0 15px; width: 650px; margin: 50px auto; bord转载 2016-11-03 11:08:04 · 9774 阅读 · 0 评论 -
jquery简单树形菜单代码
jquery简单树形菜单代码:jquery的树形菜单代码 @charset "utf-8";body{font-family:Arial, Helvetica, sans-serif;font-size:12px;font-weight:normal;color:#666666;margin:0px;padding:0px;background:#fff;}p,from,h1原创 2016-11-03 10:54:50 · 755 阅读 · 0 评论 -
可控制导航下拉方向的jQuery下拉菜单代码
可控制导航下拉方向的jQuery下拉菜单代码*{ margin:0; padding:0; list-style:none;}.nav{ width:700px; height:30px; line-height:30px; margin:200px auto;}.nav li a{ color:#fff; text-decoration:none; display:block; flo原创 2016-10-09 10:50:18 · 541 阅读 · 0 评论 -
jquery实现的一个超级简单的下拉菜单
nav a { text-decoration: none; } nav > ul > li { float: left; text-align: center; padding: 0 0.5em; } nav li ul.sub-menu { display: none; padding-left: 0 !important; } .sub-menu li { co原创 2016-10-09 10:33:00 · 324 阅读 · 0 评论 -
jquery实现input password 提示信息兼容ie
$(document).ready(function(){ $("#pwd").blur(function(){ if($(this).val()==""){ $(this).val("请输入密码"); if($(this).attr("type") == "password"){ $(this).hide(); $('#pwd_txt')原创 2016-07-14 11:03:08 · 473 阅读 · 0 评论 -
最简单jquery实现带左右箭头和数字焦点的图片轮播
直接上代码(请自行引入jquery):轮播body{font-family:Arial, Helvetica, sans-serif;font-size:12px;font-weight:normal;color:#666666;margin:0px;padding:0px;background:#fff;}p,from,h1,h2,h3,h4,h5,h6{margin:0px;转载 2016-11-18 17:52:23 · 4182 阅读 · 0 评论 -
jquery input placeholder支持兼容ie7,ie8
/* * jQuery placeholder, fix for IE6,7,8,9 * @author byh */var JPlaceHolder = { //检测 _check : function(){ return 'placeholder' in document.createElement('input'); }, //初始化原创 2016-12-14 09:47:42 · 1836 阅读 · 0 评论 -
jquery li循环轮播切换
jquery li循环轮播切换效果,请自行引入jqueryjquery li循环轮播切换 $(document).ready(function(){ $(".jhtab ul").delegate("li","click",function(){ var index = $(this).原创 2017-08-23 12:19:25 · 2915 阅读 · 0 评论 -
jquery展开收缩列表
Document *{margin:0;padding:0;} body{max-width: 640px; margin: 0 auto; font-family: 'Microsoft Yahei'} .box{ overflow: hidden; } .box dl{ overf转载 2017-08-21 11:24:25 · 363 阅读 · 0 评论 -
绝对定位元素随滚动条滑动无延时不闪烁的解决办法!
绝对定位元素随滚动条滑动不闪烁body { background: #eee; margin: 0; padding: 0;}.container { width: 1000px; height: 5000px; background: #ddd; margin: 0 auto;}.wrapper { height: 400px; width: 998px; bac转载 2017-06-28 12:04:33 · 2221 阅读 · 0 评论 -
jquery的搜索框输入提示页面
搜索body, ul, li { margin: 0; padding: 0;}body { font-size: 12px; font-family: sumsun, arial; color: #666666; background: #FFFFFF;}.gover_search { position: relative; z-index: 99; height:原创 2017-07-11 10:43:54 · 405 阅读 · 0 评论 -
jQuery二级下拉菜单 下拉箭头翻转动画
附上用到的图片:原文地址:http://www.html5tricks.com/jquery-dropdown-menu-icon.html转载 2017-04-21 11:21:37 · 3093 阅读 · 0 评论 -
jquery点击下拉菜单鼠标移开隐藏(可模拟下拉框)
$(document).ready(function(){ $("ul.subnav").parent().append(""); $("ul.topnav li span").click(function() { $(this).parent().find("ul.subnav").slideDown('fast').show(); $(this).parent().hover原创 2017-03-08 17:12:42 · 2014 阅读 · 0 评论 -
jquery简单实现tab选项卡效果
最简单选项卡div{margin:0;padding:0;width:184px;height:200px;border:1px solid #ccc;display:none;}.tab{margin:0;padding:0;list-style:none;width:200px;overflow:hidden;}.tab li{float:left;width:60px;height转载 2016-12-15 17:02:43 · 436 阅读 · 0 评论 -
jquery全局hover方法,支持全局调用
jquery全局hover方法,支持全局调用$.fn.obj2hover = function(){ var items = $(this); $.each(items, function(index, item){ $(item).hover(function(){ $(this).addClass("hover");原创 2016-07-13 11:59:33 · 585 阅读 · 0 评论