<html>
<head>
<title>jQuery内容滚动条拖拽滑动解锁代码 - 网页模板</title>
<meta charset="utf-8">
<link href="lib/jasmine.css" type="text/css" rel="stylesheet">
<link href="lib/font-awesome/css/font-awesome.min.css" type="text/css" rel="stylesheet">
<script src="lib/jquery-1.10.2.js"></script>
<script src="lib/jquery.simulate.js"></script>
<script src="lib/jasmine.js"></script>
<script src="lib/jasmine-jsreporter.js"></script>
<script src="lib/jasmine-html.js"></script>
<script src="lib/jasmine-jquery.js"></script>
<link href="src/dragdealer.css" type="text/css" rel="stylesheet">
<script src="src/dragdealer.js"></script>
<script src="spec/helpers.js"></script>
<script src="spec/matchers.js"></script>
<script src="spec/optionsSpec.js"></script>
<script src="spec/draggingSpec.js"></script>
<!--[if gt IE 9]><!-->
<script src="spec/touchDraggingSpec.js"></script>
<!--<![endif]-->
<script src="spec/callbacksSpec.js"></script>
<script src="spec/apiSpec.js"></script>
<script src="spec/resizingSpec.js"></script>
<script src="spec/eventsSpec.js"></script>
<script src="spec/setup.js"></script>
<script src="spec/browser-runner.js"></script>
<link href="demo/style/index.css" type="text/css" rel="stylesheet">
<link href="demo/style/jasmine-reporter.css" type="text/css" rel="stylesheet">
<link href="demo/style/demos.css" type="text/css" rel="stylesheet">
<script src="demo/script/index.js"></script>
<script src="demo/script/demos.js"></script>
</head>
<body>
<div id="main-slider" class="dragdealer">
<div class="specs-tab">
<ul class="specs-bullets"></ul>
<p class="specs-summary"></p>
</div>
<div class="handle red-bar">
<h1><strong>Dragdealer</strong>.js</h1>
</div>
</div>
<div id="content">
<div class="content-slides">
<div class="slide demo">
<div class="inner-wrapper">
<h3 id="demos">Demos1</h3>
<div id="demo-simple-slider" class="dragdealer">
<div class="handle red-bar">drag me</div>
</div>
<h3 id="demos">Demos2</h3>
<div id="just-a-slider" class="dragdealer">
<div class="handle red-bar">
<span class="value"></span>%
</div>
</div>
<h3 id="demos">Demos3</h3>
<div class="content-scroller">
<div id="content-scroller" class="dragdealer">
<div class="handle red-bar">
<span class="value"><i class="fa fa-bars"></i></span>
</div>
</div>
<div class="content-mask">
<div class="content-body">
<p>It was all a dream<br>
I used to read Word Up magazine<br>
Salt 'n' Pepa and Heavy D up in the limousine<br>
Hangin pictures on my wall<br>
Every Saturday Rap Attack, Mr. Magic, Marley Marl<br>
I let my tape rock 'til my tape popped<br>
Smoking weed and Bambu, sipping on Private Stock<br>
Way back, when I had the red and black lumberjack<br>
With the hat to match<br>
Remember Rappin Duke? duh-ha, duh-ha<br>
You never thought that hip hop would take it this far<br>
Now I'm in the limelight cause I rhyme tight<br>
Time to get paid, blow up like the World Trade<br>
Born sinner, the opposite of a winner<br>
Remember when I used to eat sardines for dinner<br>
Peace to Ron G, Brucey B, Kid Capri<br>
Funkmaster Flex, Lovebug Starski (wassup)<br>
I'm blowing up like you thought I would<br>
Call the crib, same number same hood (that's right)<br>
It's all good (it's all good)<br>
And if you don't know, now you know, nigga</p>
<p>I made the change from a common thief<br>
To up close and personal with Robin Leach<br>
And I'm far from cheap, I smoke skunk with my peeps all day<br>
Spread love, it's the Brooklyn way<br>
The Moet and Alizé keep me pissy<br>
Girls used to diss me<br>
Now they write letters cause they miss me<br>
I never thought it could happen, this rapping stuff<br>
I was too used to packing gats and stuff<br>
Now honeys play me close like butter play toast<br>
From the Mississippi down to the east coast<br>
Condos in Queens, indo for weeks<br>
Sold out seats to hear Biggie Smalls speak<br>
Living life without fear<br>
Putting 5 karats in my baby girl's ears<br>
Lunches, brunches, interviews by the pool<br>
Considered a fool cause I dropped out of high school<br>
Stereotypes of a black male misunderstood<br>
And it's still all good<br>
Uh...and if you don't know, now you know, nigga</p>
<p>Super Nintendo, Sega Genesis<br>
When I was dead broke, man I couldn't picture this<br>
50-inch screen, money green leather sofa<br>
Got two rides, a limousine with a chauffeur<br>
Phone bill about two G's flat<br>
No need to worry, my accountant handles that<br>
And my whole crew is lounging<br>
Celebrating every day, no more public housing<br>
Thinking back on my one-room shack<br>
Now my mom pimps a Ac with minks on her back<br>
And she loves to show me off, of course<br>
Smiles every time my face is up in The Source<br>
We used to fuss when the landlord dissed us<br>
No heat, wonder why Christmas missed us<br>
Birthdays was the worst days<br>
Now we sip champagne when we thirst-ay<br>
Uh, damn right I like the life I live<br>
Cause I went from negative to positive<br>
And it's all</p>
<p>...and if you don't know, now you know, niggaaa</p>
</div>
</div>
</div>
<h3 id="demos">Demos4</h3>
<div class="slide-to-unlock old-slider">
<div id="slide-to-unlock-old" class="dragdealer">
<div class="slide-text">slide to unlock</div>
<div class="handle"></div>
</div>
</div>
<h3 id="demos">Demos5</h3>
<div class="slide-to-unlock new-slider">
<div id="slide-to-unlock-new" class="dragdealer">
<div class="handle">
<div class="slide-text"><i class="fa fa-angle-right"></i> slide to unlock</div>
</div>
</div>
</div>
<h3 id="demos">Demos6</h3>
<div id="image-carousel" class="dragdealer">
<div class="handle">
<div class="slide img1">
<div class="info">
<p class="title">Aston Martin DB4</p>
<p class="description"><strong>1959</strong> — 3.7L, 240hp</p>
</div>
</div>
<div class="slide img2">
<div class="info">
<p class="title">Mercedes-Benz 300SL</p>
<p class="description"><strong>1956</strong> — 2996cc, 212-222hp</p>
</div>
</div>
<div class="slide img3">
<div class="info">
<p class="title">Jaguar E-Type</p>
<p class="description"><strong>1966</strong> — 3.8L, 265bhp</p>
</div>
</div>
<div class="slide img4">
<div class="info">
<p class="title">Maserati A6</p>
<p class="description"><strong>1950</strong> — 2L, 120bhp</p>
</div>
</div>
</div>
</div>
<h3 id="demos">Demos7</h3>
<div id="canvas-mask" class="dragdealer">
<div class="handle">
<div class="page">
<p class="menu">
<a href="#" data-x="0" data-y="1">Two-dimensional</a> |
<a href="#" data-x="1" data-y="1">Elastic</a> |
<a href="#" data-x="1" data-y="0">Interactive</a> |
<strong>Open</strong>
</p>
<p class="body">
Dragdealer is <strong>open source</strong>, <br >
see you on <a href="https://github.com/skidding/dragdealer">GitHub</a>
</p>
</div>
<div class="page">
<p class="menu">
<a href="#" data-x="0" data-y="1">Two-dimensional</a> |
<a href="#" data-x="1" data-y="1">Elastic</a> |
<strong>Interactive</strong> |
<a href="#" data-x="0" data-y="0">Open</a>
</p>
<p class="body">
The dragged surface can host <strong>rich content</strong>, <br>
including links for scrolling inside itself
</p>
</div>
<div class="page">
<p class="menu">
<strong>Two-dimensional</strong> |
<a href="#" data-x="1" data-y="1">Elastic</a> |
<a href="#" data-x="1" data-y="0">Interactive</a> |
<a href="#" data-x="0" data-y="0">Open</a>
</p>
<p class="body">
The masked content can be discovered through <br>
both <strong>horizontal and vertical dragging</stro