`

网页里控制图片大小的相关代码

阅读更多
1、用鼠标拖动来改变大小
<SCRIPT LANGUAGE="JavaScript">
function resizeImage(evt,obj){
newX=evt.x
newY=evt.y
obj.width=newX
obj.height=newY
}
</script>
<img src="7say.gif" ondrag="resizeImage(event,this)">

2、用鼠标滚动控制图片大小
<img src="7say.gif" onmouseenter="focus();" onmouseout="blur();" onmousewheel="width+=(window.event.wheelDelta==120)?-5:+5;">

3、图片标签里用代码控制大小
<img border="0" src="[!--picurl--]" onload="if(this.width>screen.width-500)this.style.width=screen.width-500;">

4、CSS控制图片大小
1. css2直接实现: img{max-width: 500px;} (IE暂不支持)
2. expression实现: img{width:expression(width>500?"500px":width);} (IE only)
3. 使用js. 方法: 用 document.getElementsByTagName("IMG") 的方法取得全部img元素 遍历img元素 判断其宽度并做相应操作 



分享到:
评论

相关推荐

    JQuery控制图片大小代码

    下面将详细介绍jQuery控制图片大小的基本方法和相关知识点。 1. **获取图片元素** 在jQuery中,我们首先需要获取到图片元素。通常,我们可以使用`$("#imgId")`来选择具有特定ID的图片,或者`$(".imgClass")`来选择...

    控制图片显示大小的代码

    如果需要根据窗口大小动态调整图片大小,可以使用JavaScript的`window`对象监听窗口的`resize`事件: ```javascript window.addEventListener('resize', function() { var img = document.getElementById('myImage...

    网页自动改变图片大小的代码

    - **条件判断**:使用`if`语句根据图片的尺寸进行条件判断,决定是否需要调整图片大小。 ### 实际应用场景与优化建议 在实际开发中,这种图片自动调整大小的功能非常实用,尤其是在响应式设计中,可以确保图片在...

    禁止网页图片下载代码

    - `onload`:当图片加载完成后执行`imgzoom`函数,不过示例中的`imgzoom`函数并未给出实现细节,通常用于调整图片大小。 #### 五、注意事项 1. **用户体验**:虽然这种方法可以保护图片,但也可能会影响用户的...

    jquery幻灯片插件图片层叠加按钮控制图片大小缩放切换

    本主题聚焦于一个特定的jQuery插件——使用按钮控制图片大小缩放和切换功能。这个插件允许用户通过叠加在图片上的控制按钮来调整图片的大小,并进行平滑的幻灯片切换。 首先,让我们了解一下jQuery的基础。jQuery是...

    网页图片切换播放代码

    考虑到网页性能,应优化图片大小,减少HTTP请求,并可能利用懒加载技术,只在图片进入视口时才加载,以提高页面加载速度。 总的来说,本资源提供的代码示例涵盖了网页图片切换播放的基本原理和实现方法,涉及HTML...

    HTML5 SVG圆点控制图片切换代码.zip

    在这个"HTML5 SVG圆点控制图片切换代码"中,SVG被用来创建分页导航的圆点。这些圆点实际上是由SVG绘制的圆形线条构成,它们通过CSS3和JavaScript进行样式控制和动态交互。每个圆点都有自己的状态,可以被设置为选中...

    jQuery插件 拖拽和鼠标滚轮控制图片大小

    本文将详细探讨如何利用jQuery插件实现拖拽和鼠标滚轮控制图片大小的功能,这对于创建交互式网页体验至关重要。 首先,我们要理解jQuery中的拖拽功能。拖拽通常用于创建可移动的元素,例如在网页上拖动一个图片或...

    android自定义seekbar来控制网页字体大小

    本文将深入探讨如何使用自定义Seekbar来实现对网页字体大小的控制。Seekbar,又称滑动条,是Android系统中的一个基本组件,通常用于用户进行数值选择或进度调整。在这里,我们将自定义Seekbar作为网页字体大小的调节...

    猪猪侠官网网页实验版代码

    《猪猪侠官网网页实验版代码》是一个包含HTML和网页设计相关知识的资源包,旨在为学习者提供一个实践和理解网页开发的平台。在这个压缩包中,你可以找到构成猪猪侠官网实验版本的所有源代码文件,这是一次绝佳的机会...

    网页图片无缝循环滚动html代码

    网页图片的无缝循环滚动主要通过HTML结构布局与JavaScript控制相结合来实现。其核心思想是创建两个并行的元素,其中一个作为实际显示区域(如`demo1`),另一个作为复制区域(如`demo2`)。复制区域会克隆显示区域的...

    百度百科图片大小缩放代码

    "百度百科图片大小缩放代码"是一个示例,它展示了如何模仿百度百科的图片播放界面来实现图片的动态缩放功能。这个项目可能包含了一个HTML文件(index.html)、一个图片文件(index.jpg)、一个或多个图片资源文件夹...

    网页中轮播图片源代码

    2. **CSS样式**:CSS用于设置轮播的外观,包括图片大小、位置、过渡效果等。例如,可以设置一个溢出隐藏的父容器和绝对定位的图片,以实现无缝切换的效果。 3. **JavaScript控制**:JavaScript的核心任务是定时切换...

    网页特效 网页特效代码

    例如,可能会有轮播图的实现代码,通过控制图片的显示和隐藏,配合CSS动画,达到平滑切换的效果;也可能会有导航栏的下拉菜单实现,通过JavaScript监听鼠标悬停事件,动态展示子菜单。 总的来说,网页特效代码的...

    网页爱心表白代码大全

    网页爱心表白代码大全,顾名思义,是一个集合了多种HTML、CSS和JavaScript技术...综上所述,"网页爱心表白代码大全"不仅提供了丰富的表白效果,还是一份实用的编程学习材料,帮助你利用技术创造出温馨浪漫的表白场景。

    网页中插入股票图片代码

    可以通过CSS控制图片的大小和布局,例如: ```css img { max-width: 100%; height: auto; } ``` ### 四、总结 通过上述步骤,我们可以轻松实现在网页中插入股票图片的功能。这对于提升网站用户体验、提供即时金融...

    网页地址变图片的.net代码

    以下是一个简化的示例代码,展示了如何使用WebBrowser控件将网页地址转换为JPEG图片: ```csharp using System; using System.Drawing; using System.Windows.Forms; public class WebPageToImageConverter { ...

    CSS3网页图片加载动画代码.zip

    "CSS3网页图片加载动画代码.zip"文件包含的就是利用CSS3来实现这种效果的源码。CSS3是层叠样式表(Cascading Style Sheets)的第三个版本,它引入了许多新的功能和特性,使得网页设计更加动态和富有表现力。在这个...

    爱心网页-HTML-代码

    CSS(Cascading Style Sheets)则是用于控制网页样式的语言。在"爱心网页"中,CSS可能被用来设置爱心的颜色、大小、位置,以及动画效果。通过选择器(如ID、类或元素选择器)选择HTML元素,并应用样式规则,如边框、...

    网页设计html代码大全

    网页设计HTML代码大全 网页设计是指通过HTML、CSS、JavaScript等技术来设计和开发网页的过程。HTML(HyperText Markup Language)是用于创建网页的标记语言, Plays a crucial role in web design. 在网页设计中,...

Global site tag (gtag.js) - Google Analytics