javascript代码实例教程-jQuery实现在线文档_js

上一篇: javascript代码实例教程-JQuery校... 下一篇:javascript代码实例教程-JavaScr...

javascript代码实例教程-jQuery实现在线文档

发布时间：2019-02-17 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-jQuery实现在线文档，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 1.1.1 摘要

现在，许多网站都提供在线图片和图书阅读的功能，这种方式比下载后阅读来的直观和人性化，要实现该功能涉及到点击处理和图片动态加载。

在接下来的博文中，我们将通过Javascript方式实现在线阅读这一功能。

1.1.2 正文

Index页面

首先，我们创建index.htML页面，它包含三个p元素分别是content、controls和doccontainer，其中controls用来显示翻页控件（前/后翻），而doccontainer用于显示图片，具体定义如下：

<!doctyPE html>

<head>

<;meta http-equiv="Content-type" content="text/html;charset=utf-8">

<tITle>Online Document Viewer Demo</title>

$(document).ready(function () {

$("#controls").viewer();

});

</script>

</head>

<body>

<p>

<h1>Online Document Viewer Demo</h1>

<p id="forwardpage" class="ios-arrow-right">Forward</p>

</p>

</p>

</p>

</body>

onlineviewer0

jQuery实现在线文档

图1 index页面

上面，我们定义了index.html页面，引用了jQuery库文件，在controls元素中包含backpage和forwardpage控件元素，它用于表示前或后翻页的操作；而doccontainer中img的元素用于显示文档，每当用户点击前或后翻页就会加载相应的内容到img元素中。

Javascript

接下来，我们需要实现在线文档的翻页功能和内容的动态加载，我们定义jQuery插件方法viewer()，当用户点击#backpage和#forwardpage控件元素时实现向前或后翻页并且动态地加载相应的文档，具体定义如下：

/*****

* The viewer function, when user click #forwardpage, #backpage or image directly,

* load the corrosponding image.

******/

$.fn.viewer = function(options) {

'use strict';

VAR opts = $.extend(true, {}, $.fn.viewer.defaults, options);

var $docImage = $('#doccontainer > img');

// Implements the image click function.

$docImage.on('click', function(e) {

e.preventDefault();

var currentId = $(this).attr('data-page'),

// Gets next page id.

nextImgId = parseint(currentId) + 1,

nextImgSrc = opts.imgDirectory;

if (currentId == opts.lastDocNum) {

// If the last page, then do nothing

return false;

}

nextImgSrc += getFile(nextImgId);

$(this).attr('data-page', nextImgId);

$(this).attr('src', nextImgSrc);

})

// Implements #forwardpage and #backpage control click function.

$('#controls > #forwardpage, #controls > #backpage').on('click', function(e) {

e.PReventDefault();

var currentId = $docImage.attr('data-page'),

nextImgSrc = opts.imgDirectory;

if ($(this).attr('id') == 'backpage') {

var nextImgId = parseInt(currentId) - 1;

} else if ($(this).attr('id') == 'forwardpage') {

var nextImgId = parseInt(currentId) + 1;

}

if ((currentId == opts.lastDocNum && $(this).attr('id') == 'forwardPage') ||

(currentId == 1 && $(this).attr('id') == 'backpage')) {

// If the last page or the First page, then do nothing.

return false;

}

// Loads corresponding image file.

nextImgSrc += getFile(nextImgId);

$docImage.attr('data-page', nextImgId);

$docImage.attr('src', nextImgSrc);

})

// Constructs the image file name.

function getFile(n) {

return n + '.' + opts.fileType;

}

};

上面，我们定义了jQuery方法viewer()，我们实现了#forwardpage、#backpage和#doccontainer的点击事件处理方法，当用户点击#forwardpage、#backpage或#doccontainer动态地加载相应的文档，我们通过修改img元素的src属性来动态加载文档，并且通过data-page属性保存当前文档的页码。

CSS样式

最后，我们给#forwardpage和#backpage控件元素添加CSS样式，具体化定义如下：

/*Back and Forward button style*/

.ios-arrow-left {

cursor:pointer;

display : block;

position:absolute;

z-index : 0;

left:50px;

top:50px;

height:30px;

width:auto;

padding: 0 10px 0 6px;

background-repeat:repeat-x;

background-size : 100% 30px;

background-position :0;

background-image : -webkit-linear-gradient(

bottom,

rgba(0,0,0,0) 0%,

rgba(0,0,0,0) 50%,

rgba(255,255,255,0.1) 50%,

rgba(255,255,255,0.3) 100%

);

border-radius: 5px;

border-bottom: 1px solid rgba(255,255,255,0.4);

box-shadow :0 -1px 1px rgba(0,0,0,0.2)inset,

0 1px 2px rgba(0,0,0,0.8)inset;

font-family : HelveticaNeue;

font-weight: 400;

font-size : 12px;

line-height : 30px;

text-align:center;

color:#fff;

text-shadow : 0px -1px 0px rgba(0,0,0,0.8);

}

.ios-arrow-left:before{

position:absolute;

content : ' ';

left:-8px;

top:3.5px;

height : 24px;

width: 24px;

z-index : 1;

background-repeat:repeat-x;

background-size : 20px 20px;

background-position :-1px -0.5px;

background-image :

-webkit-gradient(linear, left bottom, right top,

From(rgba(0,0,0,0)),

color-stop(0.5, rgba(0,0,0,0)),

color-stop(0.5, rgba(255,255,255,0.1)),

to(rgba(255,255,255,0.3)));

-webkit-transform : rotate(-45deg) skew(-10deg, -10deg);

border-top-right-radius : 10px;

border-top-left-radius :0px;

border-bottom-right-radius : 0px;

border-bottom-left-radius : 10px;

border-left : 1.5px solid rgba(255,255,255,0.4);

box-shadow : 1px 1px 1px rgba(0,0,0,0.4) inset,

-1px 1px 1px rgba(0,0,0,0.5) inset;

-webkit-mask-image :

-webkit-gradient(linear, left top, right bottom,

from(#000000),

color-stop(0.4,#000000),

color-stop(0.5, transparent),

to(transparent));

}

.ios-arrow-right {

cursor:pointer;

display : block;

position:absolute;

z-index : 0;

right:50px;

top:50px;

height:30px;

width:auto;

padding: 0 6px 0 10px;

background-repeat:repeat-x;

background-size : 100% 30px;

background-position :0;

background-image : -webkit-linear-gradient(

bottom,

rgba(0,0,0,0) 0%,

rgba(0,0,0,0) 50%,

rgba(255,255,255,0.1) 50%,

rgba(255,255,255,0.3) 100%

);

border-radius: 5px;

border-bottom: 1px solid rgba(255,255,255,0.4);

box-shadow :0 -1px 1px rgba(0,0,0,0.2)inset,

0 1px 2px rgba(0,0,0,0.8)inset;

font-family : HelveticaNeue;

font-weight: 400;

font-size : 12px;

line-height : 30px;

text-align:center;

color:#fff;

text-shadow : 0px -1px 0px rgba(0,0,0,0.8);

}

.ios-arrow-right:after{

position:absolute;

content : ' ';

right:-7.5px;

top:3px;

height : 24px;

width: 24px;

z-index : 1;

background-repeat:repeat-x;

background-size : 20px 20px;

background-position :-1px -0.5px;

background-image :

-webkit-gradient(linear, left bottom, right top,

from(rgba(255,255,255,0.3)),

color-stop(0.5, rgba(255,255,255,0.1)),

color-stop(0.5, rgba(0,0,0,0)),

to(rgba(0,0,0,0)));

-webkit-transform : rotate(135deg) skew(-10deg, -10deg);

border-top-right-radius : 10px;

border-top-left-radius :0px;

border-bottom-right-radius : 0px;

border-bottom-left-radius : 10px;

border-top : 1.5px solid rgba(255,255,255,0.4);

box-shadow : 1px 1px 1px rgba(0,0,0,0.5) inset,

-1px 1px 1px rgba(0,0,0,0.4) inset;

-webkit-mask-image :

-webkit-gradient(linear, left top, right bottom,

from(#000000),

color-stop(0.4,#000000),

color-stop(0.5, transparent),

to(transparent));

}

.ios-arrow-right,

.ios-arrow-right:after,

.ios-arrow-left,

.ios-arrow-left:before {

background-color: rgba(33,33,33,1);/*normalcolor*/

}

.ios-arrow-right:hover,

.ios-arrow-right:hover:after,

.ios-arrow-left:hover,

.ios-arrow-left:hover:before {

background-color: rgba(0,0,0,1);/*hovercolor*/

}

/*************************************************

觉得可用，就经常来吧！脚本宝典欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-jQuery实现在线文档全部内容，希望文章能够帮你解决javascript代码实例教程-jQuery实现在线文档所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

标签：Class const const const CSS CSS div HTML jQuery jQuery let post-format-gallery this

上一篇: javascript代码实例教程-JQuery校... 下一篇:javascript代码实例教程-JavaScr...

猜你在找的js相关文章

全站导航更多