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

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的设计思路总结的更多相关文章

  1. css3线条围绕跑马+jquery打字机效果

    原文地址:css3线条围绕跑马+jquery打字机效果 有图有真相,今天偶然看到了一种效果,仔细看了下,发现它是用css的clip+css3的动画实现的,简直叼.于是自己拿来了前一阵子写的打字机效果, ...

  2. 新鲜出炉的30个精美的 jQuery & CSS3 效果【附演示和教程】

    新鲜出炉的30个精美的 jQuery & CSS3 效果[附演示和教程]   作为最流行的 JavaScript 开发框架,jQuery 在现在的 Web 开发项目中扮演着重要角色,它简化了 ...

  3. python 全栈开发,Day53(jQuery的介绍,jQuery的选择器,jQuery动画效果)

    js总结 js: 1.ECMAScript5 ES5语法 2.DOM CRUD 获取 3种方式 id tag className //面向对象 对象 : 属性和方法 某个对象中 function $( ...

  4. JQuery动画效果

    jquery动画效果常用方法 1.show()显示效果语法:show(speed,callback)Number/String,Function speend为动画执行时间,单位为毫秒.也可以为slo ...

  5. 分享5种风格的 jQuery 分页效果【附代码】

    jPaginate 是一款非常精致的分页插件,提供了五种不同风格的分页效果,支持鼠标悬停翻页,快速分页功能.这款插件还提供了丰富的配置选项,你可以根据需要进行设置. 效果演示      源码下载 各个 ...

  6. jquery动画效果---animate()--滚屏

    jquery动画效果---animate()方法---W3school

  7. jquery 之效果

    // jquery 之效果 .css()既可以获取值,如 .css('fontSize'), 又可以设置内置属性,既可用驼峰式,也可以用连字符版,如 .css('background-color', ...

  8. 大爱jQuery,10美女模特有用jQuery/CSS3插入(集成点免费下载)

    整合下载地址:http://download.csdn.net/detail/yangwei19680827/7343001 jQuery真的是一款非常犀利的Javascript框架,利用jQuery ...

  9. jQuery的效果(动画)

    jquery的效果(动画) show 概念:显示隐藏的匹配元素 语法:show(speed,callback) 参数:speed:三种预定速度之一的字符串('slow','normal','fast' ...

随机推荐

  1. laravel实现多对多的分析

    在实际开发中多对多的开发还是比较常见的 1.1首先由migrate来创建表(文章表) 1.2同理创建标签表 1.3这是 我会的到如下结果: 2.1在数据迁移表contents中添加几个字段 publi ...

  2. Django----Rest Framework框架

    Django Rest Framework框架(10) - RESTful规范 1.API与用户的通信协议,总是使用HTTPs协议. 2.域名 https://api.example.com 尽量将A ...

  3. Django框架 之 logging配置

    Django框架 之 logging配置 logging配置文件 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 2 ...

  4. 推荐一款基于XNA的开源游戏引擎《Engine Nine》

    一.前沿导读 XNA是微软基于.Net部署的下一代3D/2D游戏开发框架,其实XNA严格来说类似下一代的DirectX,当然不是说XNA会取代DirectX,但是基于XNA我们对于面向XBOX360, ...

  5. VMware下Ubuntu虚拟机NAT模式 连接Xshell

    1.Edit->Virtual NetWork Editor 2.选择NAT->NAT Settings 配置端口映射关系 很重要! Host port: 真实主机 一般是Windows端 ...

  6. atom markdown报错:AssertionError: html-pdf: Failed to load PhantomJS module.

    今天安装markdown-pdf之后运行的时候报错: AssertionError: html-pdf: Failed to load PhantomJS module. You have to se ...

  7. 单个控件textbox只支持在英文状态下输入所需的字符串

    也就是它的属性: Imemode的属性 设置成off就可以了 ,就不会受到所输入的中文汉字了.

  8. Position Independent Code (PIC) in shared libraries

    E原文地址:http://eli.thegreenplace.net/2011/11/03/position-independent-code-pic-in-shared-libraries/下一文: ...

  9. 关于AJAX与JSON的杂记

    一.当网页需要有多个XMLHttpRequest对象时,可以使用Callback 函数,callback 函数是一种以参数形式传递给另一个函数的函数. <html> <head> ...

  10. [raspberry p3] suse wifi驱动加载

    问题 raspberry pi3安装后发现wifi 启动不了, brcmf_sdio加载失败了,return error code为-110 处理方法 打开 /etc/dracut.conf.d/ra ...