一个很少见的图片显示代码

最新推荐文章于 2023-12-25 11:43:27 发布
最新推荐文章于 2023-12-25 11:43:27 发布
阅读量100 收藏
点赞数
文章标签： javascript ViewUI
演示:

http://www.nbbulo.com/test/pic.htm


在<head>和</head>之间加入

<SCRIPT language=javascript>
    function replaceImg(sourceUrl,imgUrl) {
  if(document.all.mainpic.src == sourceUrl){
   return;
     }
  var img = new Image();
        img.src = sourceUrl;
        if(img.width>280){
            img.height=img.height/(img.width/280);
            img.width=280;
        }
        var elem = document.getElementById("mainpic");
        elem.width = img.width;
        elem.height = img.height;
        elem.src = sourceUrl;
        document.getElementById("mainPicUrl").href = "" + imgUrl;
    }
</SCRIPT>


缩略图代码:在你需要显示小图的地方加上此代码

<img style=""CURSOR: hand"" οnclick="javascript:replaceImg('01.gif','01.gif')" src="01.gif" οnlοad="javascript:if(this.height>this.width){this.height=80}else{this.width=80}" border="1">
<img style=""CURSOR: hand"" οnclick="javascript:replaceImg('02.gif','02.gif')" src="02.gif" οnlοad="javascript:if(this.height>this.width){this.height=80}else{this.width=80}" border="1">
<img style=""CURSOR: hand"" οnclick="javascript:replaceImg('03.gif','03.gif')" src="03.gif" οnlοad="javascript:if(this.height>this.width){this.height=80}else{this.width=80}" border="1">
<img style=""CURSOR: hand"" οnclick="javascript:replaceImg('04.gif','04.gif')" src="04.gif" οnlοad="javascript:if(this.height>this.width){this.height=80}else{this.width=80}" border="1">


全图代码:在你需要显示大图的地方加上此代码

<A id="mainPicUrl" οnfοcus="this.blur()" href="01.gif" target="_blank"><img id="mainpic" style="cursor: hand" src="01.gif" οnlοad="javascript:if(this.height>this.width){this.height=280}else{this.width=280}" border="1" style="border-style: solid; border-color: #000000; padding: 1"></A>

注意:我上面的代码使用的自动缩放功能,大图宽度最大显示为280px,小图宽度最大为80px,大小你自己修改吧
weixin_34194317
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
关于图片的代码
xingxingsuhuan的专栏
06-04 1228
 ///     /// 生成缩略图    ///     /// 原图片地址    /// 缩略图地址    /// 缩略图宽度    /// 缩略图高度    /// 生成缩略的模式    public static void MakeThumNail(string originalImagePath, string thumNailPath, int width, int height, s
一个关于图片处理的代码
Waiting for ...
06-06 1081
一个关于图片处理的代码 /* * Create by Alex Bai @ 2005-04-11 23:05 *  * Description: a Image Dll about Operation to Image *  * 1. Add Water Mark to Image * 2. Add Characters to Image * 3. Add Border to Image 
jar包导出无法显示图片或者音乐_我想用代码做一张这样的图片。
weixin_39675926的博客
11-02 121
“小路，我想做一个这种图片，你会吗?”“So easy！当然会！并且不用代码！”来来来，首先给你科普一下这图是有专业术语的：词云“词云”就是对网络文本中出现频率较高的“关键词”予以视觉上的突出，形成“关键词云层”或“关键词渲染”，从而过滤掉大量的文本信息，使浏览网页者只要一眼扫过文本就可以领略文本的主旨。<下面的每一个推荐我举例>下面的所有中文词云基于的数据是：我抓取了网易云音乐：晴天...
图片广告随机显示代码
04-17 3141
//随机显示广告代码 tips = new Array(4); tips[0] = ''; tips[1] = ''; tips[2] = ''; tips[3] = ''; index = Math.floor(Math.random() * tips.length); document.write(tips[index]);
php中随机显示图片的函数代码
agen15的博客
11-04 1020
/**********************************************  * Filename : img.php  * Author : freemouse  * web : www.cnphp.info  * email :freemouse1981@gmail.com  * Date : 2010/12/27  * Usage:  *   *   *
LCD图片显示 C语言 程序代码
02-08
LCD图片显示 C语言 程序代码
随机显示图片代码.zip
07-22
随机显示图片代码，显而易见，最高的效率就是对现有材料的最佳利用。
jQuery图片位置随机显示代码
04-09
jQuery图片位置随机显示代码是一款仿支付宝抢红包游戏图片位置随机显示代码。
高亮显示的图片展示效果特效代码
03-20
用js实现的一个Flash滚动轮换显示图片代码生成器
10-31
标题中的“用js实现的一个Flash滚动轮换显示图片代码生成器”指的是一个JavaScript程序，它能够自动生成用于在网页上创建Flash效果的滚动图片轮播代码。这种代码通常用于网站设计，以展示多张图片并自动循环播放，...
opencv c++显示图片代码
weixin_42579969的博客
01-12 114
下面是一个简单的 OpenCV C++ 程序，用于显示图像: #include <opencv2/opencv.hpp> #include <iostream> using namespace cv; using namespace std; int main(int argc, char** argv) { // 读取图像 Mat image = im...
HTML5提供了多种方式来显示图像，以下是几种常见的图像显示方式
BLOG域名:programb.blog.csdn.net
06-30 4413
这些只是HTML5中显示图像的一些常见方式，实际上还有许多其他的方法和技巧可以根据具体需求进行选择和使用。上述代码中，通过创建一个Canvas元素，并使用JavaScript获取Canvas的上下文对象，然后创建一个Image对象并指定图像的URL。属性，可以为不同的视口大小提供不同的图像版本，从而实现响应式图像。通过指定图像的URL，可以在网页中插入图像。通过创建自定义的Web组件，可以封装复杂的图像显示逻辑，并在页面中重复使用。，并指定了容器的宽度和高度，实现了背景图像的显示。属性指定了图像的URL，
python展示图片的四种方法
最新发布
weixin_57111012的博客
12-25 4737
在 Python 中，有多种库可用于图像展示。以下是一些常见的展示图片的方法和相关的库。
html—显示照片（方法一）
yuan283095的博客
09-08 6386
1.在桌面上新建一个文件夹，将所要添加的照片放到文件夹中 2.新建txt文件，命名更改为.html 3.再新建一个txt文件，打开上面的html文件书写代码 4.得到的文件夹中内容包括： 5.代码为： 6.显示结果为： 注：图片过大，代码为初始代码，并未设置大小。
显示图片java代码_用于显示下载或是显示图片的一段代码
weixin_33851300的博客
02-15 323
String id = request.getParameter("downLoadFileId");String fileName = request.getParameter("fileName");String path = "C:\\upload\\"+id+"\\"+fileName;(存放文件的路径)response.setHeader("Content-Disposition", ...
一个很简单易懂的js图片显示代码
bobo928843007的专栏
05-27 831
/*代码与html分离，简单易懂，可读性高*/     http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 无标题文档 #tupianlunhuan  {              position:absolute;
Html <img>显示图片的三种方式
热门推荐
无论何时都不要停止学习，这是改变自己的必要条件
12-10 1万+
1.显示本地图片 2.显示网络上的图片,不过网络上的图片就是需要每次都去加载,可能会费流量 3.下面这种就是我们今天所要讲的第三种方式显示图片,它其实也就是根据http网络上的图片通过利用Data URL(data:image/jpg;base64,)将小图片生成数据流形式显示出来的 有时候我们会看到<img src="data:image/jpg;base64,xxxxxxx……”...
使用微信小程序写一个简单的图片显示代码
05-27
好的，下面是一个简单的微信小程序代码，可以用于显示图片： ```xml <!-- index.wxml --> <view class="container"> <image src="{{imgUrl}}"></image> </view> ``` ```javascript // index.js Page({ data: { imgUrl: 'https://example.com/image.jpg' // 图片的URL地址 } }) ``` ```css /* index.wxss */ .container { display: flex; justify-content: center; align-items: center; height: 100%; } image { max-width: 100%; max-height: 100%; } ``` 这个代码会在微信小程序界面中显示一个图片，图片的URL地址通过 `imgUrl` 变量来指定。需要注意的是，图片的URL必须是HTTPS协议的，否则无法显示。 这只是一个简单的示例代码，您可以根据实际需求进行修改和扩展。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值