jquery背景图片切换改变位置

来源：蜘蛛抓取(WebSpider) 时间：2015-02-09 18:35 标签： jquery改变背景图片
jquery换背景图片点击改变背景图片代码
分享到 09:38:01阅读(1623)
jquery换皮肤特效制作收缩展开滚动图片点击改变背景图片_设置背景图片_切换背景图片_修改背景图片效果代码
下载资源：98次
下载积分：20分
代码评分：
7.5(已有4人评分)
很漂亮，下载学习
很好的效果
为什么我下载的只有背景图的
很好的效果
一、不得利用本站危害国家安全、泄露国家秘密，不得侵犯国家社会集体的和公民的合法权益，不得利用本站制作、复制和传播不法有害信息！
二、互相尊重，对自己的言论和行为负责。
下载该资源用户也下载了
未注册过用户可以点击直接登录哦！
使用注册邮箱登录jquery代码控制css background position属性设置文字背景图片动画
分享到 22:30:24阅读(4411)
jquery遮罩动态背景特效插件(适用于图片和文字)
下载资源：145次
下载积分：20分
代码评分：
9.2(已有5人评分)
很帅哈哈喜欢
真的使用又好看！赞一个！
没有使用说明，不会用。删了。
颜色不是很亮不过也还好...
很漂亮....
一、不得利用本站危害国家安全、泄露国家秘密，不得侵犯国家社会集体的和公民的合法权益，不得利用本站制作、复制和传播不法有害信息！
二、互相尊重，对自己的言论和行为负责。
下载该资源用户也下载了
未注册过用户可以点击直接登录哦！
使用注册邮箱登录您所在的位置： &
jQuery Mobile十大常用技巧
jQuery Mobile十大常用技巧
目前,在移Web开发领域中,除了使用如Android,iOS系统原生提供的API进行开发外,对于Web开发人员来说,最方便快捷的方法莫过于使用比如jQuery Mobile,Sencha Touch这样基于HTML 5的Web框架进行开发了,因为只要熟悉CSS,JavaScript则可以很轻松地运用这些移动Web开发框架进行开发。
在本文中，将介绍使用jQuery Mobile开发的一些常用的技巧，阅读对象为已经使用过jQuery Mobile进行开发的移动Web开发者。
1、禁止截断过长的列表和按钮内容
在jQuery mobile中，如果列表或者按钮中文字的内容过长，jQuery Mobile会自动截断其超过长度的内容，但如果不希望这样的话，可以在CSS样式中增加如下设置即可，比如下面的是针对按钮的CSS样式设置：
.ui-btn-text&{ &white-space:&normal; &}&
下面的是针对列表的CSS样式设置&
&.ui-li-desc&{ &white-space:&normal; &} &
如果要恢复对文字的截断,则继续设置CSS为white-space:
2、实现页面加载时的随机页面背景过渡效果
jQuery Mobile中,当需要实现页面加载时,可以有很多的页面加载事件可供使用。比如下面的CSS和JavaScript代码，可以实现页面加载时的随机页面背景过渡效果。
CSS代码：&
&my-page&&{&background:&transparent&url(../images/bg.jpg)&0&0&no-repeat;&} && &.my-page.bg1&{&background:&transparent&url(../images/bg-1.jpg)&0&0&no-repeat;&} && &.my-page.bg2&{&background:&transparent&url(../images/bg-2.jpg)&0&0&no-repeat;&} && &.my-page.bg3&{&background:&transparent&url(../images/bg-3.jpg)&0&0&no-repeat;&} &
　Javascript代码：
$('.my-page').live(&pagecreate&,&function()&{ &　var&randombg&=&Math.floor(Math.random()*4);&&　&&&&$('.my-page').removeClass().addClass('bg'&+&randombg); &}); &
3、禁用button
在有的情况下，可能会需要禁止按钮的加载事件，这个时候可以继续通过如下的设置实现：
$('#home-button').button(&disable&); &
如果要恢复可用，则设置为：
　$('#home-button').button(&enable&); &
4、去掉页面加载时的提示信息
如果在加载页面时，不需要显示页面加载信息时，可以通过设置一个属性来取消显示加载提示信息，如下：　
　$.mobile.pageLoading(true);&
如果要继续保持显示页面加载信息，则为：
　$.mobile.pageLoading();&
5、创建自定义主题
jQuery Mobile本身提供了A-E五种不同的主题，但可以自定义主题，步骤如下：
从jQuery Mobile的任意一个定义主题的CSS文件中，复制其内容到自己定义的CSS文件中。
给要自定义的CSS主题一个恰当的名称并且重新命名CSS文件，注意命名必须是(a-z)英文字母，比如你是从jQuery Mobile的主题c的样式文件中复制的，则可以将主题命名为Z,则复制过来的内容中，比如要将.ui-btn-up-c改为.ui-btn-up-z,.ui-body-c改为.ui-body-z，如此类推。
改变新建立的自定义主题的颜色和CSS文件。
最后，需要在页面中，应用新定义的主题样式，如下：
　&data-role=&page&&data-theme=&z&&
6、使用自定义字体
在移动Web应用中，有的时候需要更换字体，这样的话，可以通过使用@font-face方法实现，并且性能是十分好的。具体关于@font-face的使用，请参考这篇文章。
7、创建一个没有文本只有图片的按钮
有时，可能想用一个没有文本内容仍具有按钮特性的一个按钮。如果要在按钮上隐藏文本，设置data-iconpos=&notext&，例如：
&href=&../index.html&&data-icon=&grid&&claa=&ui-btn-right&&data-iconpos=&notext&Home&
8、打开一个无需使用Ajax页面过渡的超链接
如果不需要使用Ajax打开一个页面的链接，可以设置链接的rel属性，如下：
&href=&../index.html&&data-icon=&grid&&class=&ui-btn-right&&rel=&external&Home&
9、移除项目列表中的箭头
默认情况下，jQuery Mobile框架会为每一个列表项添加一个箭头，想要禁用箭头显示，需要在想要移除列表项设置data-icon=&false&。
&data-icon=&false&&href=&contact.html&Contact&Us&&
10、设置页面的背景颜色
怎样在不修改jQuery Mobile样式下设置一个页面背景颜色的？听起来很简单，其实需要花几分钟时间才能解决。通常情况下，需要在body元素中设置背景颜色，但是用jQuery Mobile框架，需要设置在ui-page类中。
.ui-page{ &&&&&&background:#eee; &}&
【编辑推荐】
【责任编辑： TEL：（010）】
关于的更多文章
为了让移动设备也能用上jQuery，jQuery开发团队发布了jQuery移动
既然强大的Android Studio来了，有什么理由不去用呢？
作为Android开发者，最头疼是什么？相信大家会异口同
七夕，是让人听起来就觉得美好的日子，牛郎织女鹊桥相
PC互联网巨头百度、腾讯和阿里，通过在移动互联网投资
本书全面阐述Java应用安全的基本知识并介绍一种强大的结构化安全设计方法；介绍独立于厂商的安全架构；列出详细的评估核对表以及
Windows Phone专家
Android开发专家
51CTO旗下网站

我要回帖

更多关于 jquery改变背景图片 的文章

 

随机推荐