整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
// js获取url传参参数
function GetQueryString(name) {
var reg=new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
// Location 对象是 Window 对象的一个部分，可通过 window.location 属性来访问。
var r=window.location.search.substr(1).match(reg); // search,查询？后面的参数，并匹配正则
/* 如果没有传参数的话，比如地址是 abc.html 后面没有参数，那强行输出调用结果有的时候会报错：所以要加一个判断 ，判断请求的参数是否为空，首先把值赋给一个变量，就不会报错了； */
if(r!=null)
return decodeURIComponent(r[2]);
return null;
}
// 调用方法：截取所需的url传参值
var rankSwitch=GetQueryString("rankSwitch");注意：jQuery里if判断不能按预期进入代码块，因为其值为string类的true；
我们在浏览购物网站，遇到喜欢的商品，总想点击图片放大后看看详细内容，那么放大是怎么做的呢，写一个简单的例子，带大家了解一下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>多种形式放大镜</title>
<!--hizoom css样式-->
<link rel="stylesheet" type="text/css" href="../css/hizoom/normalize.css" />
<link rel="stylesheet" type="text/css" href="../css/hizoom/htmleaf-demo.css">
<link rel='stylesheet' href='../css/hizoom/main.css'>
<link rel='stylesheet' href='../css/hizoom/hizoom.min.css'>
<!--jquery.zoom css样式-->
<link rel="stylesheet" type="text/css" href="../css/zoom/normalize.css" />
<link rel="stylesheet" type="text/css" href="../css/zoom/htmleaf-demo.css">
<style>
/*jquery.zoom必须样式，保证放大后的图片在原位置*/
.zoom{
display:inline-block;
position: relative;
}
.zoom:after {
content:'';
display:block;
width:33px;
height:33px;
position:absolute;
top:0;
right:0;
/*background:url(img/icon.png);*/
}
.zoom img {
display: block;
}
</style>
</head>
<body style="background-color: whitesmoke;text-align: center">
<!--hizoom 展示部分-->
<div style="margin-top: 5%;margin-left: 5%">
<div class='hizoom c2'>
<img src='../images/hizoom/hizoom-cs2.jpg'>
</div>
</div>
<!--jquery.zoom 展示部分-->
<div>
<div style="width: 900px;margin-left: 30%;margin-top: -350px">
<span class='zoom' id='zoom-ex1'>
<img src='/images/zoom/zoom-horse.jpg' width='400' height='320' alt='horse'/>
</span>
<span class='zoom' id='zoom-ex2'>
<img src='/images/zoom/zoom-nvpu.jpg' width='400' height='320' alt='nvpu'/>
</span>
<span class='zoom' id='zoom-ex3'>
<img src='/images/zoom/zoom-cat.jpg' width='400' height='320' alt='cat'/>
</span>
<span class='zoom' id='zoom-ex4'>
<img src='/images/zoom/zoom-shanhe.jpg' width='400' height='320' alt='shanhe'/>
</span>
</div>
</div>
<script src="../js/jquery-3.2.1.min.js" type="text/javascript"></script>
<script src='../js/hizoom/hizoom.min.js' type="text/javascript"></script>
<script src='../js/zoom/jquery.zoom.min.js'></script>
<script type="text/javascript">
/*hizoom插件*/
$('.c2').hiZoom({
width: 300,//放大镜容器的宽高（目前只支持正方形放大镜），会同时修改原始图片的展示大小
position: 'bottom',//被放大区域展示的位置
distance:10,//被放大区域和放大镜容器间的距离
background:'white',//放大镜背景色
opacity:0.7//放大镜透明度 0~1
});
/*jquery.zoom插件*/
$(function (){
$('#zoom-ex1').zoom();//鼠标移动上去即可放大
$('#zoom-ex2').zoom({ on:'grab' });//鼠标点击后不放手，移动鼠标
$('#zoom-ex3').zoom({ on:'click', duration:100});//鼠标点击后放手，可以移动，在点击恢复原状态
$('#zoom-ex4').zoom({ on:'toggle' });//点击指定位置放大
})
</script>
</body>
</html>hizoom放大镜插件的可用配置参数如下：
属性 | 描述 | 可选值 | 默认值 |
width | 放大镜容器的宽高 | 任何正数 | 400 |
position | 被放大区域的位置 | left|right|top|bottom | right |
background | 放大镜背景色 | 合法CSS颜色值 | #FFF |
opacity | 放大镜透明度 | 0~1（合法CSS值） | 0.7 |
distance | 被放大区域和放大镜容器间的距离 | 任何正数 | 20 |
jquery.zoom.js插件的可用配置参数有：
参数 | 默认值 | 描述 |
url | false | 显示大图的url地址。如果没有提供，默认使用第一个img子元素的url地址。 |
on | 'mouseover' | 触发图片放大的事件。可用类型有：mouseover, grab, click, toggle。 |
duration | 120 | 淡入淡出效果的持续时间。 |
target | false | 要放大图片的父容器的选择器或DOM元素。 |
touch | true | 是否允许移动触摸交互。 |
magnify | 1 | 1表示图片放大为原尺寸的2倍。 |
callback | false | 图片加载时的回调函数。 |
onZoomIn | false | 图片放大时的回调函数。 |
onZoomOut | false | 图片缩小时的回调函数。 |
你的赞和关注是对我最大的肯定，希望大家多多支持，谢谢大家。
s插件jquery可以很方便的对HTML的元素进行操作，比如一些元素的显示与隐藏，一些元素的动态效果等，今天就说一说通过jquery获取DIV元素的CSS属性，以及设置DIV元素的CSS属性的方法。
jq获取DIV元素的属性值，可以使用css()方法
例：利用jquery获取DIV元素的宽
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<style>
#mochu{
margin: 10px;
padding: 10px;
color: red;
height: 30px;
width: 40px;
}
</style>
<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>
<div id="mochu">飞鸟慕鱼博客<br/>http://www.feiniaomy.com</div>
<script>
var h=$('#mochu').css('width');
console.log(h);
</script>
</body>
</html>
打印结果：
40px
例：利用jquery获取DIV元素的高
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>
<div id="mochu">飞鸟慕鱼博客<br/>http://www.feiniaomy.com</div>
<script>
var h=$('#mochu').css('height');
console.log(h);
</script>
</body>
</html>
打印结果：
42px
注意：
1、如果给DIV元素定义了CSS属性的值，则直接输出定义的CSS值
2、如果未定义DIV元素的CSS属性值，则输出浏览器渲染后DIV的默认值
在JQ中可以通过CSS方法获取DIV元素的CSS属性值，也可以设置或改变元素的CSS属性值
例：利用jq改变字体的颜色
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>
<div id="mochu">飞鸟慕鱼博客<br/>http://www.feiniaomy.com</div>
<script>
$('#mochu').css('color','red');
</script>
</body>
</html>
结果如图：
注：改变DIV中字体的颜色其实就是给这个DIV加入了一个 color 的CSS属性，并把属性值设置成 red（红色）
在浏览器中查看元素就可以发现加入的CSS属性
例：给DIV元素加入多个CSS属性
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>
<div id="mochu">飞鸟慕鱼博客<br/>http://www.feiniaomy.com</div>
<script>
$('#mochu').css({'color':'red','heigth':'40px','width':'40px'});
</script>
</body>
</html>
在浏览器中审核元素，如下图
可以发现，对过JQ设置的CSS属性都写到了DIV上
注意：利用JQ的CSS()方法设置或添加多个CSS属性的时候，要以{'':'','':''}这种数据格式写入。
*请认真填写需求信息，我们会在24小时内与您取得联系。
