脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js实现同一个页面多个渐变效果

js实现同一个页面多个渐变效果的方法

 更新时间：2015年04月10日 09:59:51   作者：jingangel  
这篇文章主要介绍了js实现同一个页面多个渐变效果的方法,涉及javascript操作渐变效果的实现技巧,非常具有实用价值,需要的朋友可以参考下

本文实例讲述了js实现同一个页面多个渐变效果的方法。分享给大家供大家参考。具体分析如下：

这里可实现5个元素中随便一个，鼠标移上去透明度渐渐增加，鼠标移出，透明度渐渐减小的效果。

要点一：

var speed = 0;
if(target>obj.alpha){
speed = 5;
}else{
speed = -5;
}

根据目标值和当时值的对比，来决定是正向还是负向速度。

要点二：

for(i=0; i<runs_li.length; i++){
runs_li[i].timer = null;
runs_li[i].alpha = 30;
runs_li[i].onmouseover = function(){
startrun(this,100);
}
runs_li[i].onmouseout = function(){
startrun(this,30);
}
}

给每一个元素加上各自的透明度值，各自的透明度变化分开。

最后，上代码：

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body,ul,li{margin:0; padding:0;}
#runs{width:300px; margin:10px auto;}
#runs li{width:80px; height:80px; background:#06c; list-style:none;
float:left; margin:10px; display:inline;
filter:alpha(opacity=30); opacity:0.3;}
</style>
<script>
window.onload = function(){
 var runs = document.getElementById("runs");
 var runs_li = runs.getElementsByTagName("li");
 var i=0; 
 for(i=0; i<runs_li.length; i++){
 runs_li[i].timer = null;
 runs_li[i].alpha = 30;
 runs_li[i].onmouseover = function(){
  startrun(this,100);
 }
 runs_li[i].onmouseout = function(){
  startrun(this,30);
 }
 }
}
function startrun(obj,target){
 clearInterval(obj.timer);
 obj.timer = setInterval(function(){
 var speed = 0;
 if(target>obj.alpha){
  speed = 5;
 }else{
  speed = -5;
 }
 
 if(obj.alpha == target){
  clearInterval(obj.timer);
 }else{
  obj.alpha = obj.alpha + speed;
  obj.style.filter = "alpha(opacity="+obj.alpha+")";
  obj.style.opacity = obj.alpha/100;
 }
 
 },30)
}
</script>
</head>
<body>
<ul id="runs">
 <li>1</li>
 <li>2</li>
 <li>3</li>
 <li>4</li>
 <li>5</li>
</ul>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • JavaScript实现自动生成带水印的图片

    JavaScript实现自动生成带水印的图片

    这篇文章主要来和大家一起讨论如何利用JavaScript实现一个复杂功能,该功能可以自动为图片添加水印,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-01-01
  • JS给swf传参数的实现方法

    JS给swf传参数的实现方法

    下面小编就为大家带来一篇JS给swf传参数的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-09-09
  • js数组与字符串的相互转换方法

    js数组与字符串的相互转换方法

    这篇文章主要介绍了js数组与字符串的相互转换方法,是js中常用的技巧,需要的朋友可以参考下
    2014-07-07
  • 详解如何用webpack打包一个网站应用项目

    详解如何用webpack打包一个网站应用项目

    本篇文章主要介绍了如何用webpack打包一个网站应用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • 微信小程序实现商品分类列表

    微信小程序实现商品分类列表

    这篇文章主要为大家详细介绍了微信小程序实现商品分类列表，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-05-05
  • javascript 闭包函数做显隐内容

    javascript 闭包函数做显隐内容

    用闭包函数做显隐内容,主要优势就是可以增加显示与隐藏效率。
    2009-03-03
  • JS设置获取cookies的方法

    JS设置获取cookies的方法

    这篇文章主要介绍了JS设置获取cookies的方法，有需要的朋友可以参考一下
    2014-01-01
  • Javascript仿京东放大镜的效果

    Javascript仿京东放大镜的效果

    本文主要介绍了Javascript仿京东放大镜效果的实例。具有很好的参考价值，下面跟着小编一起来看下吧
    2017-03-03
  • Webpack之tree-starking 解析

    Webpack之tree-starking 解析

    这篇文章主要介绍了Webpack之tree-starking 解析，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • 微信小程序实现锚点功能

    微信小程序实现锚点功能

    这篇文章主要为大家详细介绍了微信小程序实现锚点功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-11-11

最新评论