鼠标移动在元素上，然后背景图片慢慢从左至右拉出应该怎么去做？求指教！
有多种方法都可以实现。我随便写了一个简单的demo，只写了一个元素。其实道理是一样的。以下是代码,注意要导入jquery文件！
无标题文档
*,body{margin:0 border:0 padding:0}
.zhengti{width:200 height:200 margin:0 background-color:#CCC}
.anniu{width:200 height:40 position: z-index:10; text-align: line-height:40 color:#000;
font-weight:}
有多种方法都可以实现。我随便写了一个简单的demo，只写了一个元素。其实道理是一样的。以下是代码,注意要导入jquery文件！
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
&html xmlns=&http://www.w3.org/1999/xhtml&&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&title&无标题文档&/title&
&script type=&text/javascript& src=&file:///E|/IIS/jquery-1.4.4.min.js&&&/script&
&style type=&text/css&&
*,body{margin:0 border:0 padding:0}
.zhengti{width:200 height:200 margin:0 background-color:#CCC}
.anniu{width:200 height:40 position: z-index:10; text-align: line-height:40 color:#000;&&font-weight:}
.tiao{width:3 height:40 background-color:#F00; position: z-index:5;}
&div class=&zhengti&&
& && && &&div class=&anniu& id=&btn&&第一项&/div&
& && && &&div class=&tiao& id=&tiao&&&/div&
&script type=&text/javascript&&
& & $(&#btn&).hover(function(){
& & & & & & & & if(!$(&#tiao&).is(&:animated&)){
& & & & & & & & & & & &&&$(&#btn&).css(&color&,&#FC0&);
& & & & & & & & & & & &&&$(&#tiao&).animate({width:'200px'},500)
& & & & & & & & & & & & }
& & & & & & & & }, function(){
& & & & & & & & & & & & if(!$(&#tiao&).is(&:animated&)){
& & & & & & & & & & & &&&$(&#tiao&).animate({width:'3px'},500,function(){
& & & & & & & & & & & & & & & &&&$(&#btn&).css(&color&,&#000&);
& & & & & & & & & & & & & & & &&&})
& & & & & & & & & & & & }
& & & & & & & & & & & &
& & & & & & & & & & & & })
最好把需求再详细的表达一下。该元素开始没有背景，鼠标移动上以后就有背景了？还是移动到该元素上。该元素拉出来，同时该元素的背景也拉出来？不太明白……
oceanjauh 发表于
最好把需求再详细的表达一下。该元素开始没有背景，鼠标移动上以后就有背景了？还是移动到该元素上。该元素 ...
首先先谢谢你回复，这个效果类似于腾讯游戏官网里的效果，元素的文本一直在显示，背景图被隐藏，只显示1像素在左边，当鼠标移上去之后背景图慢慢从左至右拉出来。&&&&这是腾讯官网的链接
我做这类东西的时候，一般上面用个遮罩 然后定位，宽度一开始就一点，然后当鼠标移动上去的时候，变化的是这个遮罩，至于运动，实际上是变化的遮罩的宽度，最后至于运动的效果，无非开个定时器然后变化宽度。
知道你的的意思了，你如果要用背景图的话也简单。控制css的background-position就可以了$(this).animate({&backgroundPosition&,200},1000);复制代码也可以不用图片，更好的方法……
假设你的文字放在一个span中，在span前面加上一个div块
&div class=&span-bg&&&/div&
&span class = &nav-tag&&腾讯哒哒哒&span&
样式就是：
&&height:36
&&margin-bottom:-36px/*这里的bottom随便你，不会影响到其他元素就行，不过height属性要跟上*/
最后用$(&.nav-tag&).mouseover(function(){
&&$(this).parent().find(&.span-bg&).stop().animate({width:&100%&},1000);
}).mouseout(function(){
&&$(this).parent().find(&.span-bg&).stop().animate({width:&1%&},1000);
});复制代码思路你看得懂就好，我也没有测试，但是逻辑应该没有错了
老黑 发表于
我做这类东西的时候，一般上面用个遮罩 然后定位，宽度一开始就一点，然后当鼠标移动上去的时候，变化的是这 ...
我这样想过，我实践之后发现会把文本遮住，除非文本是随着背景一起出来的，有没有其他好的办法呢？
oceanjauh 发表于
有多种方法都可以实现。我随便写了一个简单的demo，只写了一个元素。其实道理是一样的。以下是代码,注意要导 ...
恩恩 看到了&&太谢谢你了！
呵呵。不客气，问题解决了，悬赏的银子快付吧~
爱点击互动（北京）广告有限公司薪金：面议职位：Web前端开发工程师
北京六智信息技术有限公司薪金：面议职位：网页制作/web前端工程师
北京西瓜藤网络科技有限公司薪金：面议职位：Web开发工程师共有 4634 人关注过本帖
标题：[求助]关于网页的背景图片设置？
等　级：新手上路
帖　子：19
&&问题点数：0&&回复次数：5&&&
[求助]关于网页的背景图片设置？
在body里写入bgcolor就是背景颜色我想用一图片显示，它可以随我们把网页的放大缩小而自动改变大小，（是在表格里插入一图片）应该怎么写代码呢？本人出学ASP。NET 谢谢大家回答！
搜索更多相关主题的帖子:
等　级：业余侠客
帖　子：329
专家分：277
“网页的放大缩小”，，网页怎么放大缩小？你指的是不是浏览器的放大缩小？还有“（是在表格里插入一图片）”，到底是表格的图片背景呢还是网页的图片背景？或者说你再讲清楚点了。。
不想停留。。。
等　级：新手上路
帖　子：19
我想显现网页的背景图在asp.net中插入图片不是需要表格的吗？随浏览器的大小变化保持比例
等　级：业余侠客
帖　子：329
专家分：277
网页的背景图片：&head&&style&&!--
background-image: url(图片路径);
background-attachment://将图片与背景锁定，即不滚动}--&&/style&&/head&其它的保持比例的，，，就不是很清楚了。。。
不想停留。。。
等　级：新手上路
帖　子：19
来　自：水星
等　级：新手上路
帖　子：853
网页的背景图片在页面的属性中就可以实现，何必这么麻烦呢？
Face up to life with smiles no matter what happens
版权所有，并保留所有权利。
Powered by , Processed in 0.020411 second(s), 9 queries.
Copyright&, BCCN.NET, All Rights Reserved当前位置：>>>
全屏店招仅淘宝专业版旺铺使用。新开的店铺或者信誉1钻以下的店铺，均可以免费使用淘宝专业版旺铺。
所以，使用我们分享的淘宝全屏店招代码前，请保证你的店铺为旺铺专业版。
需要用到的软件：photoshop
******************************************************************************************************************************* copyright taoqao
所谓图片篇，就是全屏店招是一整张图片的，具体效果如下：
好的，我们先来分解一下它的结构： 内容来自taoqao
& 本文来自淘巧网
是的，拆分之后，我们看到，它依然由三部分组成：950像素蓝色普通店招部分&950像素红色的店铺导航部分&绿色页头背景部分。
******************************************************************************************************************************* 内容来自taoqao
& 内容来自taoqao
好的，理解完结构，我们接下来开始制作：
①打开PS，新建一个像素的文件：
下面我们先用辅助线划分上面结构图，将店招、导航、页头背景的区域划分开来：
②找到图片中点，双击&背景&图层，解锁图层并选中它，同时按键盘上ctrl T：将图层自由变换，鼠标靠软件边缘不要放，往图像当中移动，拉出中线辅助线。
这样就确定了中心线，接着我们确定950像素的位置： copyright taoqao
③用&选择工具&的&固定大小&功能，设定&宽度475像素&，&高度150像素&，沿着中心线，往两侧选择，并拉辅助线。
没错，辅助线中间的蓝色区域，就是950像素的店招和导航部分，剩下的绿色区域，就是页头背景部分。 内容来自taoqao
接下来先定下导航的部分，导航一般30像素，如果够买了模板，请咨询客服使用模板的导航高度。 内容来自taoqao
& 淘巧好，好淘巧
④新建一个图层并选中，还是用&选择工具&的&固定大小&功能，设置&宽度1920像素&，&高度30像素&，在底部开始往上选择：
& 内容来自taoqao
注意：导航的颜色要与装修模板的导航颜色一致，色差会导致导航当中像断掉一样的错觉。
好了，剩下的白色区域，我们可以把喜欢的元素拉上去，设计步骤不在教程范围内，这里不介绍。
需要注意的是，设计的时候要记得950像素区域的位置，这个位置，大约就是所有显示器可见范围，重点装饰，两侧因为非宽屏显示器会不显示，所以重要内容请不要放在950像素以外。 内容来自taoqao
& copyright taoqao
全部做好：
& 内容来自taoqao
******************************************************************************************************************************* 内容来自taoqao
& 淘巧好，好淘巧
接下来我们开始最关键的步骤：分开保存店招部分和页头背景部分，我们先保存页头背景部分： 内容来自taoqao
& 淘巧好，好淘巧
这里解释一下，有的亲会教用切片工具，小藕觉得切片工具操作起来比较繁琐，容易混淆，我们今天教一个简单的： copyright taoqao
& 本文来自淘巧网
把图像元素理解为整个背景图，而950像素的普通店招是一张只包含店铺名称的透明背景图片，它们叠加在一起，就会自动变成全屏的不会出现不整齐或者错位的全屏店招。 copyright taoqao
& 淘巧好，好淘巧
方法是这样： copyright taoqao
& copyright taoqao
⑤将店铺名称等非图像元素的图层隐藏（隐藏方法是：点击图片前面的小眼睛，没有小眼睛即隐藏图层）：
将图片保存下来，命名：bg。
& 本文来自淘巧网
接着我们保存950店招部分：需要先裁剪，去掉导航部分。 内容来自taoqao
& copyright taoqao
⑥用&选择工具&的&固定大小&，设置&宽度950像素&，&高度120像素&，从最左侧的辅助线开始选择，然后&裁剪&选择区域。
copyright taoqao
⑦隐藏所有非LOGO元素，变成这样：（灰色格子代表透明） 本文来自淘巧网
& 内容来自taoqao
淘巧好，好淘巧
& 淘巧好，好淘巧
然后存储为透明背景：PNG格式的图片： 内容来自taoqao
& 内容来自taoqao
内容来自taoqao
& copyright taoqao
好了，photoshop部分我们完成了，接下去只需要分开上传页头背景和店招，就可以完成。 淘巧好，好淘巧
& 淘巧好，好淘巧
******************************************************************************************************************************* 本文来自淘巧网
& 内容来自taoqao
先上传背景： copyright taoqao
& copyright taoqao
⑧进入装修后台，设置&页头背景&： 本文来自淘巧网
& 内容来自taoqao
& copyright taoqao
背景设置好之后，保存，接下来设置店铺招牌。 本文来自淘巧网
& 本文来自淘巧网
⑨将透明背景的店招图片上传至图片空间，进入装修后台，编辑选择： copyright taoqao
& 淘巧好，好淘巧
淘巧好，好淘巧
好了，发布看一下吧，是不是很漂亮？
本文来自淘巧网
文章关键词：
本网站素材资源仅供个人学习与参考，请勿用于商业用途，后果由使用者自己承担！！！
大家都在查看
这些是最新的&& 查看话题
求一张高清的可以做桌面背景的中国地形图！
想补一下地理学的基本知识，求一张可以做桌面背景的中国地形图！灰常的感谢！
这个恐怕会比较困难才能找到。 .cn/GB/4585240.html 楼上推荐的分辨率应该还可以
建议你去看下 : Originally posted by 天蝎志 at
.cn/GB/4585240.html 网页无法显示，怎么回事啊！ 这个链接：https://219.238.166.215/mcp/index.asp : Originally posted by 天蝎志 at
这个链接：https://219.238.166.215/mcp/index.asp 这个非常不错！ /i?ct=&z=0&tn=baiduimagedetail&cl=2&cm=1&sc=0&lm=-1&fr=ala2&pn=2&rn=1&di=&ln=1122&word=%D6%D0%B9%FA%B5%D8%D0%CE%CD%BC#pn2&-1&di&objURLhttp%3A%2F%%2F03%2F35%2F42%2F42bOOOPIC30.jpg&fromURLhttp%3A%2F%%2Fpic%2FF&W650&H467&T&TPjpg bucuol.... 与其找图，不如自己画吧，找一下中国省界经纬度数据，绘制一张，想怎么变就怎么变}