js特效之“分享栏”
来源:互联网 发布:润飞rf2148软件下载 编辑:程序博客网 时间:2024/06/05 21:13
<html>
<head>
<title>无标题文档</title>
<style>
#div1{
width:150px;
height:300px;
background:lime;
position:absolute;
left:-150px;
top:150px;
}
#div1 span{
width:20px;
height:60px;
position:absolute;
background:pink;
right:-20px;
top:110px;
}
</style>
<script>
window.onload=function(){
var oDiv=document.getElementById('div1');
oDiv.onmouseover=function(){
move(0);
}
oDiv.onmouseout=function(){
move(-150);
}
var times;
function move(iTarget){
clearInterval(times);
times=setInterval(function(){
var speed;
if(oDiv.offsetLeft < iTarget){
speed=10;
}
else{
speed=-10;
}
if(oDiv.offsetLeft == iTarget){
clearInterval(times);
}
else{
oDiv.style.left=oDiv.offsetLeft+speed+'px';
}
},30);
}
}
</script>
</head>
<body>
<div id='div1'>
<span>分享到</span>
<a href="http://www.baidu.com">百度</a>
</div>
</body>
</html>
效果图:
- js特效之“分享栏”
- 初探js特效魅力之“分享到”侧边栏
- JS特效之倒计时
- 200多个js特效分享
- 200多个js特效分享
- 免费分享个JS特效工具
- JS特效之打字机效果
- js特效之无缝滚动
- js特效之数码时钟
- JS特效之漂浮广告
- js特效之图片切换
- js特效之文本方形运动
- 简谈网页高级特效之JS
- JS特效之鼠标滑动导航条
- 初探js特效魅力之无缝滚动
- JS特效之变色的按钮
- js小特效之演示提示框
- js特效之_滚动标题
- 软件测试是提高软件产品质量的必要条件
- DLNA
- 在不知道元素个数的情况下,完成页面所有元素的遍历
- 基于产品的测试管理(用友软件测试流程初探)
- 尽量不要使用IP分片
- js特效之“分享栏”
- 企业架构(Enterprise Architecture)
- BMFont中文字体图集制作的方法~(for unity ngui)
- Qt编译生成静态库(静态编译)
- java代理(AOP)
- java将Oracle中的clob转为String类型
- 经典MVC在iphone的运用
- 分类模型在关键词推荐系统中的应用
- Vc++调试技巧之调用堆栈