Hus*_*lue 2 html javascript css jquery jquery-animate
在我的网页上,我使用HTML选择器使用CSS设置背景图像.背景图像基本上类似于蓝图示意图背景.(即蓝色背景上的白色网格.)
CSS:
html
{
display: block;
position: absolute;
background: url(../assets/background.jpg) repeat;
color: #FFF;
margin: 0px;
padding: 0px;
border: none;
}
当最终用户点击按钮时,我希望上面提到的背景图像从屏幕向右上方向滑动,使页面看起来像是在大蓝图原理图上的不同区域.我正在使用jQuery,但我无法弄清楚如何从CSS访问背景图像.
JavaScript的:
$("#button").click(function()
{
// Animate the webpage's background, causing it to move
$("html /* Not sure what goes here */").animate({left: "-=10000px", top: "-=5000px"}, 1250);
});
我尝试在主体中使用与最终用户屏幕的宽度和高度相匹配的div,但是在蓝图原理图像周围出现了一个粗的白色边框,所以我想我必须坚持通过CSS添加图像, HTML选择器.
我如何达到我想要的效果？
工作小提琴
不animate完整的HTML,因为它会以动画形式在整个网站,所以我创建了一个div与background你想要的,而不是设置background的HTML.
HTML
<body>
<div id="div1"></div>
<button id="button">Click Me</button>
</body>
CSS
#div1 {
position: absolute;
background: url(http://www.austintexas.gov/sites/default/files/files/Animal_Services/cute-kitten-playing.jpg) repeat;
top:0; left:0; height:100%; width:100%;
/* I want *only* this background image to move on the button click */
color: #FFF;
margin: 0px;
padding: 0px;
border: none;
z-index:-1;
}
jQuery的
$("#button").click(function () {
// Animate the webpage's background, causing it to move
$("#div1").animate({
left: "-=10000px",
top: "-=5000px"
}, 1250);
});
| 归档时间： |
|
| 查看次数： |
340 次 |
| 最近记录： |