图片预览（兼容IE8）JS代码（包含demo）资源-CSDN文库

共20个文件

jpg：12个

html：4个

js：3个

4星 · 超过85%的资源需积分: 23 187 浏览量 2017-02-28 10:46:05 上传评论 1 收藏 1.91MB RAR 举报

在IT行业中，图片预览是一项常见的功能，尤其是在网页开发中，用户经常需要在不打开新窗口或下载图片的情况下查看图片内容。本资源提供了一个专门针对IE8浏览器的JS图片预览解决方案，这对于需要支持老旧浏览器的项目来说尤其有价值。IE8虽然已经不再主流，但在某些特定领域或地区，仍有一定的使用率。我们来详细了解一下这个图片预览功能的实现原理。在JavaScript中，我们可以使用`HTML5`的`<canvas>`元素来处理图片。`<canvas>`元素提供了一个画布，通过JavaScript可以在这个画布上进行各种图形操作，包括图片的加载、缩放和显示。然而，IE8并不支持`<canvas>`元素，因此需要使用其他方法。为了兼容IE8，开发者通常会借助`ActiveXObject`，这是Internet Explorer特有的对象，它可以创建与COM组件交互的实例。在这种情况下，我们可以创建一个`Image`对象来加载图片，然后利用`滤镜`技术，如`AlphaImageLoader`，来实现图片的预览。这种方法在IE8及以下版本中是有效的，但可能不适用于其他浏览器。此外，考虑到跨浏览器兼容性，开发者可能还会使用`data URL`方案。这种方案允许将图片数据编码为Base64字符串，嵌入到`src`属性中，这样任何支持`data URL`的浏览器都可以直接显示图片。不过，这种方式可能会增加页面加载时间，因为Base64编码后的数据通常比原始图片大。这个插件的实现可能包括以下几个步骤： 1. 创建`Image`对象，设置其`src`属性为待预览图片的URL。 2. 监听`Image`对象的`onload`事件，当图片加载完成时触发预览。 3. 在`onload`事件处理函数中，对IE8使用`ActiveXObject`和滤镜技术，对其他现代浏览器则使用`<canvas>`或者`data URL`。 4. 可能还包括调整图片大小、添加缩放手势等增强用户体验的功能。这个压缩包中的"图片预览"可能包含了源码、示例页面（demo）以及相关的说明文档。通过查看源码和运行demo，你可以更深入地理解如何在实际项目中应用这个插件，并根据需求进行自定义修改。总结一下，这个JS图片预览插件是专为兼容IE8设计的，它利用了`ActiveXObject`和滤镜技术来解决IE8不支持`<canvas>`的问题。对于现代浏览器，可能使用了`<canvas>`或`data URL`。通过这个资源，开发者不仅可以学习到如何实现图片预览，还可以了解到如何处理浏览器兼容性问题，这在Web开发中是非常重要的一环。

资源推荐

资源详情

资源评论

收起资源包目录

图片预览.rar （20个子文件）

图片预览

css

viewer.min.css 7KB

index4.html 6KB

img

tibet-1.jpg 113KB

tibet-4.jpg 527KB

tibet-3.jpg 207KB

tibet-5.jpg 374KB

thumbnails

tibet-1.jpg 31KB

tibet-4.jpg 75KB

tibet-3.jpg 45KB

tibet-5.jpg 65KB

tibet-2.jpg 40KB

tibet-6.jpg 44KB

tibet-2.jpg 235KB

tibet-6.jpg 160KB

index.html 3KB

viewer.min.js 22KB

jquery.min.js 95KB

viewer-jquery.min.js 20KB

index2.html 3KB

index3.html 4KB

<!DOCTYPE html> <html lang="zh-Hans"> <head> <meta charset="utf-8"> <title>JS/jQuery图片查看器viewer.js演示-自定义方法_dowebok</title> <link rel="stylesheet" href="css/viewer.min.css"> <style> * { margin: 0; padding: 0;} #dowebok { width: 700px; margin: 0 auto; font-size: 0;} #dowebok li { display: inline-block; width: 32%; margin-left: 1%; padding-top: 1%;} #dowebok li img { width: 100%;} .btns { position: relative; z-index: 10000; width: 700px; margin: 0 auto; text-align: center;} .btns a { display: inline-block; width: 70px; margin-top: 15px; line-height: 26px; font-size: 12px; color: #fff; background-color: #21b384; text-decoration: none;} .btns a:hover { background-color: #1fa67a;} </style> </head> <body> <h1>自定义方法</h1> <ul id="dowebok"> <li><img data-original="img/tibet-1.jpg" src="img/thumbnails/tibet-1.jpg" alt="图片1"></li> <li><img data-original="img/tibet-2.jpg" src="img/thumbnails/tibet-2.jpg" alt="图片2"></li> <li><img data-original="img/tibet-3.jpg" src="img/thumbnails/tibet-3.jpg" alt="图片3"></li> <li><img data-original="img/tibet-4.jpg" src="img/thumbnails/tibet-4.jpg" alt="图片4"></li> <li><img data-original="img/tibet-5.jpg" src="img/thumbnails/tibet-5.jpg" alt="图片5"></li> <li><img data-original="img/tibet-6.jpg" src="img/thumbnails/tibet-6.jpg" alt="图片6"></li> </ul> <div class="btns"> <a id="btn1" href="javascript:">show()</a> <a id="btn2" href="javascript:">hide()</a> <a id="btn3" href="javascript:">view()</a> <a id="btn4" href="javascript:">next()</a> <a id="btn5" href="javascript:">prev()</a> <a id="btn6" href="javascript:">move()</a> <a id="btn7" href="javascript:">moveTo()</a> <a id="btn8" href="javascript:">zoom()</a> <a id="btn9" href="javascript:">zoomTo()</a> <a id="btn10" href="javascript:">rotate()</a> <a id="btn11" href="javascript:">rotateTo()</a> <a id="btn12" href="javascript:">scale()</a> <a id="btn13" href="javascript:">scaleX()</a> <a id="btn14" href="javascript:">scaleY()</a> <a id="btn15" href="javascript:">play()</a> <a id="btn16" href="javascript:">stop()</a> <a id="btn17" href="javascript:">full()</a> <a id="btn18" href="javascript:">exit()</a> <a id="btn19" href="javascript:">tooltip()</a> <a id="btn20" href="javascript:">toggle()</a> <a id="btn21" href="javascript:">reset()</a> <a id="btn22" href="javascript:">destroy()</a> </div> <script src="js/viewer.min.js"></script> <script> var viewer = new Viewer(document.getElementById('dowebok'), { url: 'data-original' }); document.getElementById('btn1').onclick = function() { viewer.show(); } document.getElementById('btn2').onclick = function() { viewer.hide(); } document.getElementById('btn3').onclick = function() { viewer.view(5); } document.getElementById('btn4').onclick = function() { viewer.next(); } document.getElementById('btn5').onclick = function() { viewer.prev(); } document.getElementById('btn6').onclick = function() { viewer.move(-10, 0); } document.getElementById('btn7').onclick = function() { viewer.moveTo(0, 0); } document.getElementById('btn8').onclick = function() { viewer.zoom(0.1); } document.getElementById('btn9').onclick = function() { viewer.zoomTo(1); } document.getElementById('btn10').onclick = function() { viewer.rotate(90); } document.getElementById('btn11').onclick = function() { viewer.rotateTo(180); } document.getElementById('btn12').onclick = function() { viewer.scale(-1); } document.getElementById('btn13').onclick = function() { viewer.scaleX(-1); } document.getElementById('btn14').onclick = function() { viewer.scaleY(-1); } document.getElementById('btn15').onclick = function() { viewer.play(); } document.getElementById('btn16').onclick = function() { viewer.stop(); } document.getElementById('btn17').onclick = function() { viewer.full(); } document.getElementById('btn18').onclick = function() { viewer.exit(); } document.getElementById('btn19').onclick = function() { viewer.tooltip(); } document.getElementById('btn20').onclick = function() { viewer.toggle(); } document.getElementById('btn21').onclick = function() { viewer.reset(); } document.getElementById('btn22').onclick = function() { viewer.destroy(); } </script>  <style> body { margin: 0; border-left: 200px solid #ccc;} h1 { margin: 40px auto; font: 32px "Microsoft Yahei"; text-align: center;} .menu { position: absolute; left: 0; top: 0; bottom: 0; width: 200px; padding-top: 100px; font-family: Consolas,arial,"宋体"; background-color: #ccc;} .menu a { display: block; height: 40px; margin: 0 0 1px 2px; padding-left: 10px; line-height: 40px; font-size: 14px; color: #333; text-decoration: none;} .menu a:hover { background-color: #eee;} .menu .cur { color: #000; background-color: #fff !important;} .vad { margin: 50px 0 10px; font-family: Consolas,arial,宋体,sans-serif; text-align:center;} .vad a { display: inline-block; height: 36px; line-height: 36px; margin: 0 5px; padding: 0 50px; font-size: 14px; text-align:center; color:#eee; text-decoration: none; background-color: #222;} .vad a:hover { color: #fff; background-color: #000;} .thead { width: 728px; height: 90px; margin: 0 auto; border-bottom: 40px solid transparent;} .code { position: relative; margin-top: 100px; padding-top: 41px;} .code h3 { position: absolute; top: 0; z-index: 10; width: 100px; height: 40px; font: 16px/40px "Microsoft Yahei"; text-align: center; cursor: pointer;} .code .cur { border: 1px solid #f0f0f0; border-bottom: 1px solid #f8f8f8; background-color: #f8f8f8;} .code .h31 { left: 0;} .code .h32 { left: 102px;} .code .h33 { left: 204px;} .code .h34 { left: 306px;} .code ol { padding: 0;} .code { width: 800px; margin-left: auto; margin-right: auto;} pre { padding: 15px 0; border: 1px solid #f0f0f0; background-color: #f8f8f8;} .f-dn { display: none;} </style> <p class="vad"> <a href="http://www.dowebok.com/" target="_blank">dowebok.com</a> <a href="http://www.dowebok.com/192.html" target="_blank">说明</a> <a href="http://www.dowebok.com/192.html" target="_blank">下载</a> </p> <div class="menu"> <a href="./">1、默认效果</a> <a href="index2.html">2、jQuery版本</a> <a href="index3.html">3、回调函数</a> <a class="cur" href="index4.html">4、自定义方法</a> </div> </body> </html>

评论收藏

内容反馈