javascript渐显,css3动画实例渐显

js事件单击一个按钮改网页上变其他元素属性的代码

这个功能很好实现。但是你要先去下载一个jquery.js这个类库，就是先加载这个。

然后后面很简单了。参照网址可以轻松控制。

选用jquery.js做这个图片透明度控制的好处是，这个类库可以根据你用的IE浏览器种类，自动匹配IE、火狐、谷歌等浏览器的样式，帮你处理很多浏览器不兼容的现象。

当然也可以看我的例子：

比如你那个图片的id叫#tupian，你那个按钮的id叫#anniu，那么如下

var yin = true;//设定一个记录隐藏或者显示的属性

$("#anniu").click(funtion(){ //当按钮被点击时候执行以下

if(yin==ture){ //当按钮还处于显示时候

$("#tupian").stop().fadeIn(500); //图片在500毫秒内渐渐消失

yin=false; //记录图片已经隐藏

}

else{ //如果图片没显示

$("#tupian").stop().fadeOut(500); //图片于500S内渐渐淡出

yin=true; //记录图片显示

}

});

javascript鼠标hover背景图渐显如何实现

HTML代码：

img onmouseover="hide()" onmouseout="show()" id="image" src="xxx.jpg" /

JS:

script type="text/javascript"

function hide(){

var image = document.getElementById("image");

image.style.cssText = "filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity: 0.5;opacity: 0.5;";

}

function show(){

var image = document.getElementById("image");

image.style.cssText = "";

}

/script

希望能帮到你，如果有用，请采纳，谢谢！

js图片自动切换问题！以下是部分代码，autoPlay:true,为什么不自动切换图片呢?

如果你是用一个比较成熟的框架的话，排除框架错误后，只剩下一个就是CSS写的不正确。

好好查查CSS写的是不是和你下载下来的这个框架的CSS写的一样，再查查HTML是不是和原版一样。

关于javascript的问题

tooltip呀 就是放一个div呀 因为时间问题， 我就直接贴以前的代码了

var tooltip = function(){

// 定义ID的前缀

var id = 'tt';

var top = 3;

var left = 3;

var maxw = 300;

var speed = 10;

var timer = 20;

var endalpha = 95;

var alpha = 0;

var tt,h;

var ie = document.all ? true : false;

// 相当于一个java中的匿名内部类

return{

// 定义了一个show方法

show : function(content, e){

if(tt == null){

var obj = (ie) ? window.event.srcElement : e.target; // 事件发生源对象

tt = document.createElement('div'); // 创建提示框

var parentNode = obj.parentNode.parentNode;

var superNode = parentNode.parentNode;

tt.setAttribute('id', id); // 设置提示框ID

tt.style.opacity = 0; // 设置提示框透明度

tt.style.zIndex = 100001; // 提示框置顶

tt.style.filter = 'alpha(opacity=0)'; // 设置滤镜

tt.style.position = "absolute"; // 提示框采用绝对位置定位

superNode.onmousemove = this.pos; // 通过鼠标移动事件定位

superNode.appendChild(tt); // 将提示框加入页面

}

// 将对象强制作为块对象呈递，为对象之后添加新行

tt.style.display = 'block';

// 提示框背景颜色

tt.style.backgroundColor = "#FFFFCC";

// 提示框边框风格

tt.style.borderColor = "black";

tt.style.borderWidth = "1";

tt.style.borderStyle = "solid";

// 提示信息

tt.innerHTML = content;

h = parseInt(tt.offsetHeight) + top;

// 实现渐现效果

clearInterval(tt.timer);

tt.timer = setInterval(function(){tooltip.fade(1)}, timer);

},

/*

* 设置提示框的位置

*/

pos : function(e){

var u = ie ? event.clientY + document.documentElement.scrollTop : e.pageY;

var l = ie ? event.clientX + document.documentElement.scrollLeft : e.pageX;

tt.style.top =((u - h) 0 ? (u - h) : 0) + 'px';

tt.style.left = (l + left) + 'px';

},

/*

* 设置提示框的渐显风格

*/

fade : function(d){

var a = alpha;

if((a != endalpha d == 1) || (a != 0 d == -1)){

var i = speed;

if(endalpha - a speed d == 1){

i = endalpha - a;

}else if(alpha speed d == -1){

i = a;

}

alpha = a + (i * d);

tt.style.opacity = alpha * .01;

tt.style.filter = 'alpha(opacity=' + alpha + ')';

}else{

clearInterval(tt.timer);

if(d == -1){ tt.style.display = 'none'; }

}

},

/*

* 提示框隐藏

*/

hide : function(){

if(tt.timer){ clearInterval(tt.timer); }

tt.timer = setInterval(function(){tooltip.fade(-1)},timer);

}

};

}();

最好写在一个js里，然后在要用的页面引入这个js， 最后在想要有tooltip功能的标签上加上对这个方法的引用

js动画效果代码方法

1.toggle():

toggle()方法除了模拟鼠标连续单击事件之外，同时会动态的隐藏改变当前元素的高度，宽度和不透明度，最终切换当前元素的可见状态。如果元素可见，则切换隐藏状态，如元素隐藏，切换可见状态

2.fadeln()与fadeOut();

这两个方法，实现了淡入和淡出的一个动画效果，fadeln（）渐显效果，fadeout（）渐隐效果，两者结合使用，可把元素隐藏在按钮中，在通过点击事件显示，两方法只改变元素的透明度，不修改其他属性

3.fadeToggle();

此方法会动态的改变当前元素的透明度，最终却换当前元素的可见状态。如果元素是可见的，则通过淡出效果切换隐藏；如果元素是隐藏的，则通过淡入效果切换可见状态，不设置参数时，默认0.4秒内发生淡入与淡出的动画效果

4.fadeTo() ;

fadeln()与fadeOut()方法都是渐隐渐显，透明度从1到0，从0到1实现一个渐隐渐显效果，而fadeToggle()方法则是可以控制1-0的透明度，为更好展示透明度的效果，可在页面中创造一个下拉框，用于保存透明度值，操作下拉框去控制图片透明度值

5.slideDown(); 与 slideUp() ;

slideDown()可改变元素高度，呈现一个滑动效果，由上往下滑动，直到显示最终的当前元素，slideUp（）相反，由下往上滑动，直到隐藏最终的当前元素

6.slideToggle();

slideToggle()方法跟slideDown(); 与 slideUp() ;两个方法有异曲同工之妙，同样可改变元素的高度，不同于slideDown(); 与 slideUp() ; 的效果， 这个方法是通过点击事情控制元素的隐藏和显示

7.animate() ;

这个方法是自定义动画效果的方法，高度，宽度，透明度，运行速度都是可通过自定义给属性，这个方法只能改变可以取数字值的css属性，如：大小，边框，内外边距，定位，字体，文本，背景，透明度。

8.stop() ;

停止动画，stop（）方法能结束当前的动画，并立即进入到下一个动画。

javascript动画渐隐

对啊 JS 的渐隐方法（就是淡入淡出效果）不是封装好的吗

adeIn(speed,[callback])

通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。

这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。

返回值

jQuery

参数

speed (String,Number) : 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)

callback (Function) : (Optional) (可选) 在动画完成时执行的函数

示例

用600毫秒缓慢的将段落淡入

jQuery 代码:

$("p").fadeIn("slow");

用200毫秒快速将段落淡入，之后弹出一个对话框

jQuery 代码:

$("p").fadeIn("fast",function(){

alert("Animation Done.");

});

下面是淡出效果

fadeOut(speed,[callback])

通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。

这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。

返回值

jQuery

参数

speed (String,Number) :三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)

callback (Function) :(可选) 在动画完成时执行的函数

示例

用600毫秒缓慢的将段落淡出

jQuery 代码:

$("p").fadeOut("slow");

用200毫秒快速将段落淡出，之后弹出一个对话框

jQuery 代码:

$("p").fadeOut("fast",function(){

alert("Animation Done.");

});