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 相关文章推荐
一些有关检查数据的JS代码
Sep 07 Javascript
用js得到网页中所有的div的id
Oct 19 Javascript
关于删除时的提示处理(确定删除吗)
Nov 03 Javascript
JQ获取动态加载的图片大小的正确方法分享
Nov 08 Javascript
easyui Droppable组件实现放置特效
Aug 19 Javascript
深入解析JavaScript中函数的Currying柯里化
Mar 19 Javascript
Node.js服务器环境下使用Mock.js拦截AJAX请求的教程
May 23 Javascript
bootstrap日历插件datetimepicker使用方法
Dec 14 Javascript
利用node.js制作命令行工具方法教程(一)
Jun 22 Javascript
js+SVG实现动态时钟效果
Jul 14 Javascript
js实现无缝轮播图
Mar 09 Javascript
autojs 蚂蚁森林能量自动拾取即给指定好友浇水的实现方法
May 03 Javascript
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获取谷歌PR值算法,附上php查询PR值代码示例
2011/12/25 PHP
用PHP实现小写金额转换大写金额的代码(精确到分)
2012/01/10 PHP
php删除与复制文件夹及其文件夹下所有文件的实现代码
2013/01/23 PHP
PHP过滤★等特殊符号的正则
2014/01/27 PHP
php反射应用示例
2014/02/25 PHP
php解决抢购秒杀抽奖等大流量并发入库导致的库存负数的问题
2014/06/19 PHP
php格式化时间戳
2016/12/17 PHP
关于PHP内置的字符串处理函数详解
2017/02/04 PHP
PHP调用全国天气预报数据接口查询天气示例
2019/02/20 PHP
使用swoole 定时器变更超时未支付订单状态的解决方案
2019/07/24 PHP
PHP使用PDO实现mysql防注入功能详解
2019/12/20 PHP
jQuery动画特效实例教程
2014/08/29 Javascript
Javascript实现的SHA-256加密算法完整实例
2016/02/02 Javascript
JQuery EasyUI的使用
2016/02/24 Javascript
JS实现电商放大镜效果
2017/08/24 Javascript
JS中使用new Option()实现时间联动效果
2018/12/10 Javascript
node.JS的crypto加密模块使用方法详解(MD5,AES,Hmac,Diffie-Hellman加密)
2020/02/06 Javascript
python实现二叉查找树实例代码
2018/02/08 Python
Django自定义过滤器定义与用法示例
2018/03/22 Python
python面试题之列表声明实例分析
2019/07/08 Python
在交互式环境中执行Python程序过程详解
2019/07/12 Python
Django全局启用登陆验证login_required的方法
2020/06/02 Python
Django框架请求生命周期实现原理
2020/11/13 Python
python中doctest库实例用法
2020/12/31 Python
澳大利亚体育和露营装备在线/实体零售商:Find Sports
2020/06/03 全球购物
八年级历史教学反思
2014/01/10 职场文书
小加工厂管理制度
2014/01/21 职场文书
幼儿园大班开学教师寄语
2014/04/03 职场文书
股份转让协议书
2014/04/12 职场文书
投标保密承诺书
2014/05/19 职场文书
2015年家长学校工作总结
2015/04/22 职场文书
七一表彰大会简报
2015/07/20 职场文书
高中政治教师教学反思
2016/02/23 职场文书
会计专业2019暑假实习报告
2019/06/21 职场文书
oracle通过存储过程上传list保存功能
2021/05/12 Oracle
Python数组变形的几种实现方法
2022/05/30 Python