javascript百叶窗焦点图

最新推荐文章于 2024-11-10 15:10:09 发布

weixin_30709809

最新推荐文章于 2024-11-10 15:10:09 发布

阅读量80

点赞数

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/alex-chi/p/3497458.html

版权

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="chixiang"/>
<title>love is like</title>
<style type="text/css">
*{ margin:0; padding:0; border:none;}
body, ul, li{ margin:0; padding:0; }
ul, li { list-style:none;}


#slider {overflow:hidden;margin:0px auto;height:250px;width:700px;}
#slider li{float:left;}
#slider li a{display:block;_overflow:hidden;}
</style>
</head>

<body>
<div id="box">
    <ul id="slider">
        <li><a href="#" target="_blank"><img src="http://www1.pconline.com.cn/alex/try/slider/images/01.jpg" width="440" height="250"></a></li>
        <li><a href="#" target="_blank"><img src="http://www1.pconline.com.cn/alex/try/slider/images/02.jpg"  width="440" height="250"></a></li>
        <li><a href="#" target="_blank"><img src="http://www1.pconline.com.cn/alex/try/slider/images/03.jpg"  width="440" height="250"></a></li>
        <li><a href="#" target="_blank"><img src="http://www1.pconline.com.cn/alex/try/slider/images/04.jpg"  width="440" height="250"></a></li>
        <li><a href="#" target="_blank"><img src="http://www1.pconline.com.cn/alex/try/slider/images/05.jpg"  width="440" height="250"></a></li>
        <li><a href="#" target="_blank"><img src="http://www1.pconline.com.cn/alex/try/slider/images/06.jpg"  width="440" height="250"></a></li>
        <li><a href="#" target="_blank"><img src="http://www1.pconline.com.cn/alex/try/slider/images/07.jpg"  width="440" height="250"></a></li>
    </ul>
</div>
<script type="text/javascript">
       function int(obj){
           this.o = document.getElementById(obj);
           this.aImg = this.o.getElementsByTagName("a");
           this.allWidth = parseInt(this.o.offsetWidth);
           this.imgNum = this.o.getElementsByTagName("a").length;
           this.startWidth =this.allWidth/this.imgNum;
           this.endWidth = parseInt(this.o.getElementsByTagName("img")[0].offsetWidth);
           this.moving = (this.imgNum*this.startWidth - this.endWidth)/(this.imgNum-1);
           this.Slide(this.o,this.imgNum,this.aImg,this.startWidth,this.endWidth,this.moving,this.run);
       };
        int.prototype.run = function(srcObj, targetPos, count){
                this.timer = 10;
                var currentCount = 0;
                count = Math.abs(count) || 1;
                var initPos = parseInt(srcObj.offsetWidth);
               var Func = function(initPos, targetPos, currentCount, count) {
                    var b = initPos, c = targetPos - initPos, t = currentCount, d = count;
                    if ((t /= d / 2) < 1) return c / 2 * t * t + b;
                    return -c / 2 * ((--t) * (t - 2) - 1) + b;};
                 if(srcObj.flag){
                    clearInterval(srcObj.flag);
                 }
                srcObj.flag = setInterval(function() {
                    if (currentCount > count) {
                        clearInterval(this.flag);
                    }
                    else {
                        currentCount++;
                        var tmpWidth = Func(initPos,targetPos, currentCount, count);
                        srcObj.style.width = tmpWidth + "px";
                        if (Math.abs(tmpWidth - targetPos) < 1) {
                            srcObj.style.width = targetPos + "px";
                        }
                    }
                }
                , this.timer);
            };
       int.prototype.Slide = function(o,imgNum,aImg,startWidth,endWidth,moving,run){
         for(var i=0; i<imgNum;i++){
             aImg[i].style.width =startWidth+'px';
             (function(x){
                 aImg[x].onmouseover = function(){
                     for(var f = 0 ; f<imgNum;f++){
                         if(f == x){
                             run(aImg[x],endWidth-5,30);
                             continue
                         };
                         run(aImg[f],moving,30);
                     };
                 };
                 o.onmouseout = function(){
                     for(var y =0;y<imgNum;y++){
                         run(aImg[y],startWidth-2,30);
                     };
                    
                 };
             })(i);
         };
     };
 new int("slider")
</script>
</body>
</html>