注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

梦幻雪冰

技在手,能在身,思在脑,从容过生活——陈能堡

 
 
 

日志

 
 

background-position 在 jQuery animate中失效的解决办法  

2015-01-19 23:10:56|  分类: jQuery |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
今天给学生解决问题中遇到了一个问题,该问题貌似简单,但是“暗藏杀机”。
首先是要实现该效果:效果是四个数字,四个数字垂直滚动(类似行李箱的密码锁);
background-position 在 jQuery animate中失效的解决办法 - 梦幻雪冰 - 梦幻雪冰
使用的技术:jQuery animate、background-position-Y;
欢迎学习交流-----独行冰海、梦幻雪冰

问题来了:Firefox中不支持background-position-Y和background-position-X属性。为兼容Firefox和 IE 需要将此属性改写成 background-position:x y;

问题又来了:在jQuery 中发现animate()函数不能同时处理赋给background-position两个值,如果在animate()中放置一个值的话,浏览器将默认是x方向的值。为了解决该问题,引入了一个插件animateBackground-plugin.js
欢迎学习交流-----独行冰海、梦幻雪冰

具体代码如下:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>独行冰海、梦幻雪冰</title>
<link rel="stylesheet" href="reset.css">
<script src="js/jquery-1.7.2-min.js"></script>
<script src="js/animateBackground-plugin.js"></script>
<style>
.meng {
width: 500px;
height: 200px;
background: url("images/menghuanxuebing.gif");
}
</style>
</head>
<body>
<div class="meng"></div>
<script>
$(".meng").animate({
backgroundPosition :'(0 '+(300)+'px)'
},{
"duration": 600,
complete: function(){
alert("独行冰海、梦幻雪冰");
}
}
);
</script>
</body>
</html>

注意:该插件调用了.$.curCSS方法,该方法曾是 jQuery.css() 的别名。所以只能引入1.8以下jQuery版本
background-position 在 jQuery animate中失效的解决办法 - 梦幻雪冰 - 梦幻雪冰
 
background-position 在 jQuery animate中失效的解决办法 - 梦幻雪冰 - 梦幻雪冰
 
欢迎学习交流-----独行冰海、梦幻雪冰
 
  评论这张
 
阅读(130)| 评论(3)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017