整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
始狀態(tài)
解鎖狀態(tài)
直接上代碼：
<!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>滑動解鎖</title>
<script src="js/jquery-1.11.0.js"></script>
<style>
*{
margin:0;
padding: 0;
box-sizing: border-box;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.outer{
position: relative;
margin:20px auto;
width: 200px;
height: 30px;
line-height: 28px;
border:1px solid #ccc;
background: #ccc9c9;
}
.outer span,.filter-box,.inner{
position: absolute;
top: 0;
left: 0;
}
.outer span{
display: block;
padding:0 0 0 36px;
width: 100%;
height: 100%;
color: #fff;
text-align: center;
}
.filter-box{
width: 0;
height: 100%;
background: green;
z-index: 9;
}
.outer.act span{
padding:0 36px 0 0;
}
.inner{
width: 36px;
height: 28px;
text-align: center;
background: #fff;
cursor: pointer;
font-family: "宋體";
z-index: 10;
font-weight: bold;
color: #929292;
}
.outer.act .inner{
color: green;
}
.outer.act span{
z-index: 100;
}
</style>
</head>
<body>
<div class="outer">
<div class="filter-box"></div>
<span>
滑動解鎖
</span>
<div class="inner">>></div>
</div>
</body>
<script>
$(function(){
$(".inner").mousedown(function(e){
var el=$(".inner"),os=el.offset(),dx,$span=$(".outer>span"),$filter=$(".filter-box"),_differ=$(".outer").width()-el.width();
$(document).mousemove(function(e){
dx=e.pageX - os.left;
if(dx<0){
dx=0;
}else if(dx>_differ){
dx=_differ;
}
$filter.css('width',dx);
el.css("left",dx);
});
$(document).mouseup(function(e){
$(document).off('mousemove');
$(document).off('mouseup');
dx=e.pageX - os.left;
if(dx<_differ){
dx=0;
$span.html("滑動解鎖");
}else if(dx>=_differ){
dx=_differ;
$(".outer").addClass("act");
$span.html("解鎖成功");
el.html('√');
}
$filter.css('width',dx);
el.css("left",dx);
})
})
})
</script>
</html>
效果圖：
lt;marquee></marquee>文字滑動
<marquee behavior="slide"></marquee>滑動
<marquee behavior="scroll"></marquee>預(yù)設(shè)卷動
<marquee behavior="alternate"></marquee>來回卷動
<marquee direction="down"></marquee>向下卷動
<marquee direction="up"</marquee>向上卷動
<marquee direction="right"></marquee>向右卷動
<marquee direction="left"></marquee>向左卷動
<marquee loop="2"></marquee>循環(huán)次數(shù), 默認值為：-1, 表示一直滾動下去。
<marquee width="180"></marquee>設(shè)定寬度
<marquee height="30"></marquee>設(shè)定高度
<marquee bgcolor="#FF0000"></marquee>設(shè)定背景顏色
<marquee scrollamount="30"></marquee>設(shè)定卷動距離(px)
<marquee scrolldelay="300"></marquee>設(shè)定卷動時間(毫秒)
<marquee hspace="100"></marquee> hspace 水平頁邊距
<marquee vspace="80"></marquee> vspace 垂直頁邊距
<marquee direction="left" behavior="scroll" width="300" height="400" bgcolor="#ff0" scrollAmount="50" scrollDelay="1000">
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>JQ</li>
<li>BOOTSTRAP</li>
</ul>
</marquee>以上整數(shù)涉及的單位是像素px
<marquee>
<img src="images/03.jpg" />
<img src="images/04.jpg" />
<img src="images/05.jpg" />
<img src="images/06.jpg" />
<img src="images/07.jpg" />
<img src="images/08.jpg" />
<img src="images/09.jpg" />
</marquee>marquee常用到的兩個事件：
onmouseout="this.start()" 當(dāng)鼠標(biāo)移出該區(qū)域時
onbmouseover="this.stop()" 當(dāng)鼠標(biāo)移入該區(qū)域時
友們，下午好！
都說一張美美的圖能為文章增色三分！
那如果是一個交互的圖片樣式 + 幾張美美圖呢？這能為文章增色多少呢？
比如這種（樣式ID：90298）
使用這種樣式，即能有效的展示圖片，還能縮小文章空間，而且還與讀者存在互動交互，想不想知道這種樣式怎么做出來呢？
上面兩種樣式都可以在樣式中心輸入ID搜索到。
但是，樣式中心的原樣式，都是四張圖片滑動的，直接進行換圖就可以使用了。
但如果要像三兒上面做的兩個樣式，一個是5張圖，一個是9張圖，就要進HTML進行修改了。
進入到“HTML”模式，找到<section .........> </section>這段代碼，先選擇Ctrl+C復(fù)制。
然后在此段代碼結(jié)尾處敲回車鍵換行，再選擇Ctrl+V粘貼。
粘貼幾次，樣式就會在原有四張的基礎(chǔ)上多出幾張，胖友們可以根據(jù)自己的需求進行多次粘貼。
進入到“HTML”模式，找到<img src=........./>這段代碼，先選擇Ctrl+C復(fù)制，然后在此段代碼結(jié)尾處，再Ctrl+V粘貼。
同上個樣式，粘貼幾次，樣式就會在原有四張的基礎(chǔ)上多出幾張，胖友們可以根據(jù)自己的需求進行多次粘貼。
為了樣式的美感，還是有三點建議給大家。
1、圖片請保持尺寸一致。否則會導(dǎo)致圖片層次不齊。
2、尺寸請500x500以上。否則可能會使圖片不清楚。
3、圖片大小盡可能小點。否則瀏覽時加載會不流暢。
更多好玩樣式，請進樣式中心搜索“滾動”
好了，本次教程就到這里~bye
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
