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 相关文章推荐
jquery对元素拖动排序示例
Jan 16 Javascript
三个js循环的关键字示例(for与while)
Feb 16 Javascript
js基于cookie方式记住返回页面用法示例
May 27 Javascript
Js中async/await的执行顺序详解
Sep 22 Javascript
Three.js利用dat.GUI如何简化试验流程详解
Sep 26 Javascript
mockjs,json-server一起搭建前端通用的数据模拟框架教程
Dec 18 Javascript
使用ajax的post同步执行(实现方法)
Dec 21 Javascript
基于JavaScript实现抽奖系统
Jan 16 Javascript
angular的输入和输出的使用方法
Sep 22 Javascript
微信小程序ibeacon三点定位详解
Oct 31 Javascript
vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】
Nov 08 Javascript
原生javascript制作的拼图游戏实现方法详解
Feb 23 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中的函数嵌套层数限制分析
2011/06/13 PHP
PHP截断标题且兼容utf8和gb2312编码
2013/09/22 PHP
ThinkPHP中RBAC类的四种用法分析
2014/11/24 PHP
php中array_column函数简单实现方法
2016/07/11 PHP
php mysql获取表字段名称和字段信息的三种方法
2016/11/13 PHP
PHP中-&gt;和=&gt;的含义及使用示例解析
2020/08/06 PHP
运算符&amp;&amp;的三个不同层次
2013/04/07 Javascript
21个值得收藏的Javascript技巧
2014/02/04 Javascript
jQuery简单实现网页选项卡特效
2014/11/24 Javascript
jQuery团购倒计时特效实现方法
2015/05/07 Javascript
JavaScript仿静态分页实现方法
2015/08/04 Javascript
javascript常见数字进制转换实例分析
2016/04/21 Javascript
JS正则RegExp.test()使用注意事项(不具有重复性)
2016/12/28 Javascript
JS正则匹配中文的方法示例
2017/01/06 Javascript
jquery实现一个全局计时器(商城可用)
2017/06/30 jQuery
Vue.js最佳实践(五招助你成为vuejs大师)
2018/05/04 Javascript
VUE v-for循环中每个item节点动态绑定不同函数的实例
2018/09/26 Javascript
vue 父组件中调用子组件函数的方法
2019/06/06 Javascript
python简单实例训练(21~30)
2017/11/15 Python
利用python将xml文件解析成html文件的实现方法
2017/12/22 Python
Python解决走迷宫问题算法示例
2018/07/27 Python
python中的print()输出
2019/04/12 Python
python 中Arduino串口传输数据到电脑并保存至excel表格
2019/10/14 Python
python 导入数据及作图的实现
2019/12/03 Python
Python如何将图像音视频等资源文件隐藏在代码中(小技巧)
2020/02/16 Python
如何基于windows实现python定时爬虫
2020/05/01 Python
生物有机护肤品:Aurelia Probiotic Skincare
2018/01/31 全球购物
荷兰超市:DEEN
2018/03/14 全球购物
Jowissa官方网站:瑞士制造的手表,优雅简约的设计
2020/07/29 全球购物
中级会计职业生涯规划范文
2014/01/16 职场文书
小学班主任评语大全
2014/04/23 职场文书
如何撰写一封出色的求职信
2014/04/27 职场文书
初中优秀班集体申报材料
2014/05/01 职场文书
办理护照工作证明
2014/10/10 职场文书
从零开始在Centos7上部署SpringBoot项目
2022/04/07 Servers
科学家测试在太空中培育人造肉,用于未来太空旅行
2022/04/29 数码科技