本文实例讲述了jQuery实现鼠标响应式透明度渐变动画效果。分享给大家供大家参考,具体如下:
先来看看运行效果:
具体代码如下:
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=" utf - 8 "/比;
& lt; title> js动画——透明度变化& lt;/title>
& lt;脚本src=" http://libs.baidu.com/jquery/1.10.2/jquery.js "祝辞& lt;/script>
& lt; style>
* {
保证金:0;
填充:0;
字体类型:“微软雅黑”
}
#箱{
身高:100 px;
宽度:100 px;
background - color: # 0099 cc的;
margin-top: 200 px;
位置:相对;/*透明度变化*/左:0 px;
过滤器:α(不透明度:30);
透明度:0.3;
}
跨度{
显示:块;
颜色:蓝色;
宽度:25 px;
身高:100 px;
background - color: # FFFF99;
位置:绝对的;
左:100 px;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div id=昂凶印北?
& lt; span>移动& lt;/span>
& lt;/div>
& lt; script>
window=function () {
var div1=. getelementbyid(“盒”);
div1.onmouseover=function () {
startMove (100);
}
div1.onmouseout=function () {
startMove (30);
}
}
var计时器=零;
varα=30;
函数startMove (itarget) {
clearInterval(计时器);
var div1=. getelementbyid(“盒”);
计时器=setInterval(函数(){
var速度=0;
如果(alpha> itarget) {
速度=-10;
其他}{
速度=10;
}
如果(α==itarget) {
clearInterval(计时器);
其他}{
α+=速度;
div1.style.filter="α(不透明度:“+α+”)”;
div1.style.opacity=α/100;
}
},100)
}
& lt;/script>
& lt;/body>
& lt;/html>
之前
更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery常用插件及用法总结》,《jQuery扩展技巧总结》,《jQuery拖拽特效与技巧总结》,《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jQuery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
