Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
Show and Hide Example
css
html, body { padding: 0px; margin: 0px; background: #222222; font-family: 'Raleway', sans-serif; color: #FFF; height: 100%; } .container { z-index: 1; max-width: 500px; margin: 100px auto; background: #FFF; box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.5); color: rgba(0, 0, 0, 0.8); border-radius: 3px; } .top { padding: 30px 30px 22px 30px; ccborder-bottom: 1px solid #ddd; background: #FFF; box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25); z-index: 10; display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; } .top .title { text-transform: capitalize; width: 100%; } .top .icons { text-align: right; display: -webkit-box; display: -ms-flexbox; display: flex; vertical-align: top; width: 180px; top: -3px; position: relative; } .top .icons .icon { width: 25px; height: 25px; box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25); margin: 0px 5px; border-radius: 100%; background: #555; } .view { z-index: 0; position: relative; height: 300px; } .view .code, .view .example { position: absolute; top: 0px; left: 0px; background-image: url("http://www.jq22.com/tp/6a8d4cf1-20d5-4d5c-8d8b-ff970b47da82.png"); background-color: #f3f3f3; background-repeat: no-repeat; background-position: cover; background-size: 500px; width: 100%; height: 100%; } .view .example { background-image: url("http://www.jq22.com/tp/78fe4ac2-3d5d-433a-9bc0-c2c47c5a9c41.png"); } .view .handle { position: absolute; width: 10px; height: 100%; background: #fff; ccborder-left: 1px solid #cdcdcd; ccborder-right: 1px solid #cdcdcd; box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25); left: 50%; top: 0px; cursor: -webkit-grab; cursor: grab; z-index: 10; } .view .handle:before { content: ''; border-radius: 100%; width: 50px; height: 50px; top: 50%; background: #FFF; position: absolute; ccborder: 1px solid #cdcdcd; box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.25); left: 50%; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } .view .handle:after { content: ''; width: 4px; height: 24px; background: #cdcdcd; position: absolute; top: 138px; left: -6px; border-radius: 0px; box-shadow: 9px 0px 0px #cdcdcd, 18px 0px 0px #cdcdcd; } .view .handle .tracker { position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background: #000; opacity: 0; display: none; z-index: 1000; }
JavaScript
var app = { html: { handle: document.querySelectorAll('.handle')[0], tracker: document.querySelectorAll('.handle .tracker')[0], code: document.querySelectorAll('.code')[0], view: document.querySelectorAll('.view')[0], example: document.querySelectorAll('.example')[0], container: document.querySelectorAll('.container')[0] }, dragging: false, init: function(){ this.addEvents() this.move(250) }, addEvents: function(){ var that = this this.html.handle.addEventListener('mousedown', function(){ that.html.tracker.style.display = 'block' that.dragging = true }) this.html.tracker.addEventListener('mouseup', function(){ that.html.tracker.style.display = 'none' that.dragging = false }) this.html.tracker.addEventListener('mousemove', function(event){ var cBox = that.html.container.getBoundingClientRect(); var hBox = that.html.handle.getBoundingClientRect(); var newX = event.clientX-cBox.left if(newX > cBox.width-hBox.width) newX = cBox.width-hBox.width if(newX < 0) newX = 0 that.move(newX) }) }, move: function(x){ this.html.handle.style.left = x+'px' this.html.example.style.width = (x)+'px' } } app.init();
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载,需支付20jQ币
开通后,在线代码模块中所有代码可终身免费下!
您已开通在线代码永久免费下载,关闭提示框后,点下载代码可直接下载!
您已经开通过在线代码永久免费下载
对不起,您的jQ币不足!可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>显示隐藏-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style>
</style> </head> <body>
<script>
</script>
</body> </html>
2012-2021 jQuery插件库版权所有
jquery插件
|
jq22工具库
|
网页技术
|
广告合作
|
在线反馈
|
版权声明
沪ICP备13043785号-1
浙公网安备 33041102000314号