一段javascript实现缩略图的好代码

最新推荐文章于 2024-09-11 23:16:45 发布
最新推荐文章于 2024-09-11 23:16:45 发布
阅读量238 收藏
点赞数
文章标签： javascript xhtml image server function html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cb2233/article/details/2506497
版权

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>无标题页</title>

    <script language="javascript" type="text/javascript">
        //显示缩略图
        function DrawImage(ImgD,width_s,height_s)
        {
            /*var width_s=139;
            var height_s=104;
            */
            var image=new Image();
            image.src=ImgD.src;
            if(image.width>0 && image.height>0)
            {
                flag=true;
                if(image.width/image.height>=width_s/height_s)
                {
                    ImgD.width=width_s;
                    ImgD.height=(image.height*width_s)/image.width;
                   
                }
                else
                {
                    if(image.height>height_s)
                    {
                        ImgD.height=height_s;
                        ImgD.width=(image.width*height_s)/image.height;
                    }
                    else
                    {
                        ImgD.width=image.width;
                        ImgD.height=image.height;
                    }
                }
            }
            /*else{
            ImgD.src="";
            ImgD.alt=""
            }*/
        }
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <img src="5.gif" align="middle" οnmοusemοve="DrawImage(this,800,1200)">
        <img src="6.gif" align="middle" οnmοusemοve="DrawImage(this,200,200)">
        <img src="7.gif" align="middle" οnmοusemοve="DrawImage(this,200,200)">
    </div>
    </form>
</body>
</html>

cb2233
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
基于JavaScript实现带缩略图的轮播效果
10-20
在网页设计和开发中，轮播图是一种非常流行的图像展示...总之，实现一个带缩略图的轮播效果，需要前端开发者具备对HTML、CSS和JavaScript的综合运用能力，才能制作出既有良好用户体验，又具备视觉美感的轮播图组件。
基于javascript代码实现通过点击图片显示原图片
11-22
在本文中，我们将深入探讨如何使用JavaScript来实现一个功能，即点击图片时显示原图。首先，我们来看一下提供的代码片段： ```javascript function DrawImage(ImgD) { var image = new Image(); image.src = ImgD...
jQuery带缩略图自动轮播幻灯片代码
06-09
"jQuery带缩略图自动轮播幻灯片代码"就是这样一个实现方式，它结合了jQuery库的强大功能，为用户提供了一种带有标题和缩略图的自动轮播效果。 首先，我们来了解jQuery。jQuery是一个快速、简洁的JavaScript库，它...
jQuery点击缩略图控制大图切换代码
10-27
本篇文章将深入探讨如何使用jQuery实现一个点击缩略图控制大图切换的功能，这是许多网站展示图片集的一个常见需求。 首先，我们需要理解jQuery的基本用法。jQuery是一个轻量级的JavaScript库，它简化了DOM操作、...
js中【Worker】相关知识点详细解读
2301_79858914的博客
09-11 424
JavaScript 中的 Worker 是一个可以在后台线程中运行代码的 API，这样可以避免主线程（通常是 UI 线程）被阻塞。使用 Worker 时，JavaScript 可以在多线程环境中工作，解决了单线程的瓶颈问题。通常情况下，JavaScript 是单线程的，也就是所有的代码（包括 DOM 操作和事件处理等）都在同一个线程里执行。如果某段代码需要大量计算，或者运行时间过长，会阻塞整个页面，导致界面卡顿甚至崩溃。Worker提供了一种将复杂或耗时的任务分配到后台线程执行的方法。
Module “console“ has been externalized for browser compatibility.
Alvin的博客
09-07 252
在 Vue 3.5.3 中使用 Vite 作为构建工具时，如果你尝试直接从。模块外部化了，这意味着它不会在客户端环境中暴露。去除导入 error 函数的代码。函数，会遇到一个错误，提示。这是因为 Vite 默认将。Vue 3.5.3 中。
Vue接入高德地图并实现基本的路线规划功能
黄团团的个人博客
09-11 260
找到public目录下的index.html文件，把刚才申请好的2个密钥分别粘贴进去，第一个securityJsCode是填入安全密钥，第二个红框是填入Key。登录高德开放平台，点击我的应用，先添加新应用，然后再添加Key。如图所示填写对应的信息，系统就会自动生成。
echarts.js+china.js实现中国地图各省数据案例
qq_58258855的博客
09-11 205
实现中国地图各省数据案例
JS笔记
2201_76100326的博客
09-11 448
javascript中的对象分为3种：自定义对象，内置对象，浏览器对象 JavaScript 中的所有事物都是对象：字符串、数字、数组、日期，等等。在 JavaScript 中，对象是拥有属性和方法的数据。属性是与对象相关的值。方法是能够在对象上执行的动作。.关键词（）
vue3中动态引入本地图片的两种方法
haodanzj的博客
09-11 99
动态在本地引入图片
《实现 HTML 图片轮播效果》
最新发布
qq_69304031的博客
09-11 335
在网页设计中，轮播效果是非常常见且重要的元素。它可以在有限的空间内展示多张图片或者广告，能够有效地吸引用户的注意力，提高信息展示的效率。常用于网站首页的焦点图展示、商品图片展示等场景。以下是一个简单的 HTML、CSS 和 JavaScript 实现的图片轮播代码示例。
手写 Vue Router 中的 Hash 模式和 History 模式
书呆子ITme
09-06 1029
通过手写简化版的Vue Router，我们深入理解了Hash 模式和History 模式的实现原理。Hash 模式依赖于hashchange事件，而 History 模式依赖于pushState和API。两种模式各有优缺点，可以根据项目需求选择合适的路由模式。Hash 模式：简单、无需服务器配置，但URL不美观，对SEO不友好。URL美观且符合SEO要求，但需要服务器支持。
【vite-plugin-vue-layouts】关于 vue-layouts 布局插件的使用和注意事项
weixin_41899098的博客
09-06 1060
环境：vue3 + vuetify3 + unplugin-vue-router是怎么创建这个项目的：选择它推荐的设置（Recommend）
js实现动态生成不固定数量的气泡
丁哒哒的博客
09-10 197
【代码】js实现动态生成不固定数量的气泡。
一文读懂 JS 中的 Set 结构
沐爸的博客
09-11 557
Set 如何使用？和 Map 有什么区别？有哪些属性和方法？又有哪些使用场景？WeakMap 又是什么？
前端技术演进与未来发展趋势探究
生活的真谛从来都不在别处 就在日常一点一滴的奋斗里
09-07 1982
本文深入探讨了前端领域的发展历程、主要技术及未来趋势。从前端技术的起源与早期发展，到动态页面的崛起，再到如今各种先进技术的涌现，我们见证了前端技术的不断演进。在发展历程方面，前端从最初的静态网页逐渐发展为复杂的动态交互界面。早期浏览器的竞争推动了技术的进步，而随着互联网的发展，后端框架的出现解决了后台代码庞大臃肿的问题。前端技术也从“网页三剑客”演变为新的“三剑客”，即 HTML、CSS 和 JavaScript，同时各种前端框架不断涌现，大大提高了开发效率和质量。
Vue+SpringBoot+数据库整体开发流程 1
水w的博客
09-10 1535
Vue+SpringBoot+数据库整体开发流程
中秋之美——html5+css+js制作中秋网页
Timi2019的博客
09-02 1680
八月十五，秋已过半，是为中秋。“但愿人长久，千里共婵娟”，中秋时节，气温已凉未寒，天高气爽，月朗中天，正是观赏月亮的最佳时令。古人把圆月视为团圆的象征，因此，又称八月十五为“团圆节”。
JavaScript实现点击缩略图展示大图
以下是一个可能的JavaScript实现： ```javascript document.addEventListener('DOMContentLoaded', function() { var images = document.querySelectorAll('#imagegallery li a img'); for (var i = 0; i ; i++...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值