如何在html页面上设置跨度图像是动态的 [英] how to set span image on html page is dynamic
本文介绍了如何在html页面上设置跨度图像是动态的的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想根据调整窗口大小的时间来设置跨度图像.当我调整窗口的大小时，不显示窗口跨度图像(为什么?)实际上我正在使用链接( )并在其中使用跨度.
我的html代码是..
I want to set my span image according to when window is resize.When I resize the window span image is not shown.(Why?)Actually I am using link()and span in it.
My html code is..
<!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">
<head>
<meta http-equiv="Content-Type" content="text/xhtml;charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=9"/>
<title>ABC:Main Page</title>
<link href="tabs.css" rel="stylesheet" type="text/css"/>
<link href="doxygen.css" rel="stylesheet" type="text/css" />
<style>
a:hover {
color: #F30;
}
h1 {
font: bold 150%/120% Arial, Helvetica, sans-serif;
text-transform: uppercase;
margin: 0 0 10px;
color: #0000;
}
a {
color: #69C;
text-decoration: none;
}
p {
margin: 0 0 0px;
}
em {
font: italic 100% "Times New Roman", Times, serif;
}
.credits {
border-bottom: solid 1px #eee;
padding-bottom: 10px;
margin: 0 0 30px;
}
#pagewrap {
margin: 0 auto;
width: 1345px;
padding-left: 150px;
position: relative;
}
/*
Back to top button
*/
#back-top {
position: fixed;
bottom: 30px;
margin-left: -100px;
}
#back-top a {
width: 40px;
display: block;
text-align: center;
font: 11px/100% Arial, Helvetica, sans-serif;
text-transform: uppercase;
text-decoration: none;
color: #bbb;
/* background color transition */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}
#back-top a:hover {
color: #000;
}
/* home icon (span tag) */
#back-top span {
width: 40px;
height: 40px;
display: block;
margin-bottom: 5px;
background: #ddd url(up-arrow.png) no-repeat center center;
/* rounded corners */
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
/* background color transition */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}
#back-top a:hover span {
background-color: #777;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
// hide #back-top first
$("#back-top").hide();
// fade in #back-top
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});
// scroll body to 0px on click
$('#back-top a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});
});
</script>
</head>
<body id="top">
<div id="pagewrap">
<p id="back-top">
<a href="#top" style="removed: relative; removed 1230px;"><span></span>Back to top</a>
</p></div>
<div id="top"><!-- do not remove this div! -->
<div id="titlearea">
<table cellspacing="0" cellpadding="0">
<tbody>
<tr style="height: 56px;">
<td style="padding-removed 0.5em;">
<div id="projectname">ABC
</div>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html></div>
推荐答案
(文档).ready(功能(){ // 隐藏#back-top first
(document).ready(function(){ // hide #back-top first
(" ).hide(); // 在#back-top
("#back-top").hide(); // fade in #back-top
(功能(){
这篇关于如何在html页面上设置跨度图像是动态的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
