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

JavaScript012

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

由远到仅需要做图片的效果（或者用css3效果也行，但目前的兼容性不行）

div固定大小

js，jquery只用setTimeout、setInterval函数进行图片由小变大，宽度到底指定宽度后停止放大

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8" />

<title>简单透明度渐变</title>

</head>

<style type="text/css">

*{margin:0padding:0}

#oDiv{width:200pxheight:200pxmargin:0 autobackground:#000}

</style>

<body>

<div id="oDiv" style="opacity:1">Lee</div>

</body>

<script type="text/javascript">

window.onload = function(){

var timer = setInterval(colorLiner,20)

var val = 100

function colorLiner(){

if(val >= 0){

var oDiv = document.getElementById('oDiv')

oDiv.style.opacity = val/100

val--

}

}

}

</script>

</html>

动态渐变

<span style="font-size:12px"><html>

...

<body>

<center>

<div id="fade" style="width:600pxheight:200px"></div>

</center>

</body>

</html></span>

为了方便查看，使用内嵌样式，还是推荐使用外链样式的使用啊，接下来进行简单编写动态实现渐变效果

<span style="font-size:12px"><script type="text/javascript">

var node=document.getElementById("fade")

var color="#0000"

var level=1

window.load=function fading(){

node.style.background=color.+level.toString()+level.toString()

level++

if(level>16){

clearTimeOut(fading)

}else{

setTimeOut(fading,300)

}

}

<script></span>

静态渐变

在css样式中添加：

background:-webkit-gradient(linear, 100% 0%, 0% 0%, from(#ffffff),color-stop(0.5,#0000ff),to(#ffffff))

简单解释下：

linear：这个就碰到了线性渐变和径向渐变的两个概念，无非是在一条线上进行变化的线性和像圆一样向四周扩散的径向；

后面的四个值：分别代表相应方向的px值，可以从左顺时针转的顺序记忆，但是它代表的是to，截止到的颜色

from：这就是开始的颜色了

to：和from是同时出现的，最后渐变结束的颜色

而color-stop：则是指在变化到线的哪个位置的时候会出现什么颜色，当然是从周围过渡过去的，相当于from，to过渡点，from过渡点，to；

附送下简单的其他的基本代码

FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#b8c4cb,endColorStr=#f6f6f8)/*IE6*/

background:-moz-linear-gradient(left,#ffffff,#ff0000)/*非IE6的其它*/

background:-webkit-gradient(linear, 100% 0%, 0% 0%, from(#ff0000), to(#0000ff))/*非IE6的其它*/