Flipper jquery翻书效果插件

最新推荐文章于 2024-07-23 11:50:44 发布
最新推荐文章于 2024-07-23 11:50:44 发布
阅读量316 收藏 1
点赞数
分类专栏： 网站模版 文章标签： jquery javascript 前端
原文链接：https://yy123.ink/frontDetail/12700
版权

下载地址

什么是Flipper?Flipper是一个jQuery插件，可以让你改变任何内容到一个美丽的书像部件！它是否支持触摸屏设备？是的！Flipper是非常适合用于触摸屏。事实上，感觉更好时，你与你的手指轻轻的页面！我可以改变控件的大小？当然了.这个插件可以接受的宽度和高度参数。我可以删除任何小部件的用户界面元素？当然。您可以指定在参数，如果你想关闭箭头。我必须使用文本？绝对不是。你可以把你想要的内容的HTML！老的浏览器呢？如果浏览器不支持CSS3的三维变换，Widget优雅地回落到纯jQuery。作为一个最佳实践，也不做的浏览器嗅探！作为一个很好的奖励，来与脚本的用户界面元素显示视网膜准备。很酷的东西：）

7_c3f1830349d9fa6717c2c75f9d8c9110.jpg

dd:

amohan
关注
专栏目录
Jquery翻书效果插件
09-27
jquery翻书效果插件 3D CSS3 Book Generator with jQuery
15 个最佳 jQuery 翻书效果插件
weixin_30719711的博客
12-10 476
http://www.iteye.com/news/26863 本文为你带来15个非常实用的、实现类似翻书效果的jQuery插件，你可以很容易地整合到你的web应用中，提升用户体验。1. BookBlockBookBlock可以将任何内容（如图像、文本）创建为翻页效果，带有一个翻页导航，可用于创建小册子等组件。 阅读更多/演示2. imBookFlip该插件允许...
炫酷的前端页面翻书动画效果
最新发布
admire_fish的博客
07-23 1051
炫酷的前端页面翻书动画效果
20个强大的jQuery翻书插件【 jQuery flipbook】
thewebcode
06-12 945
​ 许多网站使用jQuery翻书插件来展示产品目录和销售广告册子。jQuery翻页书解决方案给访客提供了方便而有效的浏览一套东西的体验。如果做得好，就如同手头有一本印刷版的册子。通过翻页书插件，你可以让你的网站访客如同在阅读一本真的书。 使用jQuery翻页书插件可以让你给用户展示更多内容，并让访客印象深刻。在决定之前，你需要了解技术细节。一些翻页书插件仍然基于flash， 他们不...
15个JQUERY 翻书插件
turobber_tu的专栏
10-21 1968
15个JQUERY 翻书插件 15+ Best jQuery Page Flip Book effect with examples December 26, 2012 | Article In this Article we are providing best jQuery html5 page flip book with example
jQuery翻书效果插件BookBlock.zip
07-18
BookBlock 是一个 jQuery 插件，用来创建一个类似小册子的组件，允许用户点击页面按钮来一页一页翻看小册子里面的内容，就像平时翻书翻日历的效果一样。 标签：BookBlock
jQuery快速制作卡片翻转效果的插件flip.js.zip
11-18
本文将详细介绍如何使用jQuery插件flip.js快速创建这种效果。 一、jQuery与flip.js概述 jQuery是一个轻量级的JavaScript库，其简洁的API和强大的DOM操作能力深受开发者喜爱。而flip.js是一个专门为jQuery设计的...
Flipper-crx插件
03-15
Flipper会在您的右键单击按钮上添加一个小菜单，使您可以选择更改元素的方式。 用户可以翻转元素，对其进行镜像或放大特定区域。 有关更多信息和示例，请访问商店中链接到我们的网站或支持网站。 支持语言:English
flipper:使用jQuery的鳍状肢组件。 提供许多易于使用的可配置选项。 使用此组件可以轻松开发FlipBoard类型的应用程序
05-11
使用jQuery的鳍状插件。 提供许多易于使用的可配置选项。 使用此组件可以轻松开发FlipBoard类的应用程序！ ## Options一个对象，其中包含键值对中的配置。 轴：“ X”或“ Y” ## Demo请在找到有效的。
Image Flipper + Grayscale-crx插件
04-03
Image Flipper + Grayscale-crx插件提供了这个功能，用户可以轻松地将网页上的任何图像进行水平翻转或垂直翻转，这对于检查对称性或创建独特的视觉效果非常有用。 其次，灰度转换是将彩色图像转化为黑白图像的过程...
jQuery 完整的翻书效果特效包
04-07
jQuery 完整的翻书效果特效包 jQuery 翻书效果特效完整版，jQuery Jmagazine电子杂志插件，它是基于jQuery类库，实现了js脚本于页面的分离。 　　你只能写一行代码就可以快速生成一本基于图片的电子杂志，同时对每一页能够单独的添加html代码，你可以把它用到图片展示效果或是相册上面，挺不错的。
来自国外的jQuery翻书特效 jquery.booklet 实例
05-01
内容索引:脚本资源,Ajax/JavaScript,jQuery,翻书　　来自国外的jQuery翻书特效——jquery.booklet 核心库及实例完整版，前天发现的jquery.booklet，但是没有发现实例，自己捣腾了半天也没弄出个所以然，没办法只得求救Google，没想到还想找到了官方原版，而且提供下载，所以赶紧转载给大家，翻书翻的挺有水平哦，不过代码有点多，有研究的比啥都好埃 　　库中包含以下文件： 　　jquery.booklet.1.1.0.js 　　jquery.booklet.1.1.0.min.js 　　jquery.easing.1.3.js
一个不错的jquery 完整翻书效果插件
04-07
jQuery 翻书效果特效完整版，jQuery Jmagazine电子杂志插件，它是基于jQuery类库，实现了js脚本于页面的分离。 　　你只能写一行代码就可以快速生成一本基于图片的电子杂志，同时对每一页能够单独的添加html代码，你可以把它用到图片展示效果或是相册上面，挺不错的。
漂亮的翻书插件-BOOKBLOCK
06-28
漂亮的翻书插件-BOOKBLOCK
Unity翻书效果插件
07-13
Unity翻书效果插件
前端jquery翻书效果插件 附官网
wzq1915414095的博客
10-12 462
官网 https://builtbywill.com/booklet/#/installation 插件名称 booklet
用Jquery实现翻书特效
u014351353的专栏
05-16 1173
此Jquery特效是一款非常实用的功能，翻书效果一直很受人喜欢，目前功能比较简单，暂时只实现了左右翻书的效果，功能还可以无限的扩展。   翻书功能代码js代码如下：   var $pageheight = 189; var $pagewidth = 146; var $pageYpos = 0; $(document).ready(function(){    //点击左边页面翻书
使用JQuery的turn.js库来实现翻书效果
qq_29701691的博客
09-08 1935
一淘模板（56admin.com）本篇文章给大家介绍jQuery的turn.js库，聊聊使用turn.js库实现翻书效果，希望对大家有所帮助！今天来和大家分享下JQ的turn.js，下面我先来简单介绍下我们今天的主角turn.js。Turn.js是一个JavaScript库，它集合了HTML5的所有优点，可以使我们的内容看起来像一本书或杂志，有真实的翻阅的效果。
html图片翻页效果代码,js图片翻书效果代码分享
05-23
以下是HTML图片翻页效果代码，使用JavaScript实现： HTML代码： ```html <div class="flip-container"> <div class="flipper"> <div class="front"> <img src="image1.jpg" alt="Image 1"> </div> <div class="back"> <img src="image2.jpg" alt="Image 2"> </div> </div> </div> ``` CSS代码： ```css .flip-container { perspective: 1000px; } .flip-container:hover .flipper, .flip-container.hover .flipper { transform: rotateY(180deg); } .flipper { transition: 0.6s; transform-style: preserve-3d; position: relative; } .front, .back { backface-visibility: hidden; position: absolute; top: 0; left: 0; } .back { transform: rotateY(180deg); } ``` JavaScript代码： ```javascript var flipContainers = document.querySelectorAll('.flip-container'); for (var i = 0; i < flipContainers.length; i++) { flipContainers[i].addEventListener('mouseenter', function() { this.classList.add('hover'); }); flipContainers[i].addEventListener('mouseleave', function() { this.classList.remove('hover'); }); } ``` 以上是HTML图片翻页效果代码，下面是JS图片翻书效果代码： HTML代码： ```html <div class="book"> <div class="page-container"> <div class="page"> <img src="image1.jpg" alt="Image 1"> </div> <div class="page"> <img src="image2.jpg" alt="Image 2"> </div> </div> </div> ``` CSS代码： ```css .book { width: 400px; height: 300px; perspective: 1200px; } .page-container { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 1s; } .page { position: absolute; top: 0; left: 0; width: 100%; height: 100%; backface-visibility: hidden; transform-origin: left center; transform-style: preserve-3d; } .page:nth-child(even) { transform: rotateY(-180deg); } .page-container.open { transform: translateZ(-150px); } .page-container.open .page:first-child { transform: rotateY(-20deg); } .page-container.open .page:last-child { transform: rotateY(160deg); } ``` JavaScript代码： ```javascript var book = document.querySelector('.book'); var pageContainer = document.querySelector('.page-container'); book.addEventListener('click', function() { if (pageContainer.classList.contains('open')) { pageContainer.classList.remove('open'); } else { pageContainer.classList.add('open'); } }); ``` 以上是JS图片翻书效果代码，希望能对您有所帮助。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值