带旋转的图文展示附源码

最新推荐文章于 2019-11-24 19:43:39 发布

最新推荐文章于 2019-11-24 19:43:39 发布 · 181 阅读

文章标签：

#javascript #xhtml #ViewUI

很流行的瀑布流展示

并且当鼠标悬浮旋转图片 div

外加很酷的jquery展示......

Html代码

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"/>
　<metaname="viewport"content="width=device-width,initial-scale=1"/>
<title>jQueryGridGalleryPlugin</title>
<linkrel="stylesheet"href="css/reset.css">
<linkrel="stylesheet"href="css/style.css">
<linkrel="stylesheet"href="css/animation.css">
</head>
<body>
<divid="header">
<h1>jQuerypintereststylegallery</h1>
<p>Supportthefront&backdivcontainertransition,optionallightbox.</p>
</div>
<divid="largeImage"class="largeContainer"></div>
<divid="main">
<ulid="tiles">
<lidata-large="images/lychee/img1.jpg">
<divclass="front">
<imgsrc="images/thumbs/lychee/img1.jpg"width="200"height="134"/><p>Shortimagecaption.</p>
</div>
<divclass="back">
<h4>ImageCaption</h4>
<p>Loremipsumdolorsitamet,consecteturadipisicingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.Utenimadminimveniam.</p>
</div>
</li>
<lidata-large="images/lychee/img3.jpg">
<divclass="front">
<imgsrc="images/thumbs/lychee/img3.jpg"width="200"height="298"/>
</div>
<divclass="back">
<h4>ImageCaption</h4>
<p>Loremipsumdolorsitamet,consecteturadipisicingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.Utenimadminimveniam.Loremipsumdolorsitamet,consecteturadipisicingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.Utenimadminimveniam,quisnostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat.Duisauteiruredolorin.</p>
</div>
</li>
<lidata-type="video"data-large="http://player.vimeo.com/video/31215588?title=0&byline=0&portrait=0"data-width="960"data-height="480">
<divclass="front">
<imgsrc="images/thumbs/vimeo.jpg"width="200"height="133">
</div>
<divclass="back">
<h4>ImageCaption</h4>
<p>Loremipsumdolorsitamet,consecteturadipisicingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.Utenimadminimveniam.</p>
</div>
</li>
<lidata-large="images/lychee/img2.jpg">
<divclass="front">
<imgsrc="images/thumbs/lychee/img2.jpg"width="200"height="134"/><p><strong>Optionalfrontandbackdivcontainer</strong><br/>seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.Utenimadminimveniam.</p>
</div>
<divclass="back">
<h4>ImageCaption</h4>
<p>Loremipsumdolorsitamet,consecteturadipisicingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.Utenimadminimveniam.</p>
</div>
</li>
<lidata-large="images/lychee/img4.jpg">
<divclass="front">
<imgsrc="images/thumbs/lychee/img4.jpg"width="200"height="298"/>
</div>
<divclass="back">
<h4>ImageCaption</h4>
<p>Loremipsumdolorsitamet,consecteturadipisicingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.Utenimadminimveniam.</p>
</div>
</li>
<lidata-large="images/lychee/img6.jpg">
<divclass="front">
<imgsrc="images/thumbs/lychee/img6.jpg"width="200"height="134"/>
</div>
<divclass="back">
<h4>ImageCaption</h4>
<p>Loremipsumdolorsitamet,consecteturadipisicingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.Utenimadminimveniam.</p>
</div>
</li>
<lidata-large="images/lychee/img7.jpg">
<divclass="front">
<imgsrc="images/thumbs/lychee/img7.jpg"width="200"height="298"/>
</div>
<divclass="back">
<h4>ImageCaption</h4>
<p>Loremipsumdolorsitamet,consecteturadipisicingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.Utenimadminimveniam.</p>
</div>
</li>
<!--
<lidata-large="images/lychee/img8.jpg">
<imgsrc="images/thumbs/lychee/img8.jpg"width="200"height="134"/>
</li>
-->
<lidata-large="images/flickr_images/img3.jpg">
<imgsrc="images/thumbs/flickr_images/img3.jpg"width="200"height="133"/>
</li>
<lidata-large="images/flickr_images/img4.jpg">
<imgsrc="images/thumbs/flickr_images/img4.jpg"width="200"height="300"/>
</li>
<lidata-large="images/flickr_images/img5.jpg">
<imgsrc="images/thumbs/flickr_images/img5.jpg"width="200"height="133"/>
</li>
<lidata-type="video"data-large="http://www.youtube.com/embed/Dbs504zDN6I?rel=0"data-width="800"data-height="420">
<divclass="front">
<imgsrc="images/thumbs/y2.jpg"width="200"height="141">
</div>
<divclass="back">
<h4>ImageCaption</h4>
<p>Loremipsumdolorsitamet,consecteturadipisicingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.Utenimadminimveniam.</p>
</div>
</li>
<li>
<divclass="infofront"style="width:200px;height:120px">
<h4>Putthetextonfront</h4>
<p>Loremipsumdolorsitamet,consecteturadipisicingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.Utenimadminimveniam.</p>
</div>
<divclass="back">
<imgsrc="images/thumbs/lychee/img8_120.jpg"width="200"height="120"/>
</div>
</li>
<li>
<divclass="info"style="width:200px;height:250px">
<h4>Anothertextblock</h4>
<p>Transitionsupport<strong>flip,skew,flipX,flipY,wave,fan,skew,curl,papercut,zipper,fade,twirl</strong>.<br/></p>
<p>Optionallightboxlargeimageorvideo.</p>
<p>Duisauteiruredolorinreprehenderitinvoluptatevelitessecillumdoloreeufugiatnullapariatur.Excepteursintoccaecatcupidatatnonproident,suntinculpaquiofficiadeseruntmollitanimidestlaborum.</p>
</div>
</li>
<lidata-large="images/flickr_images/img6.jpg">
<imgsrc="images/thumbs/flickr_images/img6.jpg"width="200"height="133"/>
</li>
<lidata-large="images/flickr_images/img7.jpg">
<imgsrc="images/thumbs/flickr_images/img7.jpg"width="200"height="133"/>
</li>
<lidata-large="images/flickr_images/img8.jpg">
<imgsrc="images/thumbs/flickr_images/img8.jpg"width="200"height="133"/>
</li>
<lidata-large="images/flickr_images/img9.jpg">
<imgsrc="images/thumbs/flickr_images/img9.jpg"width="200"height="133"/>
</li>
<lidata-large="images/flickr_images/img10.jpg">
<imgsrc="images/thumbs/flickr_images/img10.jpg"width="200"height="133"/>
</li>
<lidata-large="images/flickr_images/img11.jpg">
<imgsrc="images/thumbs/flickr_images/img11.jpg"width="200"height="300"/>
</li>
<lidata-large="images/flickr_images/img13.jpg">
<imgsrc="images/thumbs/flickr_images/img13.jpg"width="200"height="133"/>
</li>
<lidata-large="images/flickr_images/img17.jpg">
<imgsrc="images/thumbs/flickr_images/img17.jpg"width="200"height="133"/>
</li>
<lidata-large="images/flickr_images/img20.jpg">
<imgsrc="images/thumbs/flickr_images/img20.jpg"width="200"height="133"/>
</li>
<lidata-large="images/flickr_images/img21.jpg">
<imgsrc="images/thumbs/flickr_images/img21.jpg"width="200"height="133"/>
</li>
<lidata-large="images/flickr_images/img22.jpg">
<imgsrc="images/thumbs/flickr_images/img22.jpg"width="200"height="133"/>
</li>
<lidata-large="images/flickr_images/img24.jpg">
<imgsrc="images/thumbs/flickr_images/img24.jpg"width="200"height="133"/>
</li>
<lidata-large="images/flickr_images/img27.jpg">
<imgsrc="images/thumbs/flickr_images/img27.jpg"width="200"height="133"/>
</li>
<lidata-large="images/flickr_images/img28.jpg">
<divclass="front">
<imgsrc="images/thumbs/flickr_images/img28.jpg"width="200"height="133"/>
</div>
<divclass="back">
<h4>ImageCaption</h4>
<p>Loremipsumdolorsitamet,consecteturadipisicingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.Utenimadminimveniam.</p>
</div>
</li>
<lidata-large="images/flickr_images/img30.jpg">
<imgsrc="images/thumbs/flickr_images/img30.jpg"width="200"height="133"/>
</li>
<lidata-large="images/flickr_images/img31.jpg">
<divclass="front">
<imgsrc="images/thumbs/flickr_images/img31.jpg"width="200"height="133"/>
</div>
<divclass="back">
<h4>ImageCaption</h4>
<p>Loremipsumdolorsitamet,consecteturadipisicingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.Utenimadminimveniam.</p>
</div>
</li>
</ul>
</div>
<scriptsrc="js/jquery-1.7.2.min.js"type="text/javascript"></script>
<scriptsrc="js/jquery.wookmark.min.js"type="text/javascript"></script>
<scriptsrc="js/jquery.pinterestgallery.min.js"type="text/javascript"></script>
<scriptsrc="js/modernizr.custom.js"type="text/javascript"></script>
<scripttype="text/javascript">
$(document).ready(newfunction(){
$('#tiles').pinterestGallery({
largeContainerID:'largeImage',
animateStyle:'twirl',
gridOptions:{
autoResize:true,
container:$('#main'),
offset:8,
itemWidth:210
}
});
});
</script>
</body>
</html>