您的位置：首页 > Web前端 > JQuery

类似QQ的新闻图展的JQuery效果

2010-11-03 14:30 323 查看
就是下面这个效果。


主代码如下：

<mce:script src="jquery-1.4.3.js" mce_src="jquery-1.4.3.js"></mce:script>
<mce:script src="jquery.lazyload.js" mce_src="jquery.lazyload.js"></mce:script>
<mce:script language="javascript"><!--
$(document).ready(function(){ 
$('#left').text($('#scroll_list > li >a:first').attr("text"));
$('#view_pic').attr("src",$('#scroll_list > li >a:first').attr("href"));
$('#scroll_list > li >a:first').addClass('a_click');
$('li').click(function(event){
	  if(this.id=='up')
	  {
	     $("#right_scroll").animate({scrollTop: '-=430px'}, "slow");  
	  }
	  if(this.id=='down')
	  {
	     $("#right_scroll").animate({scrollTop: '+=430px'}, "slow"); 
	  }
	});
$('#scroll_list > li >a').click(function(event){
	  var url;
	  var txt;
	  url=this.href;
	  txt=this.text;
	  $('a').removeClass('a_click');
	  $(this).addClass('a_click');	
	  $("#loading").show();
      $("#view_pic").lazyload({ //加载国片部分  
placeholder : url,  
container: $("#left")   
}); $("#loading").hide(); 
	  $("#left").text(txt); 
	   return false;
	});
});
// --></mce:script>
<link href="viewpic.css" mce_href="viewpic.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div>
<ul><li>
<div id="left"></div>
</li></ul>

<ul><li>
<div id="center"><div id="loading"><img src="loading.gif" mce_src="loading.gif" width="89" height="90" /></div><center><img id="view_pic" src="" /></center></div>
</li></ul>

<ul><li>
<div id="right">
<ul><li id="up"><a href="#" mce_href="#" title="上移"><img src="up1.png" mce_src="up1.png" width="100" height="30" /></a></li></ul>
  <ul><li>
   <div id="right_scroll">
    <ul id="scroll_list">
    <li><a href="img/01.jpg" mce_href="img/01.jpg" text="图片1说明:这是第一张图片的说明"><img src="img/frame-01.jpg" mce_src="img/frame-01.jpg" width="100" height="100"  /></a></li>
    <li><a href="img/02.jpg" mce_href="img/02.jpg" text="图片2说明:这种效果是不是还可以？"><img src="img/frame-02.jpg" mce_src="img/frame-02.jpg" width="100" height="100" /></a></li>
    <li><a href="img/03.jpg" mce_href="img/03.jpg" text="图片3说明:"><img src="img/frame-03.jpg" mce_src="img/frame-03.jpg" width="100" height="100" /></a></li>
    <li><a href="img/04.jpg" mce_href="img/04.jpg" text="图片4说明:"><img src="img/frame-04.jpg" mce_src="img/frame-04.jpg" width="100" height="100" /></a></li>
    <li><a href="img/05.jpg" mce_href="img/05.jpg" text="图片5说明:"><img src="img/frame-05.jpg" mce_src="img/frame-05.jpg" width="100" height="100" /></a></li>
    <li><a href="img/06.jpg" mce_href="img/06.jpg" text="图片6说明:"><img src="img/frame-06.jpg" mce_src="img/frame-06.jpg" width="100" height="100" /></a></li>
    <li><a href="img/07.jpg" mce_href="img/07.jpg" text="图片7说明:"><img src="img/frame-07.jpg" mce_src="img/frame-07.jpg" width="100" height="100" /></a></li>
    <li><a href="img/08.jpg" mce_href="img/08.jpg" text="图片8说明:"><img src="img/frame-08.jpg" mce_src="img/frame-08.jpg" width="100" height="100" /></a></li>
    </ul>
   </div>
  </li></ul>
<ul><li id="down"><a href="#" mce_href="#" title="下移"><img src="down1.png" mce_src="down1.png" width="100" height="30" /></a></li></ul>
</div>
</li></ul>

</div>
</body>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航