關(guān)于鼠標(biāo)在圖表上移動也會引起旋轉(zhuǎn)是怎么回事？就是鼠標(biāo)移入他會轉(zhuǎn)一圈，移出同樣會？？？？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>淘寶js案例</title>
? ? <script type="text/javascript" src="../move.js"></script>
? ? ?<script type="text/javascript">
? ? ? ? ?window.onload=function(){
? ? ? ? ? ? var oMove=document.getElementById('move');
? ? ? ? ? ? var aList=oMove.getElementsByTagName('a');
? ? ? ? ? ? for(var i in aList){
? ? ? ? ? ? ? ? aList[i].onmouseover=function(){
? ? ? ? ? ? ? ? ? ? var _this=this.getElementsByTagName('i')[0];
? ? ? ? ? ? ? ? ? ? startMove(_this,{top:-25,opacity:0},function(){
? ? ? ? ? ? ? ? ? ? ? ? _this.style.top=20+'px';
? ? ? ? ? ? ? ? ? ? ? ? startMove(_this,{top:10,opacity:100})
? ? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ?}
? ? ?</script>
</head>
<style type="text/css">
? ? * {
? ? ? ? padding: 0;
? ? ? ? margin: 0;
? ? }
?
? ? #move {
? ? ? ? width: 240px;
? ? ? ? margin: 10px auto;
? ? ? ? background-color: #f5f4f4;
? ? ? ? border: 1px solid #ccc;
? ? ? ? overflow: hidden;
? ? }
?
? ? #move a {
? ? ? ? float: left;
? ? ? ? display: inline-block;
? ? ? ? width: 58px;
? ? ? ? height: 25px;
? ? ? ? border: 1px solid #ddd;
? ? ? ? border-radius: 3px;
? ? ? ? background: #fff;
? ? ? ? text-align: center;
? ? ? ? margin: 10px 10px;
? ? ? ? position: relative;
? ? ? ? padding-top: 40px;
? ? ? ? color: #9c9c9c;
? ? ? ? font-size: 12px;
? ? ? ? text-decoration: none;
? ? ? ? line-height: 25px;
? ? ? ? overflow: hidden;
? ? }
?
? ? #move a i {
? ? ? ? position: absolute;
? ? ? ? top: 10px;
? ? ? ? left: 0;
? ? ? ? display: inline-block;
? ? ? ? width: 100%;
? ? ? ? text-align: center;
? ? ? ? opacity: 1;
? ? ? ? filter: alpha(opacity=100);
? ? }
?
? ? #move a:hover {
? ? ? ? color: #f00;
? ? }
?
? ? #move img {
? ? ? ? border: none;
? ? }
</style>
<body>
<div id="move">
<a href="#"><i><img src="caipiao.png"></i><p>彩票</p></a>
<a href="#"><i><img src="movie.png"></i><p>電影</p></a>
<a href="#"><i><img src="music.png"></i><p>音樂</p></a>
<a href="#"><i><img src="jiaofei.png"></i><p>繳費(fèi)</p></a>
<a href="#"><i><img src="licai.png"></i><p>理財</p></a>
<a href="#"><i><img src="food.png"></i><p>外賣</p></a>
</div>
</body>
</html>
function getStyle(obj,attr){
? ? ?if (obj.currentStyle) {
? ? ? ? return obj.currentStyle[attr];
? ? ?}
? ? ?else{
? ? ? ? return getComputedStyle(obj,false)[attr];
? ? ?}
}
function startMove(obj,json,fn){
? ?clearInterval(obj.timer);
? ?obj.timer=setInterval(function(){
? ? var flag=true;
? ? ?for(var attr in json)
? ? ?{
? ? ?var icur=0;
? ? ?if(attr=='opacity'){
? ? ? ? ?icur=Math.round(parseFloat(getStyle(obj,attr))*100);
? ? ?}else{
? ? ? ? ?icur=parseInt(getStyle(obj,attr));
? ? ?}
? ? //獲取速度
? ? ?var speed=(json[attr]-icur)/8;
? ? ?speed=speed>0?Math.ceil(speed):Math.floor(speed);
? ? ?// 動畫停止
? ? ?if(icur!==json[attr]){
? ? ? flag=false;
? ? ? ??
? ? ? ? }else{
? ? ? ? ?flag=true;
? ? ? ? }
? ?
? ? ?if(attr=='opacity'){
? ? ? ? obj.style.filter='alpha(opacity:'+(icur+speed)+')';
? ? ? ? obj.style.opacity=(icur+speed)/100;
? ? ?}else{
? ? ? ? ?obj.style[attr]=icur+speed+'px';
? ? ?}
? ? ?} ? ?
? ? ?if(flag){
? ? ? clearInterval(obj.timer);
? ? ? if(fn){
? ? ? fn();
? ? ? }
? ? ?}
? ??
? ?},15 )
}
2018-08-23
是因?yàn)楦淖僼op值 做事件,視覺上讓你感覺轉(zhuǎn)了一圈,其實(shí)沒有,跟鼠標(biāo)那個沒什么關(guān)系
2018-07-22
因?yàn)槭髽?biāo)觸動相關(guān)事件