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


Posted in Javascript onApril 10, 2015

本文实例讲述了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 相关文章推荐
CSS和Javascript简单复习资料
Jun 29 Javascript
判断浏览器的javascript版本的代码
Sep 03 Javascript
jQuery中element选择器用法实例
Dec 29 Javascript
深入理解JavaScript系列(17):面向对象编程之概论详细介绍
Mar 04 Javascript
js计算时间差代码【包括计算,天,时,分,秒】
Apr 26 Javascript
详解PHP中pathinfo()函数导致的安全问题
Jan 05 Javascript
ionic选择多张图片上传的示例代码
Oct 10 Javascript
webpack css加载和图片加载的方法示例
Sep 11 Javascript
JavaScript中的事件与异常捕获详析
Feb 24 Javascript
javascript二维数组和对象的深拷贝与浅拷贝实例分析
Oct 26 Javascript
Vue ECharts实现机舱座位选择展示功能
May 15 Vue.js
vue中data里面的数据相互使用方式
Jun 05 Vue.js
js实现缓冲运动效果的方法
Apr 10 #Javascript
js实现分享到随页面滚动而滑动效果的方法
Apr 10 #Javascript
js实现同一页面多个不同运动效果的方法
Apr 10 #Javascript
js实现类似jquery里animate动画效果的方法
Apr 10 #Javascript
js实现类似新浪微博首页内容渐显效果的方法
Apr 10 #Javascript
javascript中关于&amp;&amp; 和 || 表达式的小技巧分享
Apr 10 #Javascript
js简单的点击返回顶部效果实现方法
Apr 10 #Javascript
You might like
PHP一些常用的正则表达式字符的一些转换
2008/07/29 PHP
PHP可逆加密/解密函数分享
2012/09/25 PHP
php中addslashes函数与sql防注入
2014/11/17 PHP
php访问数组最后一个元素的函数end()用法
2015/03/18 PHP
PHP图像处理类库及演示分享
2015/05/17 PHP
php在windows环境下获得cpu内存实时使用率(推荐)
2018/02/08 PHP
PHP defined()函数的使用图文详解
2019/07/20 PHP
Laravel实现批量更新多条数据
2020/04/06 PHP
CSDN轮换广告图片轮换效果
2007/03/27 Javascript
Javascript图像处理—虚拟边缘介绍及使用方法
2012/12/27 Javascript
JS/FLASH实现复制代码到剪贴板(兼容所有浏览器)
2013/05/27 Javascript
JavaScript获取网页中第一个图片id的方法
2015/04/03 Javascript
jquery图片切换实例分析
2015/04/15 Javascript
windows下安装nodejs及框架express
2015/08/07 NodeJs
Vue scrollBehavior 滚动行为实现后退页面显示在上次浏览的位置
2019/05/27 Javascript
layuiAdmin循环遍历展示商品图片列表的方法
2019/09/16 Javascript
稍微学一下Vue的数据响应式(Vue2及Vue3区别)
2019/11/21 Javascript
NodeJS和浏览器中this关键字的不同之处
2021/03/03 NodeJs
跟老齐学Python之集合(set)
2014/09/24 Python
Python将一个CSV文件里的数据追加到另一个CSV文件的方法
2018/07/04 Python
使用pip发布Python程序的方法步骤
2018/10/11 Python
Python eval的常见错误封装及利用原理详解
2019/03/26 Python
基于 Django 的手机管理系统实现过程详解
2019/08/16 Python
Pytorch对Himmelblau函数的优化详解
2020/02/29 Python
Python dict和defaultdict使用实例解析
2020/03/12 Python
如何使用python的ctypes调用医保中心的dll动态库下载医保中心的账单
2020/05/24 Python
汇集了世界上最好的天然和有机美容产品:LoveLula
2018/02/05 全球购物
2014年六一儿童节演讲稿
2014/05/23 职场文书
5s标语大全
2014/06/23 职场文书
创先争优活动承诺书
2014/08/30 职场文书
中班下学期个人工作总结
2015/02/12 职场文书
追悼词范文大全
2015/06/23 职场文书
理想国读书笔记
2015/06/25 职场文书
公司周年庆典致辞
2015/07/30 职场文书
《丑小鸭》教学反思
2016/02/19 职场文书
煤矿施工安全协议书
2016/03/22 职场文书