鼠标指向div后变大25%

两个方面。

1.21布局,推荐position:absolute;(此题要求3个div),左边两个position:absolute;设置好top与left。右边div设置好margin。

2.js部分

window.onload=function(){
    var obj1=document.getElementById("box1");
    var obj2=document.getElementById("box2");
    var obj3=document.getElementById("box3");
    function zoom(obj,x,y){
    var dW=obj.clientWidth;//get width
    var dH=obj.clientHeight;//get height
    obj.onmouseover=function(){
    obj.style.width=dW*x+"px";
    obj.style.height=dH*y+"px";
    obj.style.zIndex=2;
    }
    obj.onmouseout=function(){
    obj.style.width="";
    obj.style.height="";
    obj.style.zIndex="";
    }
    }
    zoom(obj1,1,25,1,25);
    zoom(obj2,1,25,1,25);
    zoom(obj3,1,25,1,25);
}

附RUNJS:http://runjs.cn/code/y2amstgb

时间: 2024-11-11 17:08:50

鼠标指向div后变大25%的相关文章

jquery点击div 先变大再缩小

<!DOCTYPE html><html>  <head>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">         <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>        &l

黑马day18 鼠标事件&amp;amp;图片变大

有时候我们在淘宝网或者京东商城上浏览要购买的商品的时候当把鼠标移动到图图片上的时候会发现图片放大.然后鼠标移动,图片也会跟着移动,接下来我就使用jquery来实现这样的效果: 这是图片文件夹: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html x

IE9 下div自动变大变小问题

IE9 下整个div随着滚动条滚动自动发生变化.div里面是table表格 查看元素后发现只有三个CSS样式,未指定高度,可能是div的height默认值为auto,在ie9下会一直自动计算高度,所以可以更改height样式值解决问题. 增加样式 : height:100%; 后问题解决 原文地址:https://www.cnblogs.com/Garen/p/10270992.html

css 鼠标移上去会变大

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 300px; height: 300px; border: #000 solid 1px; margin: 50px auto; overflow: hidden; } div

jquery鼠标移到图上去变大

<!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> <title>jquery练习</title>

两种方式实现鼠标悬停图片逐渐变大

鼠标悬停图片逐渐变大这是一个很常见的效果,这里推荐两种方式,各有优缺点: 1.利用js,通过定时器实现宽高的加减. //鼠标移动图片变大 function change_large(obj,speed,target_width,target_height){ var timer = null; var bengin_width = 140;//初始宽度 var bengin_height = 180;//初始高度 clearInterval(timer); timer = setInterval

js jq 实现鼠标经过div背景以进度条方式 变宽,鼠标离开变小,同时文字颜色和原来不一样

1 <!DOCTYPE html> 2 <html> 3 <head> 4 5 <title></title> 6 <script typet="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> 7 </head> 8 <style> 9 .gg{

JavaScript函数实现鼠标指向后带图片的提示效果

转载:http://www.cnblogs.com/jack86514/archive/2009/04/01/1427584.html 当我们在写一个网页程序的时候,很多方法可以提供页面的动态显示,从而提高页面的视觉效果. 本例就是通过一个简单的Javascript代码动态显示图片的信息的,其实这样的例子很多,所以这里只做简单的说明了. 现在就创建一个页面,代码如下所示: <html> <head> <meta http-equiv="Content-Type&qu

鼠标移动到图片上图片逐渐变大、变清晰(带有过渡效果)

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>鼠标移动到图片上图片逐渐变大.变清晰(带有过渡效果)</title> <style type="text/css"> div{ width: 300px; height: 300px; margin: 50px auto; overflow: hidden; fil