js 分享到效果

来源：互联网发布：mysql tmp 目录在哪编辑：程序博客网时间：2024/06/07 10:08

当鼠标进入分享到，慢慢弹出分享界面，鼠标移除慢慢收回

position:absolute; 必须个盒子设置，绝对定位

<!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>#div{height:200px;width:150px;background:#096;left:-150px;position:absolute;}span{width:20px;height:60px;background:#0F0;left:150px;top:65px;position:absolute;}</style></head><script>var time; //定时器对象要定义在外面，不能每次响应事件都创建一个定时器window.onload = function(){var div = document.getElementById('div');var speed;div.onmouseover = function(){ //当鼠标移动至'分享到’speed = 10;move(speed, 0);//向右移动,传入到达的值};div.onmouseout = function(){speed = -10;move(speed,-150); //向左移动};};function move(speed,e){var div = document.getElementById('div');clearInterval(time); //先关闭定时器time = setInterval(function(){if (div.offsetLeft == e){clearInterval(time);}else{div.style.left=div.offsetLeft+speed+'px';}},30);};</script><body><div id = "div"><span>分享到</span></div></body></html>

阅读全文

0 0