zoukankan      html  css  js  c++  java
  • 妙味——分享到侧边栏

    <!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" xml:lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style>
    *{
    	margin: 0;
    	padding: 0;
    }
    #div1{
    	 100px;
    	height: 200px;
    	background: #ccc;
    	position: absolute;
    	top: 50px;
    	left: -100px;
    }
    #div1 span{
    	display: block;
    	 20px;
    	line-height: 20px;
    	height: 60px;
    	text-align: center;
    	position: absolute;
    	left: 100px;
    	top: 70px;
    	background: #fcf;
    }
    </style>
    <script>
    window.onload=function(){
    	var oDiv = document.getElementById('div1');
    
    	oDiv.onmouseover=function(){
    		startMove(0);
    	};
    	oDiv.onmouseout=function(){
    		startMove(-100);
    	};
    };
    
    
    var timer = null;
    
    function startMove(iTarget){
    	var oDiv = document.getElementById('div1');
    
    	clearInterval(timer);
    
    	timer=setInterval(function(){
    
    		var iSpeed=0;
    		if(oDiv.offsetLeft<iTarget){
    			iSpeed=10;
    		}
    		else{
    			iSpeed=-10;
    		}
    
    		if(oDiv.offsetLeft==iTarget){
    			clearInterval(timer);
    		}
    		else{
    			oDiv.style.left=oDiv.offsetLeft+iSpeed+'px';
    		}
    	},30);
    }
    </script>
    </head>
    <body>
    	<div id="div1">
    		<span>分享到</span>
    	</div>
    </body>
    </html>
    

     

    高否?富否?帅否? 否? 滚去学习!
  • 相关阅读:
    SignalR + MVC5 简单示例
    SignalR 简单示例
    Web API 简单示例
    Windows Azure 使用体验
    SQL Server 2014 安装小记
    SSRS 迁移
    SSH配置(同一服务器不同用户)
    【6】Zookeeper脚本及API
    【3】Kafka安装及部署
    【2】Kafka概念及原理
  • 原文地址:https://www.cnblogs.com/baixc/p/3477631.html
Copyright © 2011-2022 走看看