超NB的js图片预览效果代码-小图热点 大图清醒显示

最新推荐文章于 2022-04-18 00:15:15 发布
最新推荐文章于 2022-04-18 00:15:15 发布
阅读量1.6k 收藏
点赞数
分类专栏： JS 图片效果 文章标签： js JS 地图 热点
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Javascript Images zoom-out view sample. Brought to you by 斩梦人.天天
QQ:22062019</title>
<script language="JavaScript">
<!--
var dshowW=450; //默认预览图宽度(可由小图的showW,showH动态指定)
var dshowH=300; //默认预览图高度
var bborder=1; //大图边框
var sborder=1; //小图边框
var vborder=1; //小预览图边框
var bigW,bigH,smallW,smallH,showW,showH,viewW,viewH;//大图,小图,预览窗,小预览窗
var nview,nflag,picstatus,tempo,abox,zoomX,zoomY;
//初始化
window.οnlοad=function init(){
    isIE=window.event?1:0;
    picshow.style.borderWidth=bborder;
    picshow.style.width=dshowW;
    picshow.style.height=dshowH;
    bpic.style.display="";
    abox=document.body.getElementsByTagName("div"); //初始化所有小图
    for (n=0;n<abox.length;n++)
        if (abox[n].className=="picbox"){
            var o=abox[n];
            var view=getview(o);
            var img=getimg(o);
            view.style.borderWidth=vborder;
            o.style.borderWidth=sborder;
            o.style.width=img.width+sborder*2*isIE;
            o.style.height=img.height+sborder*2*isIE;
            o.setAttribute("pid",n); //小图标记,主键唯一
            if (o.getAttribute("show")=="show") loadpic(o);
            o.οnmοuseοut=function (){setTimeout(nview.style.visibility='hidden');}
        }
}
//载入图片
function loadpic(o){
    var view=getview(o);
    var img=getimg(o);
    bpic.style.display="none";
    nview=view; //标记活动小预览窗
    nflag=o.getAttribute("pid"); //当前图片标记,用来判断切换图片
    //改变预览窗大小
    if (img.getAttribute("showW")!=null) showW=parseInt(img.getAttribute("showW"));
    else showW=dshowW;
    if (img.getAttribute("showH")!=null) showH=parseInt(img.getAttribute("showH"));
    else showH=dshowH;
    picshow.style.width=showW+isIE*bborder*2;
    picshow.style.height=showH+isIE*bborder*2;
    loading.style.marginTop=(showH-loading.offsetHeight)/2;
    if (img.getAttribute("dLeft")) bpic.style.marginLeft=-parseInt(img.getAttribute("dLeft"));
    if (img.getAttribute("dTop")) bpic.style.marginTop=-parseInt(img.getAttribute("dTop"));
    picstatus="loading";
    tempo=o;
    bpic.src=img.lowsrc;
}
//图片载入完成
function loaddone(o){
    bpic.style.display="block";
    var view=getview(o);
    var img=getimg(o);
    smallW=img.width; //改变小图,小预览窗大小
    smallH=img.height;
    bigW=bpic.width;
    bigH=bpic.height;
    if (showW>bigW){//如果预览图比大图大,则等于大图
        showW=bigW;
        picshow.style.width=showW+isIE*bborder*2;
    }
    if (showH>bigH){
        showH=bigH;
        picshow.style.height=showH+isIE*bborder*2;
    }
    zoomX=bigW/smallW;
    zoomY=bigH/smallH;
    viewW=showW*smallW/bigW;
    viewH=showH*smallH/bigH;
    nview.style.width=viewW-vborder*2*!isIE;
    nview.style.height=viewH-vborder*2*!isIE;
    nview.style.display="block";
    img.style.top=-nview.offsetHeight;
    if (!nview.style.left) nview.style.left=0;
    if (!nview.style.top) nview.style.top=0;
    picstatus="done"
}
//移动事件
function move(e,o,flag){ //flag,对象来源标记,FF下view的定位需要
    o=isIE?o.parentElement:o.parentNode;
    if (o.getAttribute("pid")!=nflag){ //判断是否切换了图片
        nview.style.visibility="hidden";
        loadpic(o); //载入新图片
    }
    if (picstatus="done"){ //如果大图载入完毕
        if (nview.style.visibility="hidden") nview.style.visibility="visible";
        var e=isIE?window.event:e;
        if (isIE==0){ //分别获取FF或IE的view位置
            if (flag==1){ //由于o的来源不同,使用不同的算法定位
                vX=e.layerX+parseInt(nview.style.left)-nview.offsetWidth/2-vborder;
                vY=e.layerY+parseInt(nview.style.top)-nview.offsetHeight/2-vborder;
            }else{
                vX=e.layerX-nview.offsetWidth/2-vborder;
                vY=e.layerY-nview.offsetHeight/2-vborder;
            }
        }
        else{
            vX=e.offsetX-nview.offsetWidth/2;
            vY=e.offsetY-nview.offsetHeight/2;
        }
        if (vX < 0) vX = 0; //边界判断,不能超出缩略图的范围
        if (vY < 0) vY = 0;
        if (vX > smallW-viewW) {vX=smallW-viewW;mX=bigW-showW}else{mX=vX * zoomX;}
        if (vY > smallH-viewH) {vY=smallH-viewH;mY=bigH-showH}else{mY=vY * zoomY;}
        nview.style.left=vX;
        nview.style.top=vY;
        bpic.style.marginLeft = - mX; //刷新预览窗口
        bpic.style.marginTop = - mY;
    }
}
//得到view
function getview(o){
    var arr=o.getElementsByTagName("div");
    var n;
    for (n=0;n<arr.length;n++)
        if (arr[n].className="view") return arr[n];
}
//得到img
function getimg(o){
    var arr=o.getElementsByTagName("img");
    var n;
    for (n=0;n<arr.length;n++)
        if (arr[n].className="spic") return arr[n];
}
//-->
</script>
<style type="text/css">
<!--
*{padding:0;margin:0}
body{color:white;background:black;font:bold 12px/18px tahoma;color:white;}
#picshow{border:1px red solid;width:200;height:150;overflow:hidden;margin:0 auto}/*width,height随便定义,为了第一次显示时能看见loading*/
#bpic{display:none}
#loading{font:bold 22px/30px tahoma;color:white;}
#loading img{vertical-align:middle;position:relative}
#loading .text{font:bold 12px/20px tahoma;color:white;}
.picbox{border:1px green dashed;overflow:hidden;float:left;width:0;height:0;text-align:left}/*注意:overflow:hidden;text-align:left不可更改,如果在IE的表格中定位会出问题*/
.spic{position:relative;}/*position:relative不可更改*/
.view{border:1px silver solid;z-index:100;font-size:1px;position:relative;visibility:hidden;display:none}/*position:relative;visibility:hidden;display:none不可更改*/
td{text-align:center;height:60px;font-size:30px;margin:0 auto}
//-->
</style>
</head>
<body>
Some text here...<br>ok.| 您需要做的仅仅是加入picshow块和picbox块,设置必要参数,剩下的就让JS去做吧! (移到小图上看更多说明)
<table cellpadding="0" cellspacing="0" border="2" width="100%">
<tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
</tr>
<tr>
    <td width="520" align="center">
<div id="picshow">
    <img id="bpic" οnlοad="loaddone(tempo)"/>
    <div id="loading">
        <img src="http://www.jz123.cn/myjs/loading.gif" border="0"/> Loading
        <div class="text">Please wait...<br><br><br></div>
    </div>
</div>
    </td>
    <td>
<div class="picbox" show="show"><!--设置show显示默认图片-->
    <div class="view" οnmοusemοve="if (!isIE) move(event,this,1)"></div>
    <img class="spic" lowsrc="http://www.jz123.cn/myjs/b1.jpg" src="http://www.jz123.cn/myjs/s1.jpg" οnmοusemοve="move(event,this,0)" dLeft="700" dTop="300" title="设置标签属性show='show'显示默认图片,设置dLeft,dTop定义默认偏移量"/><!--src:小图,lowsrc:大图,showW/showH:可设置预览窗大小-->
</div>
<div class="picbox">
    <div class="view" οnmοusemοve="if (!isIE) move(event,this,1)"></div>
    <img class="spic" lowsrc="http://www.jz123.cn/myjs/b2.jpg" src="http://www.jz123.cn/myjs/s2.jpg" οnmοusemοve="move(event,this,0)" showW="200" showH="200" title="可自定义预览图大小"/>
</div>
<div class="picbox">
    <div class="view" οnmοusemοve="if (!isIE) move(event,this,1)"></div>
    <img class="spic" lowsrc="http://www.jz123.cn/myjs/b4.jpg" src="http://www.jz123.cn/myjs/s4.jpg" width="302" οnmοusemοve="move(event,this,0)" title="小图可以按比例放大"/><!--这里可以重新设置小图大小,尽量与大图比例保持一致-->
</div>
    </td>
    <td>In table
<div class="picbox">
    <div class="view" οnmοusemοve="if (!isIE) move(event,this,1)"></div>
    <img class="spic" lowsrc="http://www.jz123.cn/myjs/b3.jpg" src="http://www.jz123.cn/myjs/s3.jpg" width="60" οnmοusemοve="move(event,this,0)" title="也可以按比例缩小"/>
</div>
<div class="picbox">
    <div class="view" οnmοusemοve="if (!isIE) move(event,this,1)"></div>
    <img class="spic" lowsrc="http://www.jz123.cn/myjs/b3.jpg" src="http://www.jz123.cn/myjs/s3.jpg" οnmοusemοve="move(event,this,0)" showW="500" showH="200" title="可以嵌套在table中"/>
</div>
    </td>
</tr>
</table>
Out of table
<div class="picbox">
    <div class="view" οnmοusemοve="if (!isIE) move(event,this,1)"></div>
    <img class="spic" lowsrc="http://www.jz123.cn/myjs/b2.jpg" src="http://www.jz123.cn/myjs/s2.jpg" οnmοusemοve="move(event,this,0)" title="放在table外面也没有问题"/>
</div>
<div class="picbox">
    <div class="view" οnmοusemοve="if (!isIE) move(event,this,1)"></div>
    <img class="spic" lowsrc="http://www.jz123.cn/myjs/s4.jpg" src="http://www.jz123.cn/myjs/s4.jpg" οnmοusemοve="move(event,this,0)" showW="1000" showH="1000" title="showW='1000' showH='1000',如果指定预览图比原图大,则使用原图大小" />
</div>
<div class="picbox">
    <div class="view" οnmοusemοve="if (!isIE) move(event,this,1)"></div>
    <img class="spic" lowsrc="http://www.jz123.cn/myjs/b5.jpg" src="http://www.jz123.cn/myjs/s5.jpg" οnmοusemοve="move(event,this,0)" showW="160" showH="320" title="代码较上一版本健壮,能在IE,FF下稳定工作,基本支持OP,欢迎大家帮助测试!"/>
</div>
<div class="picbox">
    <div class="view" οnmοusemοve="if (!isIE) move(event,this,1)"></div>
    <img class="spic" lowsrc="http://www.jz123.cn/myjs/b5.jpg" src="http://www.jz123.cn/myjs/s5.jpg" οnmοusemοve="move(event,this,0)" width="500" height="112" title="即使没有按比例拉伸,也可以正常工作"/>
</div>
</body>

</html>


转：http://myjs.jz123.cn/js/beijing/3236.html

lonlonhero
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS实现图片上的热点功能.rar
07-10
JS实现图片上的热点功能，当鼠标放到图像的某一部分时，该部分为呈现出链接的方式，并会显示提示框，在一些地图类网站使用较多，在国外的flickr网站见到过这种功能，若想实现此功能的，可借本代码作为参考。
JS生成图片热点
feng65536的博客
04-21 1432
实现思路： 1、图片容器采用relative的定位方式。 2、监控鼠标左键按下动作。并时时记录和修改轨迹层div的大小。 3、鼠标抬起后记录鼠标移动的起始位置。生成图片热点区域。 效果如下： 输入节点名称后可以生产JSON对象 代码如下： <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <hea...
图片热点标注html,js图片上标注热点。
weixin_30783611的博客
06-09 580
@PiLee 嗨 你好，当设置热点的时候，点击的位置是在className为ball的区域时候，是有问题的，如下图。本质上是没有正确的获取问题中所需要的鼠标位置坐标问题中所需要的鼠标位置应该是相对于热点图的位置，而e.offsetX, e.offsetY则是鼠标相对于当前点击元素的位置关系。预览 因为图片链接的是百度下的，可能不能正常显示html sasshtml,body{margin: ...
javascript/js热点图的制作及徘徊事件的制作
月影WEB的博客
04-18 633
我们来看看这次热点制作和JS徘徊事件的制作过程 如下图所示： 首先，我们先选择一张图片 然后我们开始先制作热点：过程如下 我们先在代码界面里面加入 <h3 id="yueying">月影的网站(www.yydpt.com)<h3><br />这个代码及其 <img src="12.25-1.png" />图片代码，然后选择软件的设计界面： 接着我们来选择绘“制椭圆热点”，步骤如图： 做好热点之后，我们来看看代码.
【前端】HTML图片热点功能
而我想……成为一个有趣的妞
06-15 3924
<img src="topperVIdeoBottom.jpg" usemap="#Map" /> <style> /*去掉点击area时所产生的边框*/ area{border:0;outline:none;} </style> <!-- rect：矩形 --> <!-- polygon：多边形 --> <map name=...
超NB的js图片预览效果代码
07-19
超NB的js图片预览效果代码超NB的js图片预览效果代码
NB-IoT模块原理图.pdf
05-18
NB-IoT模块原理图.pdf
NB∕T 35083-2016 水电工程竣工图文件编制规程.pdf
03-30
NB∕T 35083-2016 水电工程竣工图文件编制规程
超NB的国外图片预览效果
11-22
绚丽的图片预览，国外高品质网站代码。 适用各种浏览器，JS实现，强烈推荐，倾情奉献!!!!
NB上云测试代码_NB-LOT_STM32F103_
10-02
实现NB模块上云 连接ONENET网
jquery+css3图片热点标注特效
10-17
jquery+css3图片热点标注特效，亲测可用，实现图片执点标注功能
一个很牛逼的JS 效果。 窗口效果
02-08
很不错的窗口效果。在网页里模仿QQ软件..喜欢的朋友下来看看把。
CSS+JS 图像热点点击提示
09-28
图像热点提示功能实例，亲测，可以点击提示图片信息。
jquery图片热点定位标注特效
09-15
jquery+css3图片热点标注介绍特效，适用于在大图上添加多个产品得麻点标注。精确定位到产品相应位置、点击标注获取产品详情得弹窗。
CSS+JS图像热点提示功能实例
06-30
CSS+JS图像热点提示功能实例! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/
Jquery 图片 热点区域 选择
03-26
很多人都在找当鼠标移动到地图的热点区域时突出显示热点区域js代码。 图片热点区域选择 图像热点区域瞄点 汇总分类，里面有中国地图热点区域选择 作为例子。欢迎大家下载
大学物理册答案上下都有
最新发布
04-26
大学物理册答案上下都有
UWB超宽带信道研究及源码.zip
04-26
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
Suno AI语音技术的资源描述
04-26
Suno AI 是一家领先的人工智能（AI）公司，专注于开发创新的语音技术和解决方案。以下是关于 Suno AI 的资源描述： 语音识别技术：Suno AI 拥有先进的语音识别技术，能够准确地将语音转换为文本。他们的语音识别系统经过了大量的训练和优化，具有高度的准确性和鲁棒性，可应用于多种场景，如语音助手、语音搜索、智能客服等。 语音合成技术：除了语音识别，Suno AI 还致力于开发自然、流畅的语音合成技术。他们的语音合成系统能够生成高质量、逼真的语音输出，可以用于语音助手、自动化客服、有声书等领域。 智能语音应用开发：Suno AI 提供了一系列工具和平台，帮助开发者快速构建和部署智能语音应用。他们的开发工具包括 API 接口、SDK、开发文档等，支持多种编程语言和平台，让开发者可以轻松地集成语音功能到自己的应用中。 行业解决方案：Suno AI 为各行各业提供定制化的语音解决方案，满足客户特定的需求和业务场景。他们与零售、金融、医疗等领域的企业合作，提供智能语音客服、语音导航、语音支付等解决方案，帮助客户提升服务质量和效率。
vue-print-nb 打印图片沾满A4纸
01-27
根据提供的引用内容，可以通过设置图片的宽度和高度来使其沾满A4纸。以下是一个示例代码： ```html ; height: 100%;" /> ``` 在上述代码中，将图片的宽度和高度都设置为100%，这样图片就会自动调整大小以...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值