昨天接到一个任务,给新生提供往年分班考试题手机网页下载的福利,因为需要尽快完成了这个任务,所以就采取了简单粗暴的方式。

可以下载的链接

如果将pdf直接作为标签a的目标资源,就会直接被浏览器打开,这样子达不到下载的目的,所以在网上找到了如下的代码

<?php  $filename = 'englishBandingExam2013.pdf';  //文件的类型  header('Content-type: application/pdf');  //下载显示的名字  header('Content-Disposition: attachment; filename="englishBandingExam2013.pdf"');  readfile("$filename");  exit();  ?> 

代码还是很简单易懂的,但是感觉十分粗暴,可能会有点不妥,所以决定再添加一个预览的功能。

预览pdf

本来打算借助网上js插件来实现pdf预览功能,实在试了好久都没要成功,所以就用十分逗得方法——把pdf拆成一张张图片放到网页里,先只载入一张或两张图片,然后根据用户滑动屏幕向下浏览,动态加载以保证用户加载页面不用整个一起加载(7.85mb),这样可以减少用户遇到网速慢一直卡加载以为我们提供的网址错误的情况。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>预览</title>
</head>

<style>
    img {
        width: 100%;
        min-width:50%;
    }
</style>

<body>
    <img src="load.gif" class="scrloadpic" xsrc="pics/1.jpg"/>
    <img src="load.gif" class="scrloadpic" xsrc="pics/2.jpg"/>
    <img src="load.gif" class="scrloadpic" xsrc="pics/3.jpg"/>
    <img src="load.gif" class="scrloadpic" xsrc="pics/4.jpg"/>
    <img src="load.gif" class="scrloadpic" xsrc="pics/5.jpg"/>
    <img src="load.gif" class="scrloadpic" xsrc="pics/6.jpg"/>
    <img src="load.gif" class="scrloadpic" xsrc="pics/7.jpg"/>
    <img src="load.gif" class="scrloadpic" xsrc="pics/8.jpg"/>
    <img src="load.gif" class="scrloadpic" xsrc="pics/9.jpg"/>
    <img src="load.gif" class="scrloadpic" xsrc="pics/10.jpg"/>
    <img src="load.gif" class="scrloadpic" xsrc="pics/11.jpg"/>
    <img src="load.gif" class="scrloadpic" xsrc="pics/12.jpg"/>
    <img src="load.gif" class="scrloadpic" xsrc="pics/13.jpg"/>
    <img src="load.gif" class="scrloadpic" xsrc="pics/14.jpg"/>
    <img src="load.gif" class="scrloadpic" xsrc="pics/15.jpg"/>
    <img src="load.gif" class="scrloadpic" xsrc="pics/16.jpg"/>
    <img src="load.gif" class="scrloadpic" xsrc="pics/17.jpg"/>
    <img src="load.gif" class="scrloadpic" xsrc="pics/18.jpg"/>
</body>
<script src="js/jquery.min.js"></script>
<script>
    function scrollLoading(){
        // 页面翻过去的距离 以及 页面+窗口高度
        var st = $(window).scrollTop(), sth = st + $(window).height();
        var $targetpics = $("img.scrloadpic");
        var len = $targetpics.length;
        for(var i=0; i< len; i++)         {             var $temppic = $targetpics.eq(i);             // 图片上边缘位置             var post = $temppic.position().top;             var posb = post + $temppic.height();             // 如果图片在屏幕范围可见             if((post > st && post < sth) || (posb > st && posb < sth))
            {
                // 获取隐藏的链接
                var url = $temppic.attr("xsrc");
                if(url != "")
                {
                    $temppic.attr("src", url);
                    $temppic.attr("xsrc", "");
                }
            }
        }
    }
    // 没有滑动时的第一次
    scrollLoading();
    // 事件监听
    $(window).bind("scroll", scrollLoading);
</script>
</html>

一些关于这个code的小tips:
1 从jQuery 1.7开始,.on() 方法是将事件处理程序绑定到文档(document)的首选方法。对于早期版本,.bind()方法用于直接附加一个事件处理程序到元素上。处理程序附加到jQuery对象中当前选中的元素,所以,在.bind()绑定事件的时候,这些元素必须已经存在。对于更为灵活的事件绑定,可以查看.on() 或者 .delegate()事件代理。
2 .eq() 描述: 减少匹配元素的集合为指定的索引的哪一个元素。
3 这个代码要求本来用来占位置的img够大,否则还是会全部一起载入

优秀的展示页面

前端还是要继续加强,这么一个简单的页面用简单的功能实现总共花了我三个多小时的时间,还得好好练练。
pdf预览与下载
代码如下:

<body>

<div class="content" style="position: absolute; height:100%; width:100%">
    <!---->

<div class="services" id="services">

<div class="container">

<div class="service-head">

<h3>英语分班考试题</h3>



目前小瓜提供西北工业大学2013年新生入学英语分班考试试卷pdf的在线预览和下载

(总大小7.85mb)

            </div>


<div class=" services-grid">
                <a  class="col-md-6 service-grid" href="preview.html" target="_blank" style="text-decoration: none;">


                        <span class="glyphicon glyphicon-zoom-in" style="font-size: 45px; color:white;"></span>

<h5>预览</h5>



点此在新页面立即浏览pdf


                </a>
                <a  class="col-md-6 service-grid" href="download.php?file=/englishBandingExam2013.pdf" style="text-decoration: none;">

                        <span class="glyphicon glyphicon-cloud-download" style="font-size: 45px;color:white"></span>

<h5>下载</h5>



点此前请将该页重新在支持下载功能的浏览器中打开(如uc浏览器),也可将链接复制转发给pc端


                </a>
            </div>

        </div>

    </div>

    <!---->


<div class="contact" id="contact">

<div class="container">

<div class="contact-head">


团委网络新媒体协会 小瓜工大助手提供

            </div>

        </div>

    </div>

</div>

</body>
<script>
    $('body').on('touchmove', function (event) {
        event.preventDefault();
    });
</script>

</html>

小tips:
1 其中css实现了在不同屏幕大小切换时,元素大小位置渐变,而不是突变

* {
	margin: 0;
	padding: 0;
	-webkit-transition: all 0.8s;
	-moz-transition: all 0.8s;
	-ms-transition: all 0.8s;
	-o-transition: all 0.8s;
	transition: all 0.8s;
}
.service-grid {
	min-height: 270px;
	width: 23%;
	margin-bottom: 1em;
	background: #c45158;
	float: left;
	margin-right: 2.6%;
	padding: 3em 2em;
}

@media screen and (max-width:780px) {
	.service-grid{
		width: 48.5%;
	}
}

2 为了移动端使用起来像是个移动应用,所以防止了触屏上下滑动的默认效果,但同时会导致横屏的时候根本无法使用。

「Unity Shaders」Surface Shaders and Texture Mapping

 本文内容参考《Unity 5.x Shaders and Effects Cookbook》 表面着色器和材质贴图 总的来说,一个表面着色器有两个关键的步骤。第一,必须确定材质的物理...

阅读全文

「Unity Shaders」Creating First Shader

创建第一个着色器 最近学习了一段时间Unity Shader相关知识,在进一步自顶向下学习计算机图形学之前,先将之前看《Unity 5.x Shaders and Effects Cookbook...

阅读全文

《Effective c++》、《Inside C++ Model》 小结(一)

最近瞻仰了一下Scott Meyers久负盛名的《effective c++》,特来总结一下,以加深一下印象与防止自己今后记忆力衰退。这本书里很多都是工程上很有意思的tips...

阅读全文

2 条评论

欢迎留言