发一个自己用JS写的实用看图工具实现代码


Posted in Javascript onJuly 26, 2008

  因为某些网站把内容图片以每页显示一幅的形式呈现,而每页都有大量没用的垃圾信息(广告、新闻和无关图片),非常影响看图效率。所以写了这个,只要知道第一幅图片的URL,填在本网页里,设置一下起始和结束编号,就可以显示带有数字编号的图片了,同时还有一些常用到的贴心功能。当然,对于某些网站存放的无序图片就无能为力了。

介绍完了,下面是代码内容,希望能对JS新手们有点帮助吧(请自行把下面代码里所有的“'”替换为单引号。我对这里这个格式实在没辙了):

<SCRIPT> 
//CTRL+鼠标滚轮放大或缩小图片: 
function imgzoom(o) { 
    if(event.ctrlKey) { 
        var zoom = parseInt(o.style.zoom, 10) || 100; 
        zoom -= event.wheelDelta / 12; 
        if(zoom > 0) { 
            o.style.zoom = zoom + '%'; 
        } 
        return false; 
    } else { 
        return true; 
    } 
} 
//接收热键 
document.onkeydown=mykey; 
var IsShow=false; 
function  mykey() 
{ 
    var  key=window.event.keyCode; 
//    alert(key); 
    if (key==192){ 
        if (IsShow) showIt(); 
            else hideIt(); 
//        IsShow=!IsShow; 
    }    //45=Insert键,16=Shift,17=Ctrl,18=Alt,192=` 
    if (key==13 ) catchIt();//Enter,to display 
    if (key==186)  document.getElementById('add0').checked=!document.getElementById('add0').checked; 
} function hideIt() 
{    IsShow=true; 
    //隐藏 
//    document.getElementById('showHere').style.visibility='hidden';    //保留占用的显示面积 
    document.getElementById('showHere').style.display='none';        //回收占用的显示面积 
//    document.getElementById('imgUrlBackup').innerText=document.getElementById('thePath').value; 
//    document.getElementById('thePath').value=''; 
} 
function showIt() 
{    IsShow=false; 
    //显示 
//    document.getElementById('showHere').style.visibility="visible"; 
    document.getElementById('showHere').style.display=""; 
//    document.getElementById('thePath').value=document.getElementById('imgUrlBackup').innerText; 
} 
function catchIt() 
{ 
    ////document.write('<p><table>'); 
    showIt() 
    var sn=Number(document.getElementById('startNum').value); 
    var en=Number(document.getElementById('endNum').value); 
    var str=document.getElementById('thePath').value; 
    var IsAdd0=document.getElementById('add0').checked; 
    var lastPos; 
    var Discript='<center>按1旁边的“`”键可隐藏/显示图片区域。点击图片可在新窗口查看原图。CTRL+鼠标滚轮可放大或缩小图片。</center>'; 
    var showSth='<table>'; 
    var fn=''; 
    fn=''; 
    if (IsAdd0) 
    { 
        lastPos=str.lastIndexOf('#'); 
         str=str.replace(new RegExp('#','ig'),'0'); 
        for(var n=sn;n<=en;n++) 
        { 
            fn=str.substring(0,lastPos-String(n).length+1) + n + str.substring(lastPos+1); 
            showSth=showSth+GetImgSrc(fn); 
        } 
    } 
    else 
    { 
        for(var n=sn;n<=en;n++) 
        { 
            fn=str.replace('#',n); 
            showSth=showSth+GetImgSrc(fn); 
        } 
    } 
    showSth=showSth+'</table>'; 
//    alert(showSth); 
    document.getElementById('showHere').innerHTML=Discript+showSth+Discript; 
    //    document.refresh(); 
    IsShow=false; 
} 
function GetImgSrc(ImgUrl) 
{    //让图片载入后自动调整显示尺寸以适应屏幕,并提取文件体积信息附加到提示信息上 
    //在鼠标经过时,设置鼠标为手形状 
    //在鼠标点击时,在新窗口打开图片 
    //鼠标滚轮滚动时,触发缩放图片函数 
    //设置图片的提示信息 
    return ' <img onerror="javascript:this.style.display=\'none\';"  src="' + ImgUrl  + '" onload="if(this.width >screen.width*0.7) {this.resized=true; this.width=screen.width*0.7;DispImgInfo(this);}" onmouseover="if(this.resized) this.style.cursor='hand';" onclick="window.open(this.src);" onmousewheel="return imgzoom(this);" alt="URL:' + ImgUrl + ' 点击=在新窗口查看,CTRL+鼠标滚轮=缩放图片" >'; 
} 
//把所有图片按thesize文本框指定比例进行缩放 
function ImgZoom(Operation) { 
    var ScaleTo=document.getElementById('thesize').value/100; 
    if (Operation=="toBig") {ScaleTo=1+ScaleTo;} 
    for(var i=0;i<document.images.length;i++) 
    {    document.images[i].width=document.images[i].width*ScaleTo; 
        //不用改变高度,会自动跟随长度变化而等比变化. 
    } 
} 

//  宽:'+this.width+',高:'+this.height+','+getImgsize(this)+' 
function DispImgInfo(img) { 
    if (img.src!=null && img.src!="") 
            img.alt=img.alt + " 宽:"+img.width+",高:"+img.height+",大小:"+getImgsize(img); 
} 
function discAllimages() { 
    //getAllimages 
    for (var i=0; i<document.images.length; i++) 
    {    var img=document.images[i]; 
        if (img.src!=null && img.src!="") 
            img.alt=img.alt + " 宽:"+img.width+",高:"+img.height+",大小:"+getImgsize(img); 
    } 
} 
function getImgsize(x) { 
    var picSize=x.fileSize; 
    if (picSize>1000) picSize=Math.round(picSize/1024*100)/100+'KB'; 
    else if (picSize > 0) picSize=picSize+'字节'; 
    else picSize='未知'; 
    return picSize; 
} 
</SCRIPT> 

作者:ZhaoLiang -- 碧海情天、淹没天空的海  邮箱:thedoc01@163.com   制作时间:2006年8月 
<BR>功能:批量显示带数字编号的本地或网络图片。如 C:A##.gif 或 file:///C:/A##.gif 或 http://www.cctv.com/A3#.jpg 
<BR>说明:如图片名称是A02而非A2时,可用##指定编号的固定长度并选择“固位补零”,则不足位的会自动用0补齐) 
<BR>热键:`(~)键=显示开/关。;键=开关固位补零。图片上CTRL+鼠标滚轮=缩放图片。点击图片=在新窗口打开。HOME=篇幅较长时可返回开头。 
<HR> 
路径:<INPUT id='thePath' style="apos: " type='text'></INPUT> 
起始编号:<INPUT id='startNum' style="apos: " type='text'></INPUT> 
结束编号:<INPUT id='endNum' style="apos: " type='text'></INPUT><BR> 
<INPUT id='add0' type='checkbox'></INPUT>固位补零 
 <INPUT onclick=javascript:catchIt() type='button' value='显示之'></INPUT> 
<!--  <input type='button' id='see' onclick="javascript:showIt()" value='再显示'></input> 
--> 
<INPUT onclick=javascript:ImgZoom('toSmall') type='button' value='缩小'></INPUT> 
<INPUT onclick=javascript:ImgZoom('toBig') type='button' value='放大'></INPUT> 
缩放比例(百分之):<INPUT id='thesize' style="apos: " type='text' value=50>(回车即显示图片) 
<!--  <input type='button' onclick="javascript:discAllimages()" value="显示图片信息"> 
--> 
<HR> 
<DIV id='showHere'></DIV> 
<DIV id='imgUrlBackup' style="DISPLAY: none; apos: "></DIV> 
<SCRIPT> 
    document.getElementById('thePath').focus(); 
</SCRIPT> 
<!-- 
作者:ZhaoLiang -- 碧海情天、淹没天空的海  邮箱:thedoc01@163.com 
看显示区代码javascript:alert(document.getElementById('showHere').innerHTML); 
-->

平时也不注意整理,所以这个文件改过几个不同版本,发完了我才想起,曾经把hideIt()和showit()合并成一个函数(根据参数进行处理就行了),还有其它一些细节。因为对这里的编辑还不太熟,就不再改了,大家有兴趣自己试试吧。如果有什么建议能提供的话就更好了。

(更新:修改了一下,对于不存在的图片,自动隐藏,不占据显示空间——通过img的onerror事件进行处理。 
另外要说的,这里现在这个代码编辑器,很容易导致编辑后的内容大乱套。我花了很长时间来改正错误的替换代码,感觉比我写这个脚本工具都累。而且,里面SPAN的生成,完全没有优化,不必要的重复数量简直惊人,希望OpenSoft开发组尽快完善。)

Javascript 相关文章推荐
添加JavaScript重载函数的辅助方法2
Jul 04 Javascript
javascript定时保存表单数据的代码
Mar 17 Javascript
js简单实现点击左右运动的方法
Apr 10 Javascript
javascript实现消灭星星小游戏简单版
Nov 15 Javascript
jQuery延迟执行的实现方法
Dec 21 Javascript
基于vue 添加axios组件,解决post传参数为null的问题
Mar 05 Javascript
React props和state属性的具体使用方法
Apr 12 Javascript
JavaScript获取用户所在城市及地理位置
Apr 21 Javascript
Element-ui DatePicker显示周数的方法示例
Jul 19 Javascript
vue.js实现数据库的JSON数据输出渲染到html页面功能示例
Aug 03 Javascript
Vue+element+cookie记住密码功能的简单实现方法
Sep 20 Javascript
微信小程序实现加入购物车滑动轨迹
Nov 18 Javascript
对JavaScript的eval()中使用函数的进一步讨论
Jul 26 #Javascript
js树形控件脚本代码
Jul 24 #Javascript
js类中的公有变量和私有变量
Jul 24 #Javascript
javascript IE中的DOM ready应用技巧
Jul 23 #Javascript
css把超出的部分显示为省略号的方法兼容火狐
Jul 23 #Javascript
用JavaScript实现UrlEncode和UrlDecode的脚本代码
Jul 23 #Javascript
用js遍历 table的脚本
Jul 23 #Javascript
You might like
php防止站外远程提交表单的方法
2014/10/20 PHP
php检测mysql表是否存在的方法小结
2017/07/20 PHP
JS+XML 省份和城市之间的联动实现代码
2009/10/14 Javascript
超越Jquery_01_isPlainObject分析与重构
2010/10/20 Javascript
40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一
2011/12/31 Javascript
分享一个asp.net pager分页控件
2012/01/04 Javascript
判断滚动条到底部的JS代码
2013/11/04 Javascript
js实现表格字段排序
2014/02/19 Javascript
加随机数引入脚本不让浏览器读取缓存
2014/09/04 Javascript
浅谈Jquery为元素绑定事件
2015/04/27 Javascript
深入理解Javascript箭头函数中的this
2017/02/13 Javascript
BootStrap 标题设置跨行无效的解决方法
2017/10/25 Javascript
Angular实现的内置过滤器orderBy排序与模糊查询功能示例
2017/12/29 Javascript
jquery 输入框查找关键字并提亮颜色的实例代码
2018/01/23 jQuery
原生JS实现$.param() 函数的方法
2018/08/10 Javascript
vue多级复杂列表展开/折叠及全选/分组全选实现
2018/11/05 Javascript
Vue项目中使用better-scroll实现一个轮播图自动播放功能
2018/12/03 Javascript
解决微信小程序中转换时间格式IOS不兼容的问题
2019/02/15 Javascript
koa+mongoose实现简单增删改查接口的示例代码
2019/05/13 Javascript
vue swipeCell滑动单元格(仿微信)的实现示例
2020/09/14 Javascript
echarts实现晶体球面投影的实例教程
2020/10/10 Javascript
Python编程给numpy矩阵添加一列方法示例
2017/12/04 Python
python调用matplotlib模块绘制柱状图
2019/10/18 Python
tensorflow 获取所有variable或tensor的name示例
2020/01/04 Python
Python Scrapy框架第一个入门程序示例
2020/02/05 Python
Keras中的两种模型:Sequential和Model用法
2020/06/27 Python
python批量生成身份证号到Excel的两种方法实例
2021/01/14 Python
CSS3 中的@keyframes介绍
2014/09/02 HTML / CSS
Free People中国官网:波西米亚风格女装服饰
2016/08/30 全球购物
世界领先的在线地板和建筑材料批发商:BuildDirect
2017/02/26 全球购物
审计班子对照检查材料
2014/08/27 职场文书
2014离婚协议书范文两篇
2014/09/15 职场文书
公司处罚决定书
2015/06/24 职场文书
公司管理制度范本
2015/08/03 职场文书
零基础学java之循环语句的使用
2022/04/10 Java/Android
如何利用python实现Simhash算法
2022/06/28 Python