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


Posted in Javascript onDecember 12, 2017

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空间相册展示源码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS代码格式化和语法着色V2
Oct 14 Javascript
js类中获取外部函数名的方法与代码
Sep 12 Javascript
JavaScript中消除闭包的一般方法介绍
Mar 16 Javascript
JavaScript中的acos()方法使用详解
Jun 14 Javascript
javascript页面倒计时实例
Jul 25 Javascript
本地Bootstrap文件字体图标引入却无法显示问题的解决方法
Apr 18 Javascript
BootStrap Tooltip插件源码解析
Dec 27 Javascript
使用jQuery的ajax方法向服务器发出get和post请求的方法
Jan 13 Javascript
javascript作用域链与执行环境详解
Mar 25 Javascript
react 父组件与子组件之间的值传递的方法
Sep 14 Javascript
mock.js实现模拟生成假数据功能示例
Jan 15 Javascript
微信小程序基于canvas渐变实现的彩虹效果示例
May 03 Javascript
自定义PC微信扫码登录样式写法
Dec 12 #Javascript
基于模板引擎Jade的应用(详解)
Dec 12 #Javascript
jquery获取transform里的值实现方法
Dec 12 #jQuery
JS排序算法之希尔排序与快速排序实现方法
Dec 12 #Javascript
将Sublime Text 3 添加到右键中的简单方法
Dec 12 #Javascript
详解vue渲染函数render的使用
Dec 12 #Javascript
谈谈vue中mixin的一点理解
Dec 12 #Javascript
You might like
PHP也可以?成Shell Script
2006/10/09 PHP
PHP date()函数警告: It is not safe to rely on the system解决方法
2014/08/20 PHP
php中文验证码实现方法
2015/06/18 PHP
php中session定期自动清理的方法
2015/11/12 PHP
PHP入门教程之操作符与控制结构流程详解
2016/09/09 PHP
WEB 浏览器兼容 推荐收藏
2010/05/14 Javascript
父子窗体间传递JSON格式的数据的代码
2010/12/25 Javascript
javascript学习笔记(三)显示当时时间的代码
2011/04/08 Javascript
Javascript倒计时页面跳转实例小结
2013/09/11 Javascript
简介JavaScript中toUpperCase()方法的使用
2015/06/06 Javascript
JavaScript必知必会(六) delete in instanceof
2016/06/08 Javascript
JS调用某段SQL语句的方法
2016/10/20 Javascript
微信小程序开发animation心跳动画效果
2017/08/16 Javascript
node+express+ejs使用模版引擎做的一个示例demo
2017/09/18 Javascript
webpack4之SplitChunksPlugin使用指南
2018/06/12 Javascript
Vue+Mock.js模拟登录和表格的增删改查功能
2018/07/26 Javascript
vue实现修改图片后实时更新
2019/11/14 Javascript
js实现Element中input组件的部分功能并封装成组件(实例代码)
2021/03/02 Javascript
[59:30]VG vs LGD 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.22
2019/09/05 DOTA
使用Python编写基于DHT协议的BT资源爬虫
2016/03/19 Python
在Django中进行用户注册和邮箱验证的方法
2016/05/09 Python
利用Python实现图书超期提醒
2016/08/02 Python
Python元组及文件核心对象类型详解
2018/02/11 Python
浅谈python下tiff图像的读取和保存方法
2018/12/04 Python
python字典一键多值实例代码分享
2019/06/14 Python
Python for循环搭配else常见问题解决
2020/02/11 Python
详解Python中Pyyaml模块的使用
2020/10/08 Python
python抢购软件/插件/脚本附完整源码
2021/03/04 Python
利用CSS3的线性渐变linear-gradient制作边框的示例
2016/06/02 HTML / CSS
巴黎欧莱雅法国官网:L’Oreal Paris
2019/04/30 全球购物
总账会计岗位职责
2014/03/13 职场文书
生产助理岗位职责
2014/06/18 职场文书
法学专业毕业实习自我鉴定2014
2014/09/27 职场文书
旅行社计调工作总结
2015/08/12 职场文书
2016年学校禁毒宣传活动工作总结
2016/04/05 职场文书
pandas提升计算效率的一些方法汇总
2021/05/30 Python