jquery左右按钮控制图片文字切换特效代码下载


jquery左右按钮控制图片文字切换特效代码下载
jquery左右按钮控制图片文字切换特效代码下载以及左右按钮控制、图片文字切换等js/jquery网页特效代码下载。

1. 引入JS

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

2. HTML代码

<script type="text/javascript">
// 滚屏
$(document).ready(function(){
	$('#roll_top').click(function(){
		$('html,body').animate({scrollTop: '0px'}, 800);
	}); 
	$('#ct').click(function(){
		$('html,body').animate({scrollTop:$('#comments').offset().top}, 800);
	});
	$('#fall').click(function(){
		$('html,body').animate({scrollTop:$('#footer').offset().top}, 800);
	});
});
</script>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
.container{width:980px;margin:0 auto;background:url(images/1232112.jpg) no-repeat;}
/** 翻屏 **/
*html,*html body{background-image:url(about:blank);background-attachment:fixed;}
*html #roll{_margin-right:-224px;_position:absolute;_margin-top:180px;_top:expression(eval(document.documentElement.scrollTop));}
#roll{display:block;width:15px;margin-right:-263px;position:fixed;right:50%;top:33%;}
#roll div{background:url(images/roll.png) no-repeat;}
#roll div#roll_top,#roll div#fall{position:relative;cursor:pointer;height:93px;width:11px;}
#roll div#ct{position:relative;cursor:pointer;height:53px;width:11px;}
#roll div#roll_top{background-position:0 0;}
#roll div#fall{background-position:0 -146px;}
#roll div#ct{background-position:0 -93px;}
</style>
<div class="container">
	<div id="header" style="height:1330px;"></div>
	<div id="comments" style="height:625px;"></div>
	<div id="footer" style="height:320px;"></div>
</div>
<div id="roll">
	<div title="回到顶部" id="roll_top"></div>
	<div title="我要留言" id="ct"></div>
	<div title="转到底部" id="fall"></div>
</div><!--roll end-->

相关推荐

发表评论

相关文章