JavaScript 用turn.js 做图书的翻页效果遇到问题：手翻请求到api 图片无法插入DOM中，无法正常浏览

代站技术 2017-04-02 12:12:33
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="OriginalRead.aspx.cs" Inherits="Units.Web.UI.Module.ToThirdPartyMagazine.OriginalRead" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/jquery-1.12.1.min.js"></script>
<script type="text/javascript" src="js/turn.min.js"></script>
</head>
<body>
<div class="wrapper h100">
<div class="real_btn_left">
<</div>
<div class="real_read" id="real_read">
</div>
<div class="real_btn_right">
></div>

<%if (Request.QueryString["return"] != "none")
{
if (String.IsNullOrEmpty(Request.QueryString["return"]))
{
if (!String.IsNullOrEmpty(Request.QueryString["detailreturn"]))
{
%>
<div class="nav_sidebar_right_back">
<p id="backbtn"><a href="Detail.aspx?guid=<%=MagazineGuid %>&year=<%=Year %>&issue=<%=Issue %>&return=<%=Request.QueryString["detailreturn"]%>"><img src="../ToThirdPartyMagazine/img/btn-back.png" alt="" /></a></p>
</div>
<%}
else{
%>
<div class="nav_sidebar_right_back">
<p id="P1"><a href="Detail.aspx?guid=<%=MagazineGuid %>&year=<%=Year %>&issue=<%=Issue %>"><img src="../ToThirdPartyMagazine/img/btn-back.png" alt="" /></a></p>
</div>
<%
}
}
else
{
%>
<div class="nav_sidebar_right_back">
<p id="backbtn"><a href="<%=Request.QueryString["return"] %>"><img src="img/btn-back.png" alt="" /></a></p>
</div>
<%
}
}
%>

<div class="musk r_musk" id="loading">
<div class="load">
<img src="img/ajax-loader.gif" alt="" /></div>
</div>
</div>
<script type="text/javascript" src="js/base.js"></script>
<script type="text/javascript">
var year = '<%=Year %>';
var issue = '<%=Issue %>';
var guid = '<%=MagazineGuid %>';
var codeName = '<%=CodeName %>';
var total = '<%=PageCount %>';
total = parseInt(total);
var pageIndex = 1;
var pageIndex1 = 1;
var leftcount = 0;
var pageturn = 1;
var isPortrait = false;

window.onload = function () {
var divhtml = "";
for (var i = 0; i < total; i++) {
divhtml += "<div></div>";

}
$("#real_read").append(divhtml);
setScr();
initBigData(0, 3);
}

function imgauto() {
var win_wid = $(window).width(), win_hei = $(window).height(), pers = (1340 / 1024).toFixed(3);
//console.log(win_wid+'---------------'+win_hei);

var f_wid = win_wid * .94 - 220;
if (win_wid < win_hei) {

var scaleimg = f_wid / 1024;
setimgwid(scaleimg)
} else {

if (f_wid / 2 * pers > win_hei) {
var scaleimg = win_hei / pers / 1024;
setimgwid(scaleimg);
} else {
var scaleimg = f_wid / 2 / 1024;
setimgwid(scaleimg);

}
}
}

function setScr() {
var win_wid = $(window).width(), win_hei = $(window).height(), pers = (1340 / 1024).toFixed(3);
//console.log(win_wid+'---------------'+win_hei);

var f_wid = win_wid * .94 - 220;
if (win_wid < win_hei) {

$('.real_read').width(f_wid + 2).height(f_wid * pers).css({ 'margin-top': (win_hei - (f_wid * pers)) / 2 + 'px' });
$("#real_read").turn({ display: 'single' });
isPortrait = true;
} else {

if (f_wid / 2 * pers > win_hei) {
$('.real_read').width(win_hei / pers * 2 + 2).height(win_hei).css('margin-top', '0')

} else {

$('.real_read').width(f_wid + 5).height(f_wid / 2 * pers).css({ 'margin-top': (win_hei - (f_wid / 2 * pers)) / 2 + 'px' });

}

$("#real_read").turn({ display: 'double' });
}

}

function setimgwid(scaleimg) {
for (var i = $('.real_read img').length - 1; i >= 0; i--) {
$('.real_read img').eq(i).width((300 * scaleimg).toFixed(2));
if ((i + 1) % 4 == 0) {
$('.real_read img').eq(i).width((124 * scaleimg).toFixed(2));
}
}
}

function TurnRight() {
if (leftcount > 0) {
leftcount--;
}
if (pageIndex < total) {
if ((2 * pageturn + 1) < total) {
pageturn++;
}
if (pageIndex + 1 < total) {
if (leftcount == 0) {
if (isPortrait) {
initBigData(pageIndex, pageIndex + 1);
pageIndex += 1;
}
else {
initBigData(pageIndex, pageIndex + 2);
pageIndex += 2;
}
}
}
}
}

function TurnLeft() {
if (leftcount > 1) {
leftcount++;
}
pageIndex1 -= 2;
pageIndex -= 2;
if (pageIndex1 < 0) { pageIndex1 = 0; }
if (pageturn > 1) {
pageturn--;
}
}

$('.real_btn_right').bind('click', function (e) {
$('#real_read').turn('next');
});

$('.real_btn_left').bind('click', function (e) {
$('#real_read').turn('previous');
});

$("#real_read").bind("turn.turned", function(event, page, pageObject) {
// Implementation
if(page + 1 == pageIndex) {
TurnRight()
}else{
TurnLeft();
}
});


function initBigData(starNo, pageCount) {
$("#loading").show();
jQuery.getJSON("OriginalRead.aspx", {
magazineGuid: guid,
codename: codeName,
year: year,
issue: issue,
isdata: 1,
m: Math.random(),
starNo: starNo,
pageCount: pageCount
}, function (data) {
var html = '';
for (var i = 0; i < data.imageMap.length; i++) {

html += "<img src='" + data.imageMap[i] + "' />";
if ((i + 1) % 20 == 0 && i > 0) {
$(".real_read .p" + pageIndex1).append(html);
if (starNo == 0 && pageIndex < 3) {
pageIndex++;
}
pageIndex1++;
html = '';
}
}
imgauto();
$("#loading").hide();
});
}
</script>
</body>
</html>
...全文
299 1 打赏 收藏 转发到动态 举报
写回复
用AI写文章
1 条回复
切换为时间正序
请发表友善的回复…
发表回复
cn00439805 2017-04-05
  • 打赏
  • 举报
 回复
添加代码：$("#real_read").html(html)，你缺少了最后把html放入容器 

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="OriginalRead.aspx.cs" Inherits="Units.Web.UI.Module.ToThirdPartyMagazine.OriginalRead" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="css/style.css" />
    <script type="text/javascript" src="js/jquery-1.12.1.min.js"></script>
    <script type="text/javascript" src="js/turn.min.js"></script>
</head>
<body>
    <div class="wrapper h100">
        <div class="real_btn_left">
            <</div>
        <div class="real_read" id="real_read">
        </div>
        <div class="real_btn_right">
            ></div>

        <%if (Request.QueryString["return"] != "none")
        {
            if (String.IsNullOrEmpty(Request.QueryString["return"]))
            {
                if (!String.IsNullOrEmpty(Request.QueryString["detailreturn"]))
                {
                %>
                <div class="nav_sidebar_right_back">
                    <p id="backbtn"><a href="Detail.aspx?guid=<%=MagazineGuid %>&year=<%=Year %>&issue=<%=Issue %>&return=<%=Request.QueryString["detailreturn"]%>"><img src="../ToThirdPartyMagazine/img/btn-back.png" alt="" /></a></p>
                </div>
                <%}
                  else{
                %>
                <div class="nav_sidebar_right_back">
                    <p id="P1"><a href="Detail.aspx?guid=<%=MagazineGuid %>&year=<%=Year %>&issue=<%=Issue %>"><img src="../ToThirdPartyMagazine/img/btn-back.png" alt="" /></a></p>
                </div>
                <%
                }
            }
            else
            {
                %>
                <div class="nav_sidebar_right_back">
                    <p id="backbtn"><a href="<%=Request.QueryString["return"] %>"><img src="img/btn-back.png" alt="" /></a></p>
                </div>
                <%
            }
        }
        %>

        <div class="musk r_musk" id="loading">
            <div class="load">
                <img src="img/ajax-loader.gif" alt="" /></div>
        </div>
    </div>
    <script type="text/javascript" src="js/base.js"></script>
    <script type="text/javascript">
        var year = '<%=Year %>';
        var issue = '<%=Issue %>';
        var guid = '<%=MagazineGuid %>';
        var codeName = '<%=CodeName %>';
        var total = '<%=PageCount %>';
        total = parseInt(total);
        var pageIndex = 1;
        var pageIndex1 = 1;
        var leftcount = 0;
        var pageturn = 1;
        var isPortrait = false;

        window.onload = function () {
            var divhtml = "";
            for (var i = 0; i < total; i++) {
                divhtml += "<div></div>";
                
            }
            $("#real_read").append(divhtml);
            setScr();
            initBigData(0, 3);
        }

        function imgauto() {
            var win_wid = $(window).width(), win_hei = $(window).height(), pers = (1340 / 1024).toFixed(3);
            //console.log(win_wid+'---------------'+win_hei);

            var f_wid = win_wid * .94 - 220;
            if (win_wid < win_hei) {

                var scaleimg = f_wid / 1024;
                setimgwid(scaleimg)
            } else {

                if (f_wid / 2 * pers > win_hei) {
                    var scaleimg = win_hei / pers / 1024;
                    setimgwid(scaleimg);
                } else {
                    var scaleimg = f_wid / 2 / 1024;
                    setimgwid(scaleimg);

                }
            }
        }

        function setScr() {
            var win_wid = $(window).width(), win_hei = $(window).height(), pers = (1340 / 1024).toFixed(3);
            //console.log(win_wid+'---------------'+win_hei);

            var f_wid = win_wid * .94 - 220;
            if (win_wid < win_hei) {

                $('.real_read').width(f_wid + 2).height(f_wid * pers).css({ 'margin-top': (win_hei - (f_wid * pers)) / 2 + 'px' });
                $("#real_read").turn({ display: 'single' });
                isPortrait = true;
            } else {

                if (f_wid / 2 * pers > win_hei) {
                    $('.real_read').width(win_hei / pers * 2 + 2).height(win_hei).css('margin-top', '0')

                } else {

                    $('.real_read').width(f_wid + 5).height(f_wid / 2 * pers).css({ 'margin-top': (win_hei - (f_wid / 2 * pers)) / 2 + 'px' });

                }

                $("#real_read").turn({ display: 'double' });
            }

        }

        function setimgwid(scaleimg) {
            for (var i = $('.real_read img').length - 1; i >= 0; i--) {
                $('.real_read img').eq(i).width((300 * scaleimg).toFixed(2));
                if ((i + 1) % 4 == 0) {
                    $('.real_read img').eq(i).width((124 * scaleimg).toFixed(2));
                }
            }
        }

        function TurnRight() {
            if (leftcount > 0) {
                leftcount--;
            }
            if (pageIndex < total) {
                if ((2 * pageturn + 1) < total) {
                    pageturn++;
                } 
                if (pageIndex + 1 < total) {
                    if (leftcount == 0) {
                        if (isPortrait) {
                            initBigData(pageIndex, pageIndex + 1);
                            pageIndex += 1;
                        }
                        else {
                            initBigData(pageIndex, pageIndex + 2);
                            pageIndex += 2;
                        }
                    }
                }
            }
        }

        function TurnLeft() {
            if (leftcount > 1) {
                leftcount++;
            }
            pageIndex1 -= 2;
            pageIndex -= 2;
            if (pageIndex1 < 0) { pageIndex1 = 0; }
            if (pageturn > 1) {
                pageturn--;
            }
        }

        $('.real_btn_right').bind('click', function (e) {
            $('#real_read').turn('next');
        });

        $('.real_btn_left').bind('click', function (e) {
            $('#real_read').turn('previous');
        });

        $("#real_read").bind("turn.turned", function(event, page, pageObject) {
            // Implementation
            if(page + 1 == pageIndex) {
                TurnRight()   
            }else{
                TurnLeft();
            }
        });


        function initBigData(starNo, pageCount) {
            $("#loading").show();
            jQuery.getJSON("OriginalRead.aspx", {
                magazineGuid: guid,
                codename: codeName,
                year: year,
                issue: issue,
                isdata: 1,
                m: Math.random(),
                starNo: starNo,
                pageCount: pageCount
            }, function (data) {
                 var html = '';
                for (var i = 0; i < data.imageMap.length; i++) {

                    html += "<img src='" + data.imageMap[i] + "'  />";
                    if ((i + 1) % 20 == 0 && i > 0) {
                        $(".real_read .p" + pageIndex1).append(html);
                        if (starNo == 0 && pageIndex < 3) {
                            pageIndex++;
                        }
                        pageIndex1++;
                         html = '';
                    }
                }
				$("#real_read").html(html)
                imgauto();
                $("#loading").hide();
            });
        }
    </script>
</body>
</html>
基于改进YOLOv8算法实现高精度实时安全带使用状态智能监测与预警的深度学习目标检测系统源码及完整项目实践指南_包含2300张高质量标注图像的安全带专用数据集YOLOv8目标检测.zip
基于改进YOLOv8算法实现高精度实时安全带使用状态智能监测与预警的深度学习目标检测系统源码及完整项目实践指南_包含2300张高质量标注图像的安全带专用数据集YOLOv8目标检测.zip
MiniBtMaster_minibt_16940_1764966207180.zip
MiniBtMaster_minibt_16940_1764966207180.zip
本项目是一个专为Linux系统设计的自动化安装与回滚管理工具集_它包含针对MySQL数据库Redis缓存服务器以及NginxWeb服务器的一键部署脚本_通过参数化命令实现快速安装与.zip
本项目是一个专为Linux系统设计的自动化安装与回滚管理工具集_它包含针对MySQL数据库Redis缓存服务器以及NginxWeb服务器的一键部署脚本_通过参数化命令实现快速安装与.zip
无线传感器网络（WSN）中的节能睡眠调度和基于树状的集群路由协议.zip
1.版本：matlab2014a/2019b/2024b 2.附赠案例数据可直接运行。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
跟网型逆变器小干扰稳定性分析与控制策略优化研究（Simulink仿真实现）
跟网型逆变器小干扰稳定性分析与控制策略优化研究（Simulink仿真实现）内容概要：本文围绕跟网型逆变器的小干扰稳定性展开分析，重点研究其控制策略的优化方法，并通过Simulink进行仿真实现。研究内容涵盖含分布式电源的配电网中逆变器的动态响应特性、小干扰下的系统稳定性判据，以及提升稳定性的控制策略设计与验证，旨在提升新能源并网系统的稳定性和可靠性。; 适合人群：从事电力系统、新能源并网、逆变器控制等相关领域的科研人员及电气工程专业的研究生。; 使用场景及目标：① 分析跟网型逆变器在小干扰下的稳定性问题；② 设计并优化逆变器控制策略以提升系统稳定性；③ 利用Simulink搭建仿真模型验证理论分析与控制方案的有效性。; 阅读建议：建议结合文中提供的Simulink仿真模型深入理解控制策略的设计逻辑与稳定性分析过程，重点关注系统建模、控制参数调节与仿真结果分析之间的关联，以提升实际科研与工程应用能力。
JavaScript

87,993

社区成员

224,694

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章