JS使用oumousemove和oumouseout动态改变图片显示的方法

本文实例讲述了JS使用oumousemove和oumouseout动态改变图片显示的方法。分享给大家供大家参考。具体如下：

鼠标放到图片上时图片会自动变大，鼠标离开图片还原

<!DOCTYPE html>
<html>
<head>
<script>
function bigImg(x)
{
x.style.height="64px";
x.style.width="64px";
}
function normalImg(x)
{
x.style.height="32px";
x.style.width="32px";
}
</script>
</head>
<body>
<img onmouseover="bigImg(this)" onmouseout="normalImg(this)"
border="0" src="smiley.gif" alt="Smiley" width="32" height="32">
<p>The function bigImg() is triggered when the user moves
the mouse pointer over the image.</p>
<p>The function normalImg() is triggered when the mouse
pointer is moved out of the image.</p>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

赞 (0)

相关推荐

  • JS获得图片alt信息的方法

    本文实例讲述了JS获得图片alt信息的方法.分享给大家供大家参考.具体如下: 下面的JS代码可通过图片的alt属性获得图片的提示信息 <!DOCTYPE html> <html> <body> <img id="compman" src="compman.gif" alt="Crazy computerman" width="107" height="98">

  • JS动态修改图片的URL（src）的方法

    本文实例讲述了JS动态修改图片的URL(src)的方法.分享给大家供大家参考.具体如下: 下面的JS代码可以动态修改图片地址,以显示一张新的图片,实际上是通过修改图片的src属性来实现的 <!DOCTYPE html> <html> <head> <script> function changeSrc() { document.getElementById("myImage").src="hackanm.gif"; }

  • JS实现动态给图片添加边框的方法

    本文实例讲述了JS实现动态给图片添加边框的方法.分享给大家供大家参考.具体如下: 下面的JS代码设置图片的边框为2个像素,即border=2 <!DOCTYPE html> <html> <head> <script> function addBorder() { document.getElementById("compman").border="2"; } </script> </head>

  • JS获取图片lowsrc属性的方法

    本文实例讲述了JS获取图片lowsrc属性的方法.分享给大家供大家参考.具体如下: lowsrc属性一般设置为图片的低分辨率图片地址,下面的代码可以通过点击链接显示图片的低分辨率版本 <!DOCTYPE html> <html> <body> <img id="compman" src="compman.gif" lowsrc="compman_lowres.gif" alt="Computer

  • JS获取网页图片name属性的方法

    本文实例讲述了JS获取网页图片name属性的方法.分享给大家供大家参考.具体如下: 下面的JS代码可以用来获取网页图片的name属性 <!DOCTYPE html> <html> <body> <img id="compman" name="compman" src="compman.gif" alt="Computerman" width="107" height

  • JS设置网页图片vspace和hspace属性的方法

    本文实例讲述了JS设置网页图片vspace和hspace属性的方法.分享给大家供大家参考.具体分析如下: hspace可以以像素为单位,指定图像左边和右边的文字与图像之间的间距:vspace 值则是上面的下面的文字与图像之间的距离的像素数 <!DOCTYPE html> <html> <head> <script> function setSpace() { document.getElementById("compman").hspac

  • JS使用oumousemove和oumouseout动态改变图片显示的方法

    本文实例讲述了JS使用oumousemove和oumouseout动态改变图片显示的方法.分享给大家供大家参考.具体如下: 鼠标放到图片上时图片会自动变大,鼠标离开图片还原 <!DOCTYPE html> <html> <head> <script> function bigImg(x) { x.style.height="64px"; x.style.width="64px"; } function normalIm

  • jQuery动态改变图片显示大小(修改版)的实现思路及代码

    当我们要显示后台传过来若干个尺寸不一的图片时,为了保证图片大小的一致性及比例的协调,需要动态改变图片显示尺寸.通过搜索,我们可以从网上找到实现此功能的jQuery代码如下.这段代码可以使图片的大小保持在一定范围内,如果图片的原始尺寸都大于max*值,则显示出来的图片宽度都相等. 原始代码: 复制代码 代码如下: $(document).ready(function() {     $('.post img').each(function() {     var maxWidth = 100; /

  • JS动态改变浏览器标题的方法

    本文实例讲述了JS动态改变浏览器标题的方法.分享给大家供大家参考,具体如下: <!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" > <hea

  • js实现动态改变radio状态的方法

    h5的radio是自带选中状态改变的,但是如果自带的状态无法满足自己的需求时,就需要自己去实现. 代码如下: h5部分代码 <p class="group"> <label class="active"> <input type="radio" name="parent_radio" value="1" id="new_data" onclick="

  • JS中通过url动态获取图片大小的方法小结(两种方法)

    很多时候再项目中,我们往往需要先获取图片的大小再加载图片,但是某些特定场景,如用过cocos2d-js的人都知道,在它那里只能按比例缩放大小,是无法设置指定大小的图片的,这就是cocos2d-js 的坑了,我们必须先获取图片大小,计算比例再对图片进行缩放. 查阅资料,我总结了两种通过url获取图片大小的方法: 1.预加载获取图片大小 var imgLoad = function (url, callback) { var img = new Image(); img.src = url; if

  • javascript实现动态改变层大小的方法

    本文实例讲述了javascript实现动态改变层大小的方法.分享给大家供大家参考.具体实现方法如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>动态设置层的大小</title>

  • jquery实现动态改变css样式的方法分析

    本文实例讲述了jquery实现动态改变css样式的方法.分享给大家供大家参考,具体如下: jquery 几乎成了现在开发WEB应用的标准JS库,这与其简单性和易用性是分不开的.作为一个后端开发人员,要做一些前端页面时,CSS 样式的控制是少不了需要掌握的.如果是静态的CSS,当然是可以直接写上去的,但有些界面是需要一些动态效果的,比如颜色变化,字体大小变化,甚至DIV 的隐藏于现实等,这些都需要用javascript 动态控制其CSS样式,下面就常用的jquery 控制 css 样式的方法做一个

  • 微信小程序动态设置图片大小的方法

    我们都知道微信小程序的组件image是用来显示图片的,它有一下几个属性: 1.src              图片资源地址 2.mode          图片裁剪.缩放的模式 3.binderror     当错误发生时,发布到 AppService 的事件名,事件对象event.detail = {errMsg: 'something wrong'} 4.bindload     当图片载入完毕时,发布到 AppService 的事件名,事件对象event.detail = {height

  • JavaScript简单实现动态改变HTML内容的方法示例

    JavaScript简单实现动态改变HTML内容的方法示例

    本文实例讲述了JavaScript简单实现动态改变HTML内容的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JavaScript:改变 HTML 内容</title> <script> function myFunction() { x = document.getElementById(

  • jQuery在页面加载时动态修改图片尺寸的方法

    本文实例讲述了jQuery在页面加载时动态修改图片尺寸的方法.分享给大家供大家参考.具体如下: $(window).bind("load", function() { // IMAGE RESIZE $('#product_cat_list img').each(function() { var maxWidth = 120; var maxHeight = 120; var ratio = 0; var width = $(this).width(); var height = $(

随机推荐