今日工作总结: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那个是红色中国风的风格。
突出了公司整体的气质。个人比较满意。
今日工作总结:jquery轮转效果的集成与前台页面banner的设计思路总结的更多相关文章
- css3线条围绕跑马+jquery打字机效果
原文地址:css3线条围绕跑马+jquery打字机效果 有图有真相,今天偶然看到了一种效果,仔细看了下,发现它是用css的clip+css3的动画实现的,简直叼.于是自己拿来了前一阵子写的打字机效果, ...
- 新鲜出炉的30个精美的 jQuery & CSS3 效果【附演示和教程】
新鲜出炉的30个精美的 jQuery & CSS3 效果[附演示和教程] 作为最流行的 JavaScript 开发框架,jQuery 在现在的 Web 开发项目中扮演着重要角色,它简化了 ...
- python 全栈开发,Day53(jQuery的介绍,jQuery的选择器,jQuery动画效果)
js总结 js: 1.ECMAScript5 ES5语法 2.DOM CRUD 获取 3种方式 id tag className //面向对象 对象 : 属性和方法 某个对象中 function $( ...
- JQuery动画效果
jquery动画效果常用方法 1.show()显示效果语法:show(speed,callback)Number/String,Function speend为动画执行时间,单位为毫秒.也可以为slo ...
- 分享5种风格的 jQuery 分页效果【附代码】
jPaginate 是一款非常精致的分页插件,提供了五种不同风格的分页效果,支持鼠标悬停翻页,快速分页功能.这款插件还提供了丰富的配置选项,你可以根据需要进行设置. 效果演示 源码下载 各个 ...
- jquery动画效果---animate()--滚屏
jquery动画效果---animate()方法---W3school
- jquery 之效果
// jquery 之效果 .css()既可以获取值,如 .css('fontSize'), 又可以设置内置属性,既可用驼峰式,也可以用连字符版,如 .css('background-color', ...
- 大爱jQuery,10美女模特有用jQuery/CSS3插入(集成点免费下载)
整合下载地址:http://download.csdn.net/detail/yangwei19680827/7343001 jQuery真的是一款非常犀利的Javascript框架,利用jQuery ...
- jQuery的效果(动画)
jquery的效果(动画) show 概念:显示隐藏的匹配元素 语法:show(speed,callback) 参数:speed:三种预定速度之一的字符串('slow','normal','fast' ...
随机推荐
- mysql导入导出文本文件
MySQL导入出文本文件只能到处数据,不能到处结构,不过也算备份数据一种方法. 导入文本文件 在此像导入csv文件 也是类似 load data local infile 'd:/insert.txt ...
- Part8-不用内存怎么行_我从内部看内存lesson1
- CSS3 grayscale滤镜图片变黑白
1. 使整个页面的图片都变成灰色的,代码如下. html{ font-size: 100%; -webkit-text-size-adjust: none; -ms-text-s ...
- js实现在表格中删除和添加一行
<!DOCTYPE html><html> <head> <title> new document </title> <meta ht ...
- Working with WordprocessingML documents (Open XML SDK)
Last modified: January 13, 2012 Applies to: Office 2013 | Open XML This section provides conceptual ...
- 【Android学习】实现卡片式ListView
效果: 主要是设置xml文件 两种状态下的item card_background.xml <?xml version="1.0" encoding="utf-8& ...
- poj2002 Squares(hash+折半枚举)
Description A square is a 4-sided polygon whose sides have equal length and adjacent sides form 90-d ...
- C# 微信openid 用户信息
前段demo index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
- uoj #111. 【APIO2015】Jakarta Skyscrapers
#111. [APIO2015]Jakarta Skyscrapers 印尼首都雅加达市有 NN 座摩天楼,它们排列成一条直线,我们从左到右依次将它们编号为 00 到 N−1N−1.除了这 NN 座摩 ...
- 洛谷P4016 负载平衡问题(费用流)
传送门 嗯……完全不会……不过题解似乎讲的挺清楚…… 考虑一下,每一个仓库最终肯定都是平均数,所以数量大于平均数的可以往外运,小于平均数的要从别的地方运进来 考虑建一个超级源$S$和超级汇$T$,并把 ...