javascript实现QQ空间相册展示源码

知识点：html/css布局思维，浮动/定位详解，大企业标准，代码性能优化，js鼠标事件，DOM操作等。

源码：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="关键词一，关键词二">
<meta name="Description" content="网站描述内容">
<title>Document</title>
<style type="text/css">
{margin:0px;padding:0px;}

/css样式表达方式：属性：值; 身高：1.7m； px像素*/

Main{width:1000px;/宽/ height:640px;/高/ /background:#cc99cc;背景颜色/
margin:30px auto 0px;}
Main ul li{width:288px;height:180px; border:4px solid #fff;/粗细 风格 颜色边框/ list-style-type:none;/去掉前面的圆点/ float:left;/左浮动/ margin:10px 17px;
  box-shadow:5px 5px 10px #000; }
.gray{width:100%; height:100%;background:rgba(0,0,0,0.6); position:fixed;/固定定位/ left:0px; top:0px; display:none;/隐藏/}
.showImg{width:650px; height:406px; background:red; position:absolute;/绝对定位/
top:100px; left:400px; border:10px solid #fff; display:none;/隐藏/}
.showImg img.but_l{position:absolute; top:170px; left:-70px;}
.showImg img.but_r{position:absolute; top:170px; right:-70px;}
</style>
</head>
<body>
<div id="Main">
<ul>
<li><img src="images/s1.jpg" bigsrc="images/big1.jpg"/></li>
<li><img src="images/s2.jpg" bigsrc="images/big2.jpg"/></li>
<li><img src="images/s3.jpg" bigsrc="images/big3.jpg"/></li>
<li><img src="images/s4.jpg" bigsrc="images/big4.jpg"/></li>
<li><img src="images/s5.jpg" bigsrc="images/big5.jpg"/></li>
<li><img src="images/s6.jpg" bigsrc="images/big6.jpg"/></li>
<li><img src="images/s7.jpg" bigsrc="images/big7.jpg"/></li>
<li><img src="images/s8.jpg" bigsrc="images/big8.jpg"/></li>
<li><img src="images/s9.jpg" bigsrc="images/big9.jpg"/></li>
</ul>
</div>
<div class="gray"></div>
<div class="showImg">
<img src="images/big1.jpg" class="show_bimg"/>
<img src="images/dirl.png" class="but_l"/>
<img src="images/dirr.png" class="but_r"/>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
var _index=0;
var bImg=null;
$("#Main ul li").click(function(){
_index=$(this).index();//获取序列号
//alert(_index);
$(".gray").show();//显示
$(".showImg").show();//显示
bImg=$(this).find("img").attr("bigsrc");
//alert(bImg);
$(".showImg img.show_bimg").attr("src",bImg);
});
$(".gray").click(function(){
  $(".gray").hide();//隐藏
  $(".showImg").hide();
});
//点击右边切换按扭
$(".showImg img.but_r").click(function(){
  _index++;// _index+1;
  if(_index>8){_index=8; alert("右边到头了");}
  bImg=$("#Main ul li").eq(_index).find("img").attr("bigsrc");
  $(".showImg img.show_bimg").attr("src",bImg);
});
//点击左边切换按扭
$(".showImg img.but_l").click(function(){
  _index--; //_index-1;
  if(_index<0){_index=0;alert("左边到头了");}
  bImg=$("#Main ul li").eq(_index).find("img").attr("bigsrc");
  $(".showImg img.show_bimg").attr("src",bImg);
});
</script>
</body>
</html>

总结

以上所述是小编给大家介绍的javascript实现QQ空间相册展示源码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • 相册展示PhotoSwipe.js插件实现

    相册展示PhotoSwipe.js插件实现

    PhotoSwipe.js官网:http://photoswipe.com/ ,在这个网站上可以下载到PhotoSwipe的文件以及相关的例子. 这个组件主要是用来展示图片.相册用的,还是很实用的. 一.使用这个组件需要引入两个js文件  1 <script type="text/javascript" src="simple-inheritance.min.js"> 2 <script type="text/javascript&quo

  • javascript实现QQ空间相册展示源码

    javascript实现QQ空间相册展示源码

    知识点:html/css布局思维,浮动/定位详解,大企业标准,代码性能优化,js鼠标事件,DOM操作等. 源码: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Keywords" content="关键词一,关键词二"> <meta name="De

  • Django动态随机生成温度前端实时动态展示源码示例

    Django动态随机生成温度前端实时动态展示源码示例

    目录 随机生成温度 前端动态实时 一.django APScheduler定时任务 简介 安装 使用步骤 基础组件 二.dwebsocket 简介 安装 使用方法 属性和方法 为了模拟随机的温度显示,在models中的表中的数据 views 路由 VUE中的代码 随机生成温度 前端动态实时 一.django APScheduler定时任务 简介 APScheduler的全称是Advanced Python Scheduler. 它是一个轻量级的 Python 定时任务调度框架. APSchedu

  • JavaScript实现简单图片滚动附源码下载

    昨晚德国和葡萄牙的焦点之战你看了吗?北京时间凌晨的比赛中,C罗领衔的葡萄牙0-4德国被完灭--他是金球奖得主.欧洲金靴.欧冠冠军核心,在葡萄牙队--9张图 C罗告诉你什么叫欲哭无泪 复制代码 代码如下: <span style="font-size:14px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtm

  • JavaScript实现俄罗斯方块游戏过程分析及源码分享

    JavaScript实现俄罗斯方块游戏过程分析及源码分享

    观摩一下<编程之美>:"程序虽然很难写,却很美妙.要想把程序写好,需要写好一定的基础知识,包括编程语言.数据结构与算法.程序写得好,需要缜密的逻辑思维能力和良好的梳理基础,而且熟悉编程环境和编程工具." 学了几年的计算机,你有没有爱上编程.话说,没有尝试自己写过一个游戏,算不上热爱编程. 俄罗斯方块曾经造成的轰动与造成的经济价值可以说是游戏史上的一件大事,它看似简单但却变化无穷,令人上瘾.相信大多数同学,曾经为它痴迷得茶不思饭不想. 游戏规则 1.一个用于摆放小型正方形的平

  • javascript实现五星评价代码（源码下载）

    javascript实现五星评价代码（源码下载）

    废话不多说,先上个效果图: 查看演示                   源码下载 javascript中的代码 var spans=document.getElementsByTagName("span"); var flag=5;//这个值随便取,只要不是01234就行 var Expand=function(){ //扩展代码,暂无 }; onload=function(){ //循环载入鼠标移入事件 for(var i=0;i<spans.length;i++){ spa

  • JavaScript实现QQ聊天消息展示和评论提交功能

    QQ聊天消息显示,提交评论等实现原理,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } .bos { margin: 100px auto; width: 350px; posi

  • PHP+javascript制作带提示的验证码源码分享

    html代码: 复制代码 代码如下: <!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-equi

  • 自定义javascript验证框架示例【附源码下载】

    自定义javascript验证框架示例【附源码下载】

    本文实例讲述了自定义javascript验证框架.分享给大家供大家参考,具体如下: 看过 jquery 验证框架,在使用的时候,其实还是很晕的,很麻烦,使用的时候代码也不简洁,因此才有了弄一个自己的jquery验证框架的计划,基本原理就是对 input ,select, textarea 这三类控件做校验,在里面定义自定义属性作为检验. 另外采用js 做i18n 国际化,通过cookies 中的语言,调用不同的js 语言包, 对于自己开发项目来说,足够用了,而且,还可以灵活扩展.个人用应该不错.

  • Javascript Web Slider 焦点图示例源码

    HTML代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <title></title> <style> *{padding:0;margin:0} ul{list-style:none} .slider-focus{width:670px;height:240px;overflow:hidden;position:relative;margin:100px auto} .slider-focu

  • 基于jQuery实现交互体验社会化分享代码附源码下载

    基于jQuery实现交互体验社会化分享代码附源码下载

    先给大家展示下效果图,看看是不是亲想要的效果,如果满足您的要求请继续往下阅读. 效果展示       源码下载 基于jQuery交互体验社会化分享代码.这是一款鼠标点击分享按钮向右滑出腾讯微博,新浪微博,QQ空间,豆瓣,微信,二维码分享等分享平台. html代码: <div style="text-align:center;font:normal 14px/24px 'MicroSoft YaHei';clear:both;width:160px;margin:0 auto;"&

随机推荐