网站首页 手机版
 注册 登录
您现在的位置: 畅无忧设计 >> 网页特效 >> 背景图像 >> 正文
最新文章
· 带文字说明的js幻灯片代码
· 浏览器全屏浏览图片集
· 创意中国flash+xml焦点图代码
· 仿QQ商城焦点图jquery幻灯特效
· 带缓冲效果的图片幻灯片
· css和jquery配合完成-ipad向左向右拖
· 图片自动按比例缩小代码(防止页面被
· 仿QQ新闻图片浏览效果
· 一个横向滑动的图片切换容器代码
· 鼠标移入/移出改变图片透明度
热门文章
 图片上的左右箭头切换上一张下一张
 带缩略图和左右箭头自动切换的图片
 产品展示专用的jQuery图片幻灯+缩略
 Flash+XML前后按钮的超漂亮图片切换
 图片左右滚动,带有左右方向控制
 Jquery幻灯片/焦点图插件KinSlides
 JS 图片左右滚动,图片控制左右滚动
 可控制左右滚动的无缝图片滚动特效
 可控制图片放大缩小还原移动效果的
 非常漂亮的JS带缩略图的幻灯图片切
相关文章
没有相关文章
仿QQ新闻图片浏览效果
来源:ITeye 更新时间:2012/7/18 9:58:22 阅读次数: 我要投稿
☉预览 ↓下载 #复制 +收藏
特效代码:
<!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 content="text/html; charset=gb2312" http-equiv="Content-Type">
<title>==</title>

 <link href="css/hdPic_new_v1.0.2.css" rel="stylesheet" type="text/css" media="screen"/>
 <script src="hd_min_v1.0.0.js" type="text/javascript" ></script>
</head>
<body >
<div id="Cnt-Main-Article-QQ">
 
  <div id="photo-warp" style="background:url(images/ajax-loader.gif) no-repeat center center">
    <div class="photo-warp-inner" id="photo-warp-inner" style="visibility:hidden;">
      <div class="mainArea" id="mainArea">
        <div id="preArrow" title="上一张""></div>
        <div id="nextArrow" title="下一张""></div>
        <div id="gotolast"></div>
        <div id="gotolast_inner">
          <p>已经浏览到最后一张,您可以</p>
          <a href="#" id="rePlay">重新浏览</a><a href="#" id="urlgoto">网站首页</a></div>
        <a href="javascript:void(0);" id="bigHref"><img src="images/ajax-loader.gif" id="Display" style="cursor:pointer;margin:0 auto;visibility:hidden;" title="点击浏览下一张" onerr="../images/ajax-loader.gif"/></a>
        <div id="loading" style="display:none"></div>
        <div class="picTips picTips_png" id="picTips" style="display:none">
          <div class="titleArea" id="titleArea"></div>
        </div>
        <div href="javascript:void(0);" class="buttonArea" id="buttonArea" title="隐藏图片注释">隐藏</div>
        <div class="openTips" style="display:none" id="openTips" title="打开图片注释">查看图注</div>
      </div>
      <div class="blank"></div>
      <div class="photoList-wrap"> <a href="javascript:void(0)" class="photo-Up"  id="Up"  onfocus='this.blur()' title="向前"></a>
        <div class="photo-List" id="photo-List">
          <ul id="smallPhoto">
          </ul>
          <div id="noDiv"></div>
        </div>
        <a href="javascript:void(0)" class="photo-Down" id="Down"  onfocus='this.blur()' title = "向后"></a></div>
      <div id="scrollbar"> <a href="javascript:void(0)" id="scrollbar-in" title="拖动工具条以快速查看图片"></a></div>
    </div>
  </div>
  <div id="flashCff"></div>
  <div id="contTxt"></div>
  <div id="PGViframe"></div>
  <script> 
//JS版本
var GroupjsUrl = "hd_min_v1.0.0.js";
</script> 
 
  <script>
var isLoadData = false;
var photoJson = [{showtit:'9月25日1时12分,包机启程回国。',showtxt:'',smallpic:'http://img1.gtimg.com/1/101/10185/1018563_200x200_0.jpg',bigpic:'http://img1.gtimg.com/1/101/10185/1018563_1200x1000_0.jpg'},{showtit:'中国渔船船长詹其雄乘坐中国政府包机启程回国。',showtxt:'',smallpic:'http://img1.gtimg.com/1/101/10185/1018564_200x200_0.jpg','bigpic':'http://img1.gtimg.com/1/101/10185/1018564_1200x1000_0.jpg'},{showtit:'中国渔船船长詹其雄登上中国政府包机',showtxt:'',smallpic:'http://img1.gtimg.com/1/101/10185/1018565_200x200_0.jpg','bigpic':'http://img1.gtimg.com/1/101/10185/1018565_1200x1000_0.jpg'},{showtit:'詹其雄登上中国政府包机,启程回国',showtxt:'',smallpic:'http://img1.gtimg.com/1/101/10185/1018566_200x200_0.jpg','bigpic':'http://img1.gtimg.com/1/101/10185/1018566_1200x1000_0.jpg'},{showtit:'9月25日,詹其雄(前右)与前来迎接的妻儿团聚。',showtxt:'',smallpic:'http://img1.gtimg.com/1/101/10185/1018567_200x200_0.jpg','bigpic':'http://img1.gtimg.com/1/101/10185/1018567_550x550_0.jpg'},{showtit:'被日方非法抓扣的中国渔船船长詹其雄(前)乘中国政府包机安全返抵福州。',showtxt:'',smallpic:'http://img1.gtimg.com/1/101/10185/1018568_200x200_0.jpg',bigpic:'http://img1.gtimg.com/1/101/10185/1018568_550x550_0.jpg'}];
isLoadData = true;
</script> 
  <script>
function GroupLoadJs(file,callback) {
    var head = document.getElementsByTagName('head')[0];
    var js = document.createElement('script');
    js.setAttribute('type','text/javascript');
    js.setAttribute('src',file);
    head.appendChild(js);
    js.onload = js.onreadystatechange = function() {
        if (js.readyState && js.readyState != 'loaded' && js.readyState != 'complete') return;
        js.onreadystatechange = js.onload = null;
        if (callback) callback();
    }
    return false;
}
GroupLoadJs(GroupjsUrl,function(){
  if(isLoadData){
  picShow.Picsite="";
  picShow.lastUrl="/";
                  picShow.defatLink = "/";
                  picShow.SiteName = "news";
  picShow.Loader();
  picShow.$("photo-warp-inner").style.visibility = "visible";
  }
})
window.onload = function(){
  picShow.setTit();
}</script> 
</div>
</body>
</html>

☉预览 ↓下载 #复制 +收藏
特效说明:

仿QQ新闻图片浏览效果

  • 上一篇文章:
  • 下一篇文章:
  • 关于我们 - 联系我们 - 广告服务 - 在线投稿 - 友情链接 - 网站地图 - 版权声明
    CopyRight 2008-2010, CWYDESIGN.COM - 畅无忧设计, Inc. All Rights Reserved
    滇ICP备09005765号