码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2015-03-20 18:05:20      阅读:133      评论:0      收藏:0      [点我收藏+]

标签:

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

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那个是红色中国风的风格。

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

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

标签:

原文地址:http://www.cnblogs.com/erfei/p/4353824.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!