你的位置:首页 > Java教程

[Java教程]今日工作总结: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那个是红色中国风的风格。

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