`
zprill
  • 浏览: 36396 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

JavaScript---控制图片加载后的大小

JavaScriptjQueryjsonHTML 
阅读更多

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>

<BODY>
<img src="http://www.cssrain.cn/demo/JQuery+API/logo-json.gif" onload="proDownImage(this);"/>

<script language=Javascript>
var proMaxHeight = 40;
var proMaxWidth = 120;
function proDownImage(ImgD){
var image=new Image();
image.src=ImgD.src;
if(image.width>0 && image.height>0){
var rate = (proMaxWidth/image.width < proMaxHeight/image.height)?proMaxWidth/image.width:proMaxHeight/image.height;
//如果 指定高度/图片高度 小于 指定宽度/图片宽度 ， 那么，我们的比例数 取 指定高度/图片高度。
//如果 指定高度/图片高度 大于 指定宽度/图片宽度 ， 那么，我们的比例数 取 指定宽度/图片宽度。
if(rate <= 1){
ImgD.width = image.width*rate; //图片新的宽度 = 宽度 * 比例数
ImgD.height =image.height*rate;
}else{// 如果比例数大于1，则新的宽度等于以前的宽度。
ImgD.width = image.width;
ImgD.height =image.height;
}
}
}
</script>
</BODY>
</HTML>

分享到：
| IE 下multiple select的onclick事件太土 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    javascript经典特效---图片转换效果.rar

    这可以通过CSS3的过渡属性（`transition`）配合JavaScript控制类名来实现。 5. **计时器**：如果要实现自动切换，可以使用`setInterval`或`setTimeout`函数来定时执行图片更换。 6. **封装和模块化**：为了保持...

    JavaScript---仿chinaz站长站首页的导航菜单

    例如，我们可以创建一个`initNavMenu()`函数来初始化菜单，然后在页面加载完成后调用它。此外，还可以编写其他辅助函数，如`showSubMenu()`, `hideSubMenu()`, `toggleSubMenu()`等，分别用于显示、隐藏和切换子菜单...

    JQuery控制图片大小代码

    在本主题中，我们将深入探讨如何使用jQuery来控制图片的大小，这在响应式设计或者图片适配不同设备尺寸时尤其重要。下面将详细介绍jQuery控制图片大小的基本方法和相关知识点。 1. **获取图片元素** 在jQuery中，...

    javascript经典特效---按分辨率显示图片.rar

    8. **使用CSS背景图像**：另一种方法是将图片作为CSS背景图，利用`background-size`属性控制图片在容器中的显示方式，例如使用`cover`或`contain`值，可以确保图片始终填充或适应容器。 总结来说，通过JavaScript和...

    javascript经典特效---导航的文字图片说明.rar

    总结来说，"javascript经典特效---导航的文字图片说明.rar"涵盖的知识点包括DOM操作、事件处理、CSS样式控制、动画效果、响应式设计、AJAX以及代码组织。通过学习和实践这些内容，你不仅可以创建出引人注目的导航栏...

    javascript经典特效---图片虚幻显示.rar

    3. **JavaScript事件监听器**：通过JavaScript，我们可以监听用户与页面的交互，如页面加载（`window.onload`）或图片加载完成（`'load'`事件）等，这些事件触发时执行相应的函数来改变图片的显示状态。 4. **动态...

    JavaScript-Web素材实例

    弹性布局的关键在于使用CSS3的媒体查询和JavaScript来动态调整元素的大小和位置。 "MagicBox1.0"可能是一个轻量级的弹出窗口插件，用于显示图像、内容或者进行其他交互操作。它提供了一种优雅的方式来吸引用户的...

    javascript经典特效---jQuery仿新浪新闻图片浏览器(支持鼠标左右滚动控制图片切换).rar

    【jQuery仿新浪新闻图片浏览器】是一种使用JavaScript库jQuery实现的图片浏览效果，它模拟了新浪新闻网站中的图片浏览功能，并且特别支持通过鼠标左右滚动来控制图片的切换，提供了用户友好的交互体验。这个功能在...

    Jquery实例--图片预加载

    然而，实际应用中可能还需要考虑更多因素，如图片大小的控制、错误处理、异步加载策略等。对于大型项目，可能需要使用更高级的预加载库，如`lazysizes`或`lozad.js`，它们提供了更全面的功能和优化。 总之，图片预...

    javascript经典特效---广告图片宣传.rar

    4. 动态加载：为了优化页面加载速度，大尺寸的广告图片可能不会一次性全部加载，而是使用JavaScript根据用户滚动页面的位置动态加载。 5. 跟踪分析：JavaScript还可以集成Google Analytics或其他跟踪工具，收集用户...

    JavaScript - 腾讯科技热点推荐图片代码（改进版）

    它通过JavaScript来控制图片的切换，通常包括自动播放、手动切换、过渡效果等功能。这种技术常用于新闻网站、产品展示页等，以便在有限的空间内展示更多的信息。 二、JavaScript基础 JavaScript是一种广泛应用于...

    javascript经典特效---幻影图片.rar

    2. 图片轮播：这是一种常见的网页图片展示方式，通过JavaScript定时切换显示的图片，同时可添加导航箭头和索引点来控制轮播的前进和后退。 3. 图片滑动/滚动：使图片在设定的路径上滑动，比如左右滑动、上下滚动，...

    android Webview加载本地图片，自适应布局大小

    使用`WebChromeClient`和`WebViewClient`的回调方法，可以监听页面加载事件，当页面加载完成后，通过JavaScript获取图片的实际宽度和高度，然后调整WebView的大小。 最后，关于性能优化，使用`WebView`加载本地资源...

    javascript经典特效---图片和文字同时变化.rar

    1. **JavaScript基础**：JavaScript是一种广泛使用的客户端脚本语言，主要用于控制网页中的DOM（Document Object Model），实现动态内容更新、交互式表单验证、动画效果等功能。在这个案例中，JavaScript被用来处理...

    javascript实例应用---图片特效类.rar

    DOM允许JavaScript访问和修改HTML文档的结构，因此我们可以使用它来控制图片的显示方式和行为。例如，通过修改`style`属性，可以实现图片的动态显示和隐藏，而通过定时器（`setTimeout`或`setInterval`）则可以实现...

    图片显示特效javascript

    1. 图片加载：JavaScript可以监测图片的加载状态，例如使用`onload`事件来处理图片加载完成后执行的代码，确保图片完全显示前不执行其他操作。同时，还可以处理`onerror`事件，当图片加载失败时，提供备用图片或提示...

    javascript经典特效---下拉菜单图片选择.rar

    在JavaScript编程领域中，下拉菜单图片选择是一种常见的交互效果，尤其在网页设计中颇为流行。这个"javascript经典特效---下拉菜单图片选择.rar"压缩包文件包含了一个实现这一功能的示例，主要通过HTML、CSS和...

    JavaScript-轮播图案例展示

    5. 最后，设置定时器实现自动播放，同时考虑在页面加载或窗口大小变化时的适应性。 "JavaScript轮播图案例展示"这个资源可能包含了一个或多个实际的代码示例，供开发者参考学习。通过深入理解这些示例，你可以掌握...

    javascript经典特效---慢慢变大的图片.rar

    在JavaScript的世界里，实现"慢慢变大的图片"这一特效是一种常见的动态效果，它能为网页增添生动性。这种效果通常是通过CSS和JavaScript联合实现的，尤其是利用JavaScript的DOM操作和定时器功能。以下是对这个主题的...

    javascript经典特效---图片的组合显示.rar

    在本案例中，JavaScript将用于控制图片的显示方式，包括加载、隐藏、位置调整、动画效果等。 【压缩包子文件的文件名称列表】：图片的组合显示.htm 这个文件名“图片的组合显示.htm”暗示我们有一个HTML文件，它是...

Magicbox
Global site tag (gtag.js) - Google Analytics