今日工作总结：jquery轮转效果的集成与前台页面banner的设计思路总结

今日做了两个项目中的两个问题，现在特来总结一下，以便分享给更多的朋友们。

1.jquery轮转效果的集成

涉及到jquery的不同版本问题，解决办法是在后缀用jQuery代替$。项目地址在：121.40.62.79 可以访问，并通过查看源代码获取到。

jquery代码如下：

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
<script type="text/javascript">
//影像力换一换
var getyxl = jQuery('#picLBxxl li').eq(0).width();
(function($){
    var arartta= window['arartta'] = function(o){
        return new das(o);
    }
    das = function(o){
        this.obj = $('#'+o.obj);
        this.bnt = $('#'+o.bnt);
        this.showLi = this.obj.find('li');
        this.current = 0;
        this.myTimersc = '';
        this.init()
    }
    das.prototype = {
        chgPic:function(n){
            var _this = this;
            for (var i = 0,l= _this.showLi.length; i < l; i++) {
                _this.showLi.eq(i).find(".pic").find('img').eq(n).attr('src',_this.showLi.eq(i).find(".pic").find('img').eq(n).attr('nsrc'));

                $('#picLBxxl dl:not(:animated)').animate({left: -(n * getyxl) + "px"}, {easing:"easeInOutExpo"}, 1500, function(){});
            }
        },
        rotate:function(){
            var _this = this;
            clearInterval(_this.myTimersc);
            _this.bnt.children().css({
                    '-webkit-transform':'rotate(0deg)',
                    '-moz-transform':'rotate(0deg)'
            });
            var tt = 0;
            var getBnts = _this.bnt.children();
            _this.myTimersc = setInterval(function(){
                tt += 10;
                if (tt >= 180) {
                    clearInterval(_this.myTimersc);
                }
                rotateElement(getBnts,tt);
            },25)
        },
        init:function(){
            var _this = this;
            this.bnt.bind("click",function(){
                _this.current++;
                if (_this.current > 2) {
                    _this.current = 0 ;
                }
                _this.chgPic(_this.current);
                _this.rotate();

            })
            this.bnt.mouseenter(function () {
                _this.rotate();
            });

        }
    }
})(jQuery)

arartta({
    bnt:'xxlChg',
    obj:'picLBxxl'
});

function rotateElement(element,angle){
    var rotate = 'rotate('+angle+'deg)';
    if(element.css('MozTransform')!=undefined)
        element.css('MozTransform',rotate);
    else if(element.css('WebkitTransform')!=undefined)
        element.css('WebkitTransform',rotate);
}
</script>

 

 

另一个项目目前放到：http://kuaidi.1688q.com 这里，设计了3个banner。

banner的设计思路如下：

1.确定风格

2.在百度图片里搜索相应的风格

3.在昵图网里搜索素材。

4.在淘宝上花个几块钱购买相关的账号，进行下载。

5.调整好尺寸的大小。

我的几个banner各有特点，比如配资公司（www.ya-jing.cn）是大气的蓝色banner。kuaidi.1688q.com那个是红色中国风的风格。

突出了公司整体的气质。个人比较满意。