weixin_47214492 2022-01-05 11:34 采纳率: 100%
浏览 98
已结题

这段js特效,能为我解答一下是什么意思吗,最好能写点注释给我




``` auto=null;
timer=null;
var focus=new Function(); 
focus.prototype={
    init:function(){
    this.aTime=this.aTime || 10;
    this.sTime=this.sTime || 5000;
    this.oImg=document.getElementById('focus_m').getElementsByTagName("ul")[0];
        this.oImgLi=this.oImg.getElementsByTagName("li");
        this.oL=document.getElementById('focus_l');
        this.oR=document.getElementById('focus_r');
    this.createTextDom();
    this.target=0;
        this.autoMove();
        this.oAction();    },
    createTextDom:function(){
        var that=this;
        this.oText=document.createElement("div");
        this.oText.className="focus_s";
        var ul=document.createElement('ul');
        var frag=document.createDocumentFragment();
        for (var i=0;i<this.oImgLi.length;i++) {
            var li=document.createElement("li");
            li.innerHTML='<b></b>'; 
if (i==0) {
                li.className="active";
            };
            frag.appendChild(li);
        };
        ul.appendChild(frag);
        this.oText.appendChild(ul);
        this.o.insertBefore(this.oText,this.o.firstChild);
        this.oTextLi=this.oText.getElementsByTagName("li");        },
    autoMove:function(){
        var that = this;   
        auto=setInterval(function(){that.goNext()},that.sTime);},
    goNext:function() {
        this.target=this.nowIndex();
        this.target==this.oTextLi.length-1 ? this.target=0:this.target++;
        this.aStep=(this.target-this.nowIndex())*this.step;
        this.removeClassName();
        this.oTextLi[this.target].className="active";
        this.startMove();    },
    goPrev:function() {
        this.target=this.nowIndex();
        this.target==0 ? this.target=this.oTextLi.length-1 : this.target--; 

        this.aStep=(this.target-this.nowIndex())*this.step;
        this.removeClassName();
        this.oTextLi[this.target].className="active";
        this.startMove();    },
    startMove:function (){
        var that=this;
        var t=0;
        this.timer='';
        function set(){
            if (t>100) {
                clearInterval(that.timer);
            }else {
                for (var i=0;i<that.oImgLi.length;i++) {
                    that.oImgLi[i].style.display='none';
                };
                that.oImgLi[that.target].style.display='block';
                that.setOpacity(that.oImg,t);
                t+=5;};};
timer=setInterval(set,that.aTime);},
    setOpacity:function(elem,level){
        if(elem.filters){ 

            elem.style.filter = 'alpha(opacity=' + level + ')';
            elem.style.zoom = 1;
        } else {
            elem.style.opacity = level / 100;
        };
    },
    nowIndex:function(){
        for (var i=0;i<this.oTextLi.length;i++) {
            if (this.oTextLi[i].className=='active') {
                return i;
                break;}};},
    oAction:function(){
        var that=this;
        for (var i=0;i<this.oTextLi.length;i++) {
            this.oTextLi[i].index=i;
            this.oTextLi[i].onclick=function(){
                clearInterval(auto);
                clearInterval(timer);
                that.setOpacity(that.oImg,100);
                that.target=this.index;
                that.removeClassName(); 

                this.className='active';
                that.startMove();}};
        mouseEnter (that.o,'mouseleave',function(e){
                clearInterval(auto);
                that.autoMove();});
        this.oL.onclick=function(){
            that.goPrev();};
        this.oR.onclick=function(){
            that.goNext();};},
    removeClassName:function(){
        for (var i=0;i<this.oTextLi.length;i++) {
            this.oTextLi[i].className=""};}};
var focusRun=new focus();
focusRun.o=document.getElementById("focus");
function mouseEnter(ele,type,func){
    if(window.document.all)    
        ele.attachEvent('on'+type,func);
    else{//ff
        if(type==='mouseenter')
    ele.addEventListener('mouseover',this.withoutChildFunction(func),false)
        else if(type==='mouseleave') 

    ele.addEventListener('mouseout',this.withoutChildFunction(func),false);
        else
            ele.addEventListener(type,func,false);        };};
function withoutChildFunction(func){
    return function(e){
        var parent=e.relatedTarget;
        while(parent!=this&&parent){
            try{
                parent=parent.parentNode;}
            catch(e){
                break;}}
        if(parent!=this)
        func(e);};};
window.onload=function(){
    focusRun.init();};
  • 写回答

2条回答 默认 最新

  • CSDN专家-showbo 2022-01-05 11:51
    关注

    很基础的api
    document.getElementById通过Id获取dom对象
    xxx.getElementsByTagName,通过dom标签名获取xxx对象的dom集合,注意是集合
    document.createElement,通过标签名创建dom对象
    document.createDocumentFragment,创建文档片段对象
    xxx.appendChild,往xxx这个dom中添加dom
    xxx.className用于获取或者设置xxx这个dom的样式

    然后其他就是一些逻辑控制和dom的内联属性对象操作 xxx,style,设置透明的时候做了兼容判断,如果支持filter就设置filter属性(比如IE8不支持opacity,需要设置filter属性),否则设置opacity属性。

    题主有哪些还不理解的可以单独提出来,注释大概如下,题主这个代码太老了,至少7,8年前的代码了

    
        auto = null
        timer = null;
        //上面2个变量存储setInterval计时器的句柄
        var focus = new Function();//生成一个新的空函数,等价于var focs=function(){};
        focus.prototype = {//设置函数的原型方法,es5面向对象经常用到的
            init: function () {//初始化方法
                this.aTime = this.aTime || 10;//startMove中计时器定时执行的间隔,为传递配置则默认10毫秒
                this.sTime = this.sTime || 5000;//autoMove中计时器定时执行的间隔,为传递配置则默认5000毫秒(5s)
                this.oImg = document.getElementById('focus_m').getElementsByTagName("ul")[0];//获取id为focus_m这个dom下的第一个ul对象,getElementsByTagName返回dom数组,所有要转dom需要[0]取值
                this.oImgLi = this.oImg.getElementsByTagName("li");//获取ul下的所有li
                this.oL = document.getElementById('focus_l');//获取左移动按钮dom
                this.oR = document.getElementById('focus_r');//获取右移动按钮dom
                this.createTextDom();//调用createTextDom创和oImgLi长度一样的导航点容器,由于没有html和样式,猜测是这样
                this.target = 0;//当前播放的图片
                this.autoMove();//开始自动播放计时器
                this.oAction();//调用给导航容器添加事件的方法
            },
            createTextDom: function () {//生成导航的的点使用的
                var that = this;
                this.oText = document.createElement("div");//创建新的div,并往这个div中添加ul,li
                this.oText.className = "focus_s";
                var ul = document.createElement('ul');
                var frag = document.createDocumentFragment();//这个没什么必要,下面的frag.appendChild(li);可以直接改为ul.appendChild(li);去掉ul.appendChild(frag);
                for (var i = 0; i < this.oImgLi.length; i++) {
                    var li = document.createElement("li");
                    li.innerHTML = '<b></b>';
                    if (i == 0) {
                        li.className = "active";
                    };
                    frag.appendChild(li);
                };
                ul.appendChild(frag);
                this.oText.appendChild(ul);
                this.o.insertBefore(this.oText, this.o.firstChild);
                this.oTextLi = this.oText.getElementsByTagName("li");
            },
            autoMove: function () {//自动播放动画方法
                var that = this;
                auto = setInterval(function () { that.goNext() }, that.sTime);
            },
            goNext: function () {//播放下张图片的方法
                this.target = this.nowIndex();//看nowIndex放解释
                //最后一张则播放第一张,否则播放下一张
                this.target == this.oTextLi.length - 1 ? this.target = 0 : this.target++;
                this.aStep = (this.target - this.nowIndex()) * this.step;//这个变量没用到,目测是用来实现左右移动效果用的,现在的效果为渐变所以没使用
                this.removeClassName();
                this.oTextLi[this.target].className = "active";//设置对应导航点获得焦点样式
                this.startMove();//开始透明渐变动画
            },
            goPrev: function () {//播放上张图片的方法
                this.target = this.nowIndex();
                //这个同理,第一张则切换到最后一张,否则播放上一张图片
                this.target == 0 ? this.target = this.oTextLi.length - 1 : this.target--;
                this.aStep = (this.target - this.nowIndex()) * this.step;
                this.removeClassName();
                this.oTextLi[this.target].className = "active";
                this.startMove();//开始透明渐变动画
            },
            startMove: function () {//透明渐变动画效果方法
                var that = this;
                var t = 0;
                this.timer = '';
                function set() {//设置ul的透明度,从0~100渐变显示出来
                    if (t > 100) {
                        clearInterval(that.timer);//透明度达到100后停止动画
                    } else {
                        for (var i = 0; i < that.oImgLi.length; i++) {//设置所有图片li容器不显示
                            that.oImgLi[i].style.display = 'none';
                        };
                        that.oImgLi[that.target].style.display = 'block';//显示当前播放到的图片
                        that.setOpacity(that.oImg, t);//设置ul的透明度
                        t += 5;
                    };
                };
                timer = setInterval(set, that.aTime);
            },
            setOpacity: function (elem, level) {//设置dom透明度方法
                if (elem.filters) {//支持filter
                    elem.style.filter = 'alpha(opacity=' + level + ')';
                    elem.style.zoom = 1;
                } else {
                    elem.style.opacity = level / 100;
                };
            },
            nowIndex: function () {//获取当前焦点样式的导航下标
                for (var i = 0; i < this.oTextLi.length; i++) {
                    if (this.oTextLi[i].className == 'active') {
                        return i;
                        break;
                    }
                };
            },
            oAction: function () {
                var that = this;
                for (var i = 0; i < this.oTextLi.length; i++) {//给导航点添加click事件
                    this.oTextLi[i].index = i;//自定义属性index存储i的值,这个涉及到闭包,onclick中不能直接使用i变量,除非var改为let,这个题主要了解自己百度下
                    this.oTextLi[i].onclick = function () {
                        clearInterval(auto);//清除自动播放计时器
                        clearInterval(timer);//清除透明动画计时器
                        that.setOpacity(that.oImg, 100);//设置容器透明度直接显示
                        that.target = this.index;//设置当前播放到变量下标为当前点击的导航对应的下标
                        that.removeClassName();
                        this.className = 'active';
                        that.startMove();//开始动画
                    }
                };
                mouseEnter(that.o, 'mouseleave', function (e) {//给焦点图总容器添加mouseleave事件重启动画
                    clearInterval(auto);
                    that.autoMove();
                });
                this.oL.onclick = function () {//点击上一张按钮事件
                    that.goPrev();
                };
                this.oR.onclick = function () {//点击下张按钮事件
                    that.goNext();
                };
            },
            removeClassName: function () {//清除导航焦点样式的方法
                for (var i = 0; i < this.oTextLi.length; i++) {
                    this.oTextLi[i].className = ""
                };
            }
        };
        var focusRun = new focus();//生成focus类实例
        focusRun.o = document.getElementById("focus");//给实例动态添加o属性,focus应该所有切换效果的图片容器
        function mouseEnter(ele, type, func) {
            if (window.document.all)//ie时间绑定
                ele.attachEvent('on' + type, func);
            else {//ff,chrome标准浏览器事件绑定,其实现在使用的所有浏览器已经支持mouseenter,mouseleave,直接绑定这2个事件就行,很老的版本付Firefox10,chrome10以下的不支持这2个事件,需要用mouseover,mouseout替代
                if (type === 'mouseenter')
                    ele.addEventListener('mouseover', this.withoutChildFunction(func), false)
                else if (type === 'mouseleave')
                    ele.addEventListener('mouseout', this.withoutChildFunction(func), false);
                else
                    ele.addEventListener(type, func, false);
            };
        };
        function withoutChildFunction(func) {//这个是防止移动到子对象也会触发mouseover,mouseout事件用的,只有实际移动出容器而不是子对象上才会触发
            return function (e) {
                var parent = e.relatedTarget;
                while (parent != this && parent) {
                    try {
                        parent = parent.parentNode;
                    }
                    catch (e) {
                        break;
                    }
                }
                if (parent != this)
                    func(e);
            };
        };
        window.onload = function () {//注册onload时间然后初始化效果
            focusRun.init();
        };
    
    

    img

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 1月13日
  • 已采纳回答 1月5日
  • 创建了问题 1月5日

悬赏问题

  • ¥20 firefly-rk3399上启动卡住了
  • ¥15 如何删除这个虚拟音频
  • ¥50 hyper默认的default switch
  • ¥15 网站打不开,提示502 Bad Gateway
  • ¥20 基于MATLAB的绝热压缩空气储能系统代码咨询
  • ¥15 R语言建立随机森林模型出现的问题
  • ¥15 中级微观经济学,生产可能性边界问题
  • ¥15 TCP传输时不同网卡传输用时差异过大
  • ¥15 请各位看看我写的属于什么算法,或者有更正确的写法?
  • ¥15 html5 qrcode 扫描器