整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
// 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小時內與您取得聯系。
