请选择 进入手机版 | 继续访问电脑版
论坛公告
论坛公告
在线工具
在线工具
热门版块
热门版块
查看: 352|回复: 14

图片翻书效果

[复制链接]
  • TA的每日心情
    慵懒
    昨天 12:46
  • 签到天数: 44 天

    [LV.5]常住居民I

    38

    主题

    502

    帖子

    4991

    积分

    管理员

    德勋
    240
    金丹
    3280
    功绩
    49
    灵芝
    680
    精华
    0
    阅读权限
    255
    注册时间
    2016-6-25
    在线时间
    200 小时

    最佳新人活跃会员管理员优秀会员勤劳之星

    发表于 2017-3-8 19:52:15 | 显示全部楼层 |阅读模式
    欣赏操作方法: 用鼠标点击画面左边或右边,每点一次翻一页

    代码如下:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>JS实现图片翻书效果</title>
    <META http-equiv=imagetoolbar content=no>
    <STYLE type=text/css>
    #center {
    LEFT: 50%; POSITION: absolute; TOP: 50%
    }
    #DHTMLBOOK {
    BACKGROUND: #000; LEFT: -210px; VISIBILITY: hidden; WIDTH: 420px; POSITION: relative; TOP: -160px; HEIGHT: 320px
    }
    #TXTBOX {
    FONT-SIZE: 0.8em; WIDTH: 410px; COLOR: #aba193; FONT-FAMILY: verdana; POSITION: absolute; TOP: 320px; TEXT-ALIGN: center
    }
    .page {
    OVERFLOW: hidden; BORDER-LEFT: #000000 1px solid; WIDTH: 50%; CURSOR: pointer; POSITION: absolute; HEIGHT: 100%
    }
    .right {
    BORDER-RIGHT: #000000 1px solid; LEFT: 50%
    }
    .turn {
    BACKGROUND: #000000
    }
    .img {
    WIDTH: 200%; POSITION: absolute; HEIGHT: 100%
    }
    </STYLE>

    <SCRIPT type=text/javascript><!--

    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";
    }
    //-->
    </SCRIPT>

    <META content="MSHTML 6.00.6000.16809" name=GENERATOR></HEAD>
    <BODY>

    <DIV id=center>
    <DIV id=DHTMLBOOK><SPAN class=page onMouseDown="return false;" ondblclick=TPL(); onclick=TPL();><IMG class=img></SPAN>
    <SPAN class="page right" onmousedown="return false;" ondblclick=TPR(); onclick=TPR();><IMG class=img style="LEFT: -100%"></SPAN>
    <SPAN class="page turn" onMouseDown="return false;" ondblclick=TPL(); onclick=TPL();><IMG class=img style="FILTER: alpha(); opacity: 1"></SPAN>
    <SPAN class="page turn right" onmousedown="return false;" ondblclick=TPR(); onclick=TPR();><IMG class=img style="FILTER: alpha(); LEFT: -100%; opacity: 1"></SPAN> 
    <DIV id=TXTBOX></DIV></DIV></DIV>
    <DIV id=imgsrc style="VISIBILITY: hidden">
    <IMG alt="这一张怎样." src="http://wp.yalangelt.com/userfiles/xuehai/jc/texiao1/52e9207bx87d95d5c35d2%26690.jpg">
    <IMG alt="呵呵,这张好看不" src="http://wp.yalangelt.com/userfiles/xuehai/jc/texiao1/69_441374_32a4941188ef58b.jpg">
    <IMG alt="这一张是不是也不错呢" src="http://wp.yalangelt.com/userfiles/xuehai/jc/texiao1/6c7343c3gx6DuPVTqAXd3%26690.jpg">
    </DIV>
    </BODY></HTML>




    评分

    参与人数 2德勋 +20 金丹 +20 功绩 +2 灵芝 +20 收起 理由
    紫色韵味 + 10 + 10 + 2 + 10 非常给力.值得称赞!
    相依相伴 + 10 + 10 + 10 漂亮!

    查看全部评分

    回复

    使用道具 举报

    该用户从未签到

    61

    主题

    2759

    帖子

    1万

    积分

    中级会员

    德勋
    357
    金丹
    5856
    功绩
    20
    灵芝
    3046
    精华
    0
    阅读权限
    50
    注册时间
    2016-7-3
    在线时间
    106 小时

    勤劳之星真我风采新人优秀会员最佳新人活跃会员版主

    发表于 2017-3-8 23:37:48 | 显示全部楼层
    感谢老师分享,{:5_404:}
    回复 支持 反对

    使用道具 举报

    该用户从未签到

    61

    主题

    2759

    帖子

    1万

    积分

    中级会员

    德勋
    357
    金丹
    5856
    功绩
    20
    灵芝
    3046
    精华
    0
    阅读权限
    50
    注册时间
    2016-7-3
    在线时间
    106 小时

    勤劳之星真我风采新人优秀会员最佳新人活跃会员版主

    发表于 2017-3-8 23:38:01 | 显示全部楼层
    {:5_404:}{:5_404:}{:5_404:}
    回复

    使用道具 举报

  • TA的每日心情

    3 小时前
  • 签到天数: 122 天

    [LV.7]常住居民III

    958

    主题

    1万

    帖子

    16万

    积分

    阁主

    德勋
    22032
    金丹
    61822
    功绩
    3668
    灵芝
    36877
    精华
    114
    阅读权限
    255
    注册时间
    2016-6-25
    在线时间
    903 小时

    主题500主题800终生成就优秀会员金点子最火真我风采勤劳之星宣传达人活跃会员突出贡献管理员功勋威望达人主题过百主题300文学

    发表于 2017-3-8 23:51:25 | 显示全部楼层
    这个效果好,还没有做过代码音画呢,空间代码就头痛,看到这个效果,真的想试着做一个!
    回复 支持 反对

    使用道具 举报

  • TA的每日心情

    3 小时前
  • 签到天数: 122 天

    [LV.7]常住居民III

    958

    主题

    1万

    帖子

    16万

    积分

    阁主

    德勋
    22032
    金丹
    61822
    功绩
    3668
    灵芝
    36877
    精华
    114
    阅读权限
    255
    注册时间
    2016-6-25
    在线时间
    903 小时

    主题500主题800终生成就优秀会员金点子最火真我风采勤劳之星宣传达人活跃会员突出贡献管理员功勋威望达人主题过百主题300文学

    发表于 2017-3-8 23:51:41 | 显示全部楼层
    感谢管管精彩分享,辛苦了!{:5_404:}
    回复 支持 反对

    使用道具 举报

    该用户从未签到

    159

    主题

    1157

    帖子

    2万

    积分

    超级版主

    德勋
    5616
    金丹
    9028
    功绩
    103
    灵芝
    5833
    精华
    20
    阅读权限
    150
    注册时间
    2016-7-4
    在线时间
    115 小时

    最佳新人活跃会员优秀版主主题过百文学真我风采优秀会员特邀嘉宾

    发表于 2017-3-9 06:57:19 | 显示全部楼层
    我手机欣赏的
    看不到效果
    只有电脑上欣赏了
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2018-10-2 22:52
  • 签到天数: 23 天

    [LV.4]偶尔看看III

    46

    主题

    1万

    帖子

    4万

    积分

    超级版主

    德勋
    859
    金丹
    17783
    功绩
    46
    灵芝
    12866
    精华
    4
    阅读权限
    150
    注册时间
    2016-7-3
    在线时间
    126 小时

    活跃会员真我风采勤劳之星优秀会员最佳新人新人

    发表于 2017-3-9 11:13:36 | 显示全部楼层
    感谢管管精彩分享,辛苦了!{:5_404:}
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2018-10-2 22:52
  • 签到天数: 23 天

    [LV.4]偶尔看看III

    46

    主题

    1万

    帖子

    4万

    积分

    超级版主

    德勋
    859
    金丹
    17783
    功绩
    46
    灵芝
    12866
    精华
    4
    阅读权限
    150
    注册时间
    2016-7-3
    在线时间
    126 小时

    活跃会员真我风采勤劳之星优秀会员最佳新人新人

    发表于 2017-3-9 11:13:48 | 显示全部楼层
    {:5_412:}{:5_412:}
    回复

    使用道具 举报

  • TA的每日心情
    奋斗
    前天 14:58
  • 签到天数: 25 天

    [LV.4]偶尔看看III

    35

    主题

    797

    帖子

    8197

    积分

    中级会员

    德勋
    1307
    金丹
    2944
    功绩
    46
    灵芝
    1786
    精华
    2
    阅读权限
    50
    注册时间
    2017-2-27
    在线时间
    76 小时

    最佳新人活跃会员新人优秀会员

    发表于 2017-3-9 13:41:39 | 显示全部楼层
    领导分享辛苦,上咖啡{:1_329:}
    回复 支持 反对

    使用道具 举报

    该用户从未签到

    1

    主题

    453

    帖子

    1704

    积分

    注册会员

    德勋
    2
    金丹
    793
    功绩
    0
    灵芝
    454
    精华
    0
    阅读权限
    10
    注册时间
    2016-12-15
    在线时间
    22 小时

    活跃会员新人

    发表于 2017-3-9 15:27:33 | 显示全部楼层
    感谢老师分享
    回复 支持 反对

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    Powered by Discuz! 3.4

    快速回复 返回顶部 返回列表