翻书效果

最新推荐文章于 2024-09-19 11:17:39 发布
最新推荐文章于 2024-09-19 11:17:39 发布
阅读量77 收藏
点赞数
文章标签： javascript ViewUI

<html> <head> <title>the hideaway - Interactive DHTML art-demos</title> <meta name="Author" content="Gerard Ferrandez at http://www.dhteumeuleu.com"> <meta http-equiv="imagetoolbar" content="no"> <mce:style type="text/css"><!-- html { overflow: hidden; } body { margin: 0px; padding: 0px; background: #111; position: absolute; width: 100%; height: 100%; cursor: crosshair; } #center { position:absolute; left: 50%; top: 50%; } #DHTMLBOOK { position: relative; background: #000; width: 420px; height: 320px; left: -210px; top: -160px; visibility: hidden; } #TXTBOX { position: absolute; font-family: verdana; color: #aba193; font-size: .8em; width: 410px; text-align: center; top: 320px; } .page { position: absolute; cursor: pointer; overflow: hidden; width: 50%; height: 100%; border-left: #000000 solid 1px; } .right { left: 50%; border-right: #000000 solid 1px; } .turn { background: #000000; } .img { position: absolute; height: 100%; width: 200%; } --></mce:style><style type="text/css" mce_bogus="1">html { overflow: hidden; } body { margin: 0px; padding: 0px; background: #111; position: absolute; width: 100%; height: 100%; cursor: crosshair; } #center { position:absolute; left: 50%; top: 50%; } #DHTMLBOOK { position: relative; background: #000; width: 420px; height: 320px; left: -210px; top: -160px; visibility: hidden; } #TXTBOX { position: absolute; font-family: verdana; color: #aba193; font-size: .8em; width: 410px; text-align: center; top: 320px; } .page { position: absolute; cursor: pointer; overflow: hidden; width: 50%; height: 100%; border-left: #000000 solid 1px; } .right { left: 50%; border-right: #000000 solid 1px; } .turn { background: #000000; } .img { position: absolute; height: 100%; width: 200%; }</style> <mce:script type="text/javascript"><!-- // ==================================================== // __| _ | | | // (_ | -_) | _` | _ / _ / _| // /___|/___| _|/__,_|/___//___//__| // --------------------------------------------------- // script: Gerard Ferrandez - Ge-1-doot - August 2oo3 // http://www.dhteumeuleu.com // ==================================================== document.onselectstart = function () { return false; } var nI = 0; var kI = 0; var run = false; function setOpacity(obj,o) { if (o<0) o=0; else if (o>100) o = 100; if (obj.filters)obj.filters.alpha.opacity=o; else obj.style.opacity = o/100; } function TPR__(p) { P1.style.left = 50-(2.5*p)+"%"; P1.style.width = (2.5*p)+"%"; setOpacity(P1i, .5*p*p); if (p == 20) run = false; } function TPR_(p) { P2.style.width = 50-(2.5*p)+"%"; setOpacity(P2i, 100-.5*(p*p)); if (p == 20) { P2i.src = IMGSRC[kI].src; setOpacity(P2i, 100); P2.style.width = "50%"; for(var i=1; i<=20; i++) setTimeout("TPR__("+i+")", i*32); } } function TPR() { if (!run) { run = true; P01i.src = IMGSRC[kI].src; P1.style.width = 0; kI++; if (kI>=nI) kI = 0; titLe(kI); P02i.src = IMGSRC[kI].src; P1i.src = IMGSRC[kI].src; for (var i=1; i<=20; i++) setTimeout("TPR_("+i+")", i*32); } else setTimeout("TPR()", 100); } function TPL__(p) { P2.style.width = (2.5*p)+"%"; setOpacity(P2i, .5*p*p); if (p == 20) run = false; } function TPL_(p) { P1.style.left = (2.5*p)+"%"; P1.style.width = 40+(10-2.5*p)+"%"; setOpacity(P1i, 100-.5*(p*p)); if (p == 20) { P1i.src = IMGSRC[kI].src; setOpacity(P1i, 100); P1.style.left = 0; P1.style.width = "50%"; for(var i=1; i<=20; i++) setTimeout("TPL__("+i+")", i*32); } } function TPL() { if (!run) { run = true; P02i.src = IMGSRC[kI].src; P2.style.width = 0; kI--; if (kI < 0) kI = nI-1; titLe(kI); P01i.src = IMGSRC[kI].src; P2i.src = IMGSRC[kI].src; for(var i=1; i<=20; i++) setTimeout("TPL_("+i+")", i*32); } else setTimeout("TPL()", 100); } function titLe(p) { document.getElementById("TXTBOX").innerHTML = IMGSRC[p].alt; } onload = function() { IMGSRC = document.getElementById("imgsrc").getElementsByTagName("img"); DB = document.getElementById("DHTMLBOOK"); P01 = DB.getElementsByTagName("span")[0]; P01i = P01.getElementsByTagName("img")[0]; P02 = DB.getElementsByTagName("span")[1]; P02i = P02.getElementsByTagName("img")[0]; P1 = DB.getElementsByTagName("span")[2]; P1i = P1.getElementsByTagName("img")[0]; P2 = DB.getElementsByTagName("span")[3]; P2i = P2.getElementsByTagName("img")[0]; nI = IMGSRC.length; P1i.src = IMGSRC[kI].src; P2i.src = IMGSRC[kI].src; titLe(kI); DB.style.visibility = "visible"; } // --></mce:script> </head> <body> <div id="center"> <div id="DHTMLBOOK"> <span class="page" οnmοusedοwn="return false;" οndblclick="TPL();" οnclick="TPL();"><img class="img"></span> <span class="page right" οnmοusedοwn="return false;" οndblclick="TPR();" οnclick="TPR();"><img class="img" style="left:-100%"></span> <span class="page turn" οnmοusedοwn="return false;" οndblclick="TPL();" οnclick="TPL();"><img class="img" style="opacity:1;filter:alpha()" mce_style="opacity:1;filter:alpha()"></span> <span class="page turn right" οnmοusedοwn="return false;" οndblclick="TPR();" οnclick="TPR();"><img class="img" style="opacity:1;filter:alpha();left:-100%"></span> <div id="TXTBOX"></div> </div> </div> <div id="imgsrc" style="visibility:hidden;" mce_style="visibility:hidden;"> <img alt="有时候已经很努力了，可放出来的却是个屁。。" src="1.jpg" mce_src="1.jpg"> <img alt="你知道的太多了。。" src="2.jpg" mce_src="2.jpg"> <img alt="有时候选择放弃是对的，但是放弃选择肯定是错的。。" src="3.jpg" mce_src="3.jpg"> </div> </body> </html>

iteye_20954
关注
html图片翻页效果代码,js图片翻书效果代码分享
weixin_35987371的博客
06-03 1184
这是一款基于javascript实现图片翻书效果代码，图片可以从左右两个方向进行切换，用户还可以自定义对应图片的标题与文字说明，是一款非常实用的图片特效源码。七夕情人节也可以是表白的神器，放一些回忆的照片，还可以永久保存，是不是很有心意，推荐给大家，有需要的小伙伴可以学习学习。运行效果图：大家可以先运行一下 -------------------------------------效果运行-...
html5实现3d翻页效果,利用css3 3d transform制作超逼真翻书效果
weixin_35717340的博客
06-03 2397
本教程给大家带来一个非常有创意的翻书效果，使用的是css 3D transforms属性和css transitions属性。这里将给你展示两种不同的图书设计：精装书和平装书。这两种设计只需要简单的改变一些css样式、图片和其他一些小细节就可以完成。注意: 并不是所有的浏览器都支持这些css属性。精装书:精装书由三个部分组成：书的封面、书的脊柱和书的背面。每一个部分都将由伪元素来提供一些厚度。平装...
HTML 瀑布 心
文轩
05-19 301
由：Gerard Ferrandez 的网站提供。【源码非原创】+自定义修改文字。 重在分享 源码： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalab
照片墙
蜗牛小前的博客
08-24 234
HTML部分： 效果地址：http://www.jq22.com/jquery-info1486 &lt;div id="screen"&gt; &lt;div id="command"&gt; &lt;h1&gt;deliberate lies&lt;/h1&gt; Defiant, stony, deliberate, their lies wil...
书翻页效果php,Css实现翻书效果
weixin_42099116的博客
04-05 323
如何实现翻书效果在一些小说站中经常应用，其实实现起来也很简单，下面是用div+css实现翻书效果。body{overflow: hidden;margin: 0;padding: 0;}#book{position: absolute;left: 50%;top: 50%;margin-left: -325px;margin-top: -300px;height: 600px;width: 750...
前端书籍翻页效果
BDawn的专栏
07-17 1148
本篇文字主要介绍如何使用vue实现前端翻书效果，包括鼠标拖动/点击实现翻页，通过按钮实现翻页等功能，下面给出核心代码示例。初始化翻书节点，包含配置项字段，如书籍宽高、位置等字段，并可通过按钮事件实现上一页下一页
android fragment实现翻书效果,viewpager实现翻页效果（fragment）
weixin_42351520的博客
05-27 724
viewpager的运用核心在于适配器的编写，及最终的setadapter(adapter)谷歌官方认为，ViewPager应该和Fragment一起使用时，此时ViewPager的适配器是FragmentPagerAdapter，当你实现一个FragmentPagerAdapter,你必须至少覆盖以下方法:getCount()getItem()如果ViewPager没有和Fragment一起，V...
html jquery 翻页效果代码,jquery实现的点击翻书效果代码
weixin_36251174的博客
06-09 515
本文实例讲述了jquery实现的点击翻书效果代码。分享给大家供大家参考，具体如下：这是自写一个翻书的Js效果,基于jquery-1.4.2.min.js插件实现，还正在完善中，希望大家能喜欢，我觉得不错。运行效果截图如下：在线演示地址如下：具体代码如下：/p>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">自写一个翻书...
js 翻书翻页效果
weixin_35749545的博客
02-02 768
为了实现 JS 翻书翻页效果，可以使用 CSS3 动画和 JS 交互。首先定义好 HTML 结构，然后使用 CSS3 的 transition 和 transform 属性实现动画效果，最后通过 JS 监听用户的操作并对页面做出相应的改变。代码实现细节可以参考一些现有的开源项目或教程。 ...
【JavaScript】LeetCode：707设计链表
weixin_45980065的博客
09-14 724
【代码】【JavaScript】LeetCode：707设计链表。
使用 uni-app 开发微信小程序的详细指南
2301_79685859的博客
09-16 1021
uni-app是一个使用 Vue.js 框架开发跨平台应用的前端框架。开发者通过编写一套代码，可以生成多端应用，包括 H5、iOS、Android、微信小程序、支付宝小程序、字节跳动小程序等。
Vue接入高德地图并实现基本的路线规划功能
黄团团的个人博客
09-11 677
找到public目录下的index.html文件，把刚才申请好的2个密钥分别粘贴进去，第一个securityJsCode是填入安全密钥，第二个红框是填入Key。登录高德开放平台，点击我的应用，先添加新应用，然后再添加Key。如图所示填写对应的信息，系统就会自动生成。
JS的输出语句
J3259392566的博客
09-13 351
js中严格区分大小写。
echarts饼图内容循环播放实现
qq_39877681的博客
09-12 376
echarts饼图内容循环播放实现
[附源码]SpringBoot+VUE+Java实现人脸识别系统
最新发布
吉他程序员的博客
09-19 718
人脸数数据录入人脸管理摄像头识别端。
计算机毕业设计 基于SpringBoot的课程教学平台的设计与实现 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试
weixin_19164791635
09-12 1028
本文介绍了一款基于Java、SpringBoot和Vue.js技术的课程教学平台。该平台服务于管理员、学生和教师，提供教学资源管理、课程信息浏览、作业提交与批改等功能，旨在优化教学流程，提升教育质量，促进教育资源的数字化共享，推动教育信息化发展。
计算机毕业设计 网上书店系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试
weixin_19164791635
09-16 1274
本文介绍了一款基于Java、SpringBoot和Vue.js技术的网上书店系统。该系统为管理员、用户和卖家提供了图书信息浏览、订单管理、个人中心管理等功能，旨在打造一个便捷、高效的在线购书平台。系统通过优化图书销售流程，提升用户体验，推动出版行业的数字化转型，促进知识传播和文化交流。
前端vue-父传子
weixin_46969393的博客
09-19 573
父传子的话是在components中创建一个子组件MyTest.vue，并且在父组件中先导入(import MyTest from "./components/MyTest")，再注册（在expo二default中写上 compnents:{MyTest}），再使用标签（<MyTest>< / MyTest>）,子组件要接收，在子组件的export default中（props:['obj']）,在子组件中使用obj.goodsList数组中的字段就可以了（obj.id或者obj.name或者obj.pr
Android实现翻书效果
在Android应用开发中，实现翻书效果通常是为了增强用户体验，模拟真实书籍翻页的动态过程。这个`eBook`类可能会包含以下几个关键知识点： 1. **自定义View**： - `eBook`类继承自`FrameLayout`，这意味着它能够...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值