js或是jquery代码怎么写让图片在一个div里实现由远到近的渐变效果,即图片慢慢放大,超出div的部分不显示

如题所述

由远到仅需要做图片的效果(或者用css3效果也行,但目前的兼容性不行)
div固定大小
js,jquery只用setTimeout、setInterval函数进行图片由小变大,宽度到底指定宽度后停止放大追问

能不能写写代码,就一张图的,急,

追答

代码要配合你的css代码写

温馨提示:内容为网友见解,仅供参考
第1个回答  推荐于2018-05-10
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>demo</title>
<script src="jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<style type="text/css">
body{
margin:0;
padding:0;
}
div{
width:500px;
height:300px;
border:1px solid red;
overflow:hidden;
margin:0 auto;
}
img{
width:0;
height:0;
margin-left:250px;
margin-top:150px;
padding:0;
}
</style>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$('#img').animate({
width:"200%",
height:"200%",
marginLeft:"-200px",
marginTop:"-100px"
},10000);

});
</script>
<body>
<div class="showimg" id="showimg">
<img src="3.jpg" id="img" alt="Here is a pic" />
</div>
</body>
</html>
数值未经过计算,随便写的本回答被提问者和网友采纳

js或是jquery代码怎么写让图片在一个div里实现由远到近的渐变效果,即图...
由远到仅需要做图片的效果(或者用css3效果也行,但目前的兼容性不行)div固定大小 js,jquery只用setTimeout、setInterval函数进行图片由小变大,宽度到底指定宽度后停止放大

在html中怎么用js实现鼠标指向图片时图片放大的效果?(具体实现)
分别写一个onmouseover和onmouseout事件。然后在事件里面加一个function,分别写想要放大的尺寸和缩小或复原的尺寸。具体代码实现如下:<img id="img" onmouseover="bigger()" onmouseout="smaller()" src="你的图片路径" style="width:100px;height:100px;" \/> <script type="text\/javascript"> var ...

求一个简单的点击图片放大缩小的JS代码
1、准备好需要用到的图标。2、新建html文档。3、书写hmtl代码。<div id=allbox> <div id=boxhome> <img style="WIDTH: 107px; BOTTOM: 5px; HEIGHT: 176px; LEFT: 10px" id=imgSmallLeft class=imgBorder onClick="clearInterval(autoplay);moveD('l');"> 。4、书写并添加js...

在html中怎么用js实现鼠标指向图片时图片放大到原图那么大?(具体实现...
1、新建html文档,在body标签中添加图片标签,为这个标签设置“id”属性,然后设置图片的默认显示大小css属性:2、添加“onmouseover”js事件,首先使用“document.getElementById”获取到图片标签,然后定义鼠标移动到图片上时发生的事件,这时图片将会放大:3、添加“onmouseout”js事件,首先获取图片标签,然后...

javascript 实现“渐变”或“渐隐渐现”的原理是什么?
实现渐变在jquery里面很简单,只需要$("div").fadeIn();和$("div").fadeOut();就可以实现渐入渐出,自己写原生js的话比较费劲,需要照顾不同浏览器的差异,不大推荐。

jquery 如何让图片自适应大小
jQuery.fn.LoadImage=function(scaling,width,height,loadpic){ if(loadpic==null)loadpic="..\/img\/loading.gif";return this.each(function(){ var t=$(this);var src=$(this).attr("src")var img=new Image();img.src=src;\/\/自动缩放图片 var autoScaling=function(){ if(scaling){ if...

想在一个div里面添加图片,用js怎么写啊?
1、新建一个HTML文件,保存为test.html,用于编写代码实现拖放功能 。2、在test.html添加一个div标签,并且给它一个id,用于下面编写样式。3、通过div的id , 给div定义CSS样式,例如,把div定义为一个带边框的长方形。下面将实现将图片拖放在这个长方形中。4、在div的下面定义一张被拖放图片,并设置...

如何实现类似淘宝网上鼠标经过商品时放大图片的效果。
可以通过html、jquery、css实现。大概的流程如下:1 把图片放到一个div中,代码:<div><img src="product.gif"><\/div>,然后再写一个空的div用于放大图片的浮动显示。2 给上面的div加上鼠标经过事件,代码:<div onmouseover=“change_img(this);”><img src="product.gif"><\/div> 3 处理鼠标...

谁有网页中图片切换的代码,最好是js的,我试过通过改变src还有数组结合...
最简单的JS切换,先引用jquery <script type="text\/javascript" src="jquery.js"><\/script>js代码 var arr = ["image\/1.jpg", "image\/2.jpg", "image\/3.jpg", "image\/4.jpg"]; var arr1 = ["img1", "img2", "img3", "img4"]; var count = 0; function go() ...

网站JS放大图片
实例中将ID为biuuu的DIV内所有链接元素<a>增加javascript弹出放大图片功能,其中链接href部分为表示弹出的 大图片路径。使用jQuery插件jQuery Image Flyout弹出图片,实现javascript弹出放大图片功能只需要一行代码即可实现。一,自定义预加载提示图片 (#biuuu a).flyout({loadingSrc:thumb-loading.gif,outEase...

相似回答