星空网 > 软件开发 > Java

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

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

1.jquery轮转效果的集成

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

jquery代码如下:

<script type="text/javascript" src='/images/loading.gif' data-original="js/jquery-1.7.2.min.js"></script><script type="text/javascript" src='/images/loading.gif' data-original="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)是大气的蓝**anner。kuaidi.1688q.com那个是红色中国风的风格。

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




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

关键词:jquery

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

干货:亚马逊螺旋式爆款打造技巧!:https://www.ikjzd.com/articles/22899
亚马逊开始插足培训业,推出服装新品牌,再次抢占市场份额!:https://www.ikjzd.com/articles/229
从一个水杯看亚马逊品牌的高阶绝密“小而美”:https://www.ikjzd.com/articles/22908
跨境站外引流注意了!Facebook产品4月有更新:https://www.ikjzd.com/articles/22909
中美贸易战白热化,或将直接影响卖家发货!:https://www.ikjzd.com/articles/2291
亚马逊账户被封原因及解救方法:https://www.ikjzd.com/articles/22910
皇帝的皇宫=:https://www.vstour.cn/a/363188.html
海南岛琼海市旅游景点 琼海市的旅游景点:https://www.vstour.cn/a/363189.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流