jqueryui可拖动相册照片墙效果代码
代码语言:html
所属分类:画廊相册
代码描述:jqueryui可拖动相册照片墙效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset='utf-8' /> <style> /* Meyer's Reset */ html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, em, font, img, small, strong, dl, dt, dd, ol, ul, li { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; } /* remember to define focus styles! */ :focus { outline: 0; } body { line-height: 1; color: black; background: white; } ol, ul { list-style: none; } /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse: separate; border-spacing: 0; } caption, th, td { text-align: left; font-weight: normal; } blockquote:before, blockquote:after, q:before, q:after { content: ""; } blockquote, q { quotes: "" ""; } /* END Meyer's Reset */ body { font: 13px/1.5 'Helvetica Neue',Arial,'Liberation Sans',FreeSans,sans-serif; background: #36b4dd; } h1 { font-size: 30px; } #container > h1 { padding: 10px; } h4 { font-size: 20px; padding-bottom: 10px; } #images li { float: left; background: #ececec; border: 1px solid #ccc; margin: 10px; width: 256px; padding: 10px; overflow: hidden; /* border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;*/ } #images li a { float: left; } /* .top { box-shadow:0 0 10px #000; -moz-box-shadow:0 0 10px #000; -webkit-box-shadow:0 0 30px #000; }*/ #images li div { width: 512px; overflow: hidden; } #images li .info { width: 246px; padding: 0 0 0 10px; float: left; </style> </head> <body> <div id="container"> <h1>点击下面的图片查看它!</h1> <ul id="images"> <li><div> <a href="3dOcean.htm"><img alt="3dOcean" src="//repo.bfw.wiki/bfwrepo/image/5d6538a375a7b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_256,h_160,/quality,q_90" /></a> </div> </li> <li><div> <a href="AudioJungle.htm"><img alt="AudioJungle" src="//repo.bfw.wiki/bfwrepo/image/5d65399a14ba1.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_256,h_160,/quality,q_90" /></a> </div> </li> <li><div> <a href="ActiveDen.htm"><img alt="ActiveDen" src="//repo.bfw.wiki/bfwrepo/image/5d653a6a2aea8.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_256,h_160,/quality,q_90" /></a> </div> </li> <li><div> <a href="GraphicRiver.htm"><img alt="GraphicRiver" src="//repo.bfw.wiki/bfwrepo/image/5d6539385ad28.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_256,h_160,/quality,q_90" /></a> </div> </li> <li><div> <a href="ThemeForest.htm"><img alt="ThemeForest" src="//repo.bfw.wiki/bfwrepo/image/600d657ecf5ce.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_256,h_160,/quality,q_90" /></a> </div> </li> <li><div> <a href="VideoHive.htm"><img alt="VideoHive" src="//repo.bfw.wiki/bfwrepo/image/5d65eaff5a217.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_256,h_160,/quality,q_90" /></a> </div> </li> </ul> </div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.17.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jqueryui-core-drag.js"></script> <script type="text/javascript"> //* var imgs; $(document).ready(function () { var drag = {}; $('h1').remove(); $('#images').append('<li id="ins.........完整代码请登录后点击上方下载按钮下载查看
网友评论0