可拖动图片弹出层插件layer.js.zip资源-CSDN文库

共15个文件

jpg：6个

gif：3个

png：2个

版权申诉

jQuery

html5

javascript

94 浏览量 2022-11-26 11:03:05 上传评论收藏 404KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

可拖动图片弹出层插件layer.js.zip （15个子文件）

可拖动图片弹出层插件layer.js

jiaoben4355

img

2.jpg 12KB

1.jpg 14KB

3.jpg 75KB

5.jpg 168KB

4.jpg 54KB

layer

skin

layer.css 14KB

default

loading-2.gif 2KB

icon.png 11KB

loading-1.gif 701B

icon-ext.png 6KB

loading-0.gif 6KB

layer.js 19KB

jquery-1.8.3.min.js 91KB

index.html 3KB

可拖动图片弹出层插件layer.js.jpg 30KB

<!doctype html> <html> <head> <meta charset="utf-8"> <title>可拖动图片弹出层插件layer.js - 网页模板</title> <script src="layer/jquery-1.8.3.min.js"></script> <script src="layer/layer.js"></script> <style> html{background-color:#E3E3E3; font-size:14px; color:#000; font-family:'微软雅黑'} a,a:hover{ text-decoration:none;} pre{font-family:'微软雅黑'} .box{padding:20px; background-color:#fff; margin:50px 100px; border-radius:5px;} .box a{padding-right:15px;} #about_hide{display:none} .layer_text{background-color:#fff; padding:20px;} .layer_text p{margin-bottom: 10px; text-indent: 2em; line-height: 23px;} .button{display:inline-block; *display:inline; *zoom:1; line-height:30px; padding:0 20px; background-color:#56B4DC; color:#fff; font-size:14px; border-radius:3px; cursor:pointer; font-weight:normal;} .photos-demo img{width:200px;} </style> </head> <body> <div class="box"> <pre> <strong>【注意事项】</strong> 一、使用时，请把文件夹layer整个放置在您站点的任何一个目录，只需引入layer.js即可，除jQuery外，其它文件无需再引入。二、如果您的js引入是通过合并处理或者您不想采用layer自动获取的绝对路径，您可以通过layer.config()来配置（详见官网API页）三、jquery需1.8+ 四、更多使用说明与演示，请参见layer官网。五、使用时请务必保留来源，请勿用于违反我国法律的web平台。六、layer遵循LGPL协议，将永久性提供无偿服务。版权最终解释权：贤心。 </pre> </div> <div class="box"> <h2 style="padding-bottom:20px;">扩展模块：图片查看器（相册层）</h2> <div id="photosDemo" class="photos-demo">  <img layer-src="img/1.jpg" layer-pid="" src="img/1.jpg" alt="layer宣传图"> <img layer-src="img/2.jpg" layer-pid="" src="img/2.jpg" alt="我入互联网这五年"> <img layer-src="" layer-pid="" src="img/3.jpg" alt="微摄影"> <img layer-src="img/4.jpg" layer-pid="" src="img/4.jpg" alt="三清山"> <img layer-src="img/5.jpg" layer-pid="" src="img/5.jpg" alt="国足"> </div> </div> <script> ;!function(){ //页面一打开就执行，放入ready是为了layer所需配件（css、扩展模块）加载完毕 layer.ready(function(){ //官网欢迎页 layer.open({ type: 2, //skin: 'layui-layer-lan', title: 'layer弹层组件', fix: false, shadeClose: true, maxmin: true, area: ['1000px', '500px'], content: 'http://www.moobnn.com/', end: function(){ layer.tips('试试相册模块？', '#photosDemo', {tips: 1}) } }); //layer.msg('欢迎使用layer'); //使用相册 layer.photos({ photos: '#photosDemo' }); }); //关于 $('#about').on('click', function(){ layer.alert(layer.v + ' - 贤心出品 sentsin.com'); }); }(); </script> <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"> <p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p> <p>来源：<a href="http://layer.layui.com/" target="_blank">layer</a></p> </div> </body> </html>

评论收藏

内容反馈

版权申诉