鼠标移过去时就移动,随时变换

4 篇文章 0 订阅

在前台页面中的设置:
  <li id="tag1" οnmοuseοut="set_timertag()" οnmοuseοver="stag(1)">婚纱摄影</li>
                                <li id="tag2" οnmοuseοut="set_timertag()" οnmοuseοver="stag(2)">矿产</li>
                                <li id="tag3" οnmοuseοut="set_timertag()" οnmοuseοver="stag(3)">贸易批发</li>
                                <li id="tag4" οnmοuseοut="set_timertag()" οnmοuseοver="stag(4)">机关团体 </li>

在js中的方法:
//计时器

var tab_change_timer;

//设置变量记录滚动位置
var temp_position=1;

//页面自启动开始间隔

window.onload = function()
{
    set_timertag();
}

//启动10秒间隔滑动

function set_timertag(){
 tab_change_timer = window.setInterval('autotag()',20000);
}

//控制标签游走
function autotag(a){
     for(var x = 1; x <= 13; x++)
     {
      document.getElementById("tag"+x).style.background ="";
      document.getElementById("scon"+x).style.display = "none" ;
     }
       j=(temp_position%13)+1; 
       document.getElementById("tag"+j).style.backgroundImage = "url(images/tab.gif)";
       document.getElementById("scon"+j).style.display = "block" ;
       temp_position=j;
 }
 

//清除10秒间隔滑动

function clear_timertag(){
 if(tab_change_timer){
 window.clearInterval(tab_change_timer);
 }
}
//鼠标放某个标签上发生的动作

function stag(a)
{
 clear_timertag();
 temp_position=a;
 for(k = 1; k <= 13; k++)
 {
 document.getElementById("tag"+k).style.background ="";
 document.getElementById("scon"+k).style.display = "none" ;
 }
 document.getElementById("tag"+a).style.backgroundImage = "url(images/tab.gif)";
 document.getElementById("scon"+a).style.display = "block" ;
}

//调整图片大小
function resizeImg(img) {
    try {
        if(img.offsetWidth>0) {
            if(img.offsetWidth>img.height) {
                img.width=img.height;
                img.removeAttribute('height');
            }
        }
        else {
            setTimeout(function() {resizeImg(img);},50);
        }
    }
    catch(ex){;}
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值