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 相关文章推荐
javascript 最常用的10个自定义函数[推荐]
Dec 26 Javascript
在chrome浏览器中,防止input[text]和textarea在聚焦时出现黄色边框的解决方法
May 24 Javascript
多种方法实现JS动态添加事件
Nov 01 Javascript
JS实现div居中示例
Apr 17 Javascript
js获取checkbox复选框选中的选项实例
Aug 24 Javascript
jQuery原型属性和原型方法详解
Jul 07 Javascript
如何解决手机浏览器页面点击不跳转浏览器双击放大网页
Jul 01 Javascript
JS中对Cookie的操作详解
Aug 05 Javascript
Bootstrap按钮组简单实现代码
Mar 06 Javascript
JS实现去除数组中重复json的方法示例
Dec 21 Javascript
vue.js使用v-if实现显示与隐藏功能示例
Jul 06 Javascript
页面内锚点定位及跳转方法总结(推荐)
Apr 24 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
不用GD库生成当前时间的PNG格式图象的程序
2006/10/09 PHP
菜鸟学PHP之Smarty入门
2007/01/04 PHP
PHP Google的translate API代码
2008/12/10 PHP
用mysql_fetch_array()获取当前行数据的方法详解
2013/06/05 PHP
完美解决thinkphp验证码出错无法显示的方法
2014/12/09 PHP
解决在laravel中leftjoin带条件查询没有返回右表为NULL的问题
2019/10/15 PHP
PHP类的自动加载与命名空间用法实例分析
2020/06/05 PHP
javascript之对系统的toFixed()方法的修正
2007/05/08 Javascript
javascript实现的在当前窗口中漂浮框的代码
2010/03/15 Javascript
jQuery JSON实现无刷新三级联动实例探讨
2013/05/28 Javascript
jquery 滚动条事件简单实例
2013/07/12 Javascript
js中判断用户输入的值是否为空的简单实例
2013/12/23 Javascript
当jQuery1.7遇上focus方法的问题
2014/01/26 Javascript
使用js实现一个可编辑的select下拉列表
2014/02/20 Javascript
nodejs中实现阻塞实例
2015/03/24 NodeJs
ECMAScript6中Map/WeakMap详解
2015/06/12 Javascript
深入JavaScript高级程序设计之对象、数组(栈方法,队列方法,重排序方法,迭代方法)
2015/12/01 Javascript
JS中的forEach、$.each、map方法推荐
2016/04/05 Javascript
js 截取或者替换字符串中的数字实现方法
2016/06/13 Javascript
js中string和number类型互转换技巧(分享)
2016/11/28 Javascript
cordova入门基础教程及使用中遇到的一些问题总结
2017/11/14 Javascript
JS实现的JSON序列化操作简单示例
2018/07/02 Javascript
python self,cls,decorator的理解
2009/07/13 Python
Python3 pip3 list 出现 DEPRECATION 警告的解决方法
2019/02/16 Python
python中字典按键或键值排序的实现代码
2019/08/27 Python
Pycharm 字体大小调整设置的方法实现
2019/09/27 Python
python 实现矩阵按对角线打印
2019/11/29 Python
python中selenium库的基本使用详解
2020/07/31 Python
美国诺德斯特龙百货官网:Nordstrom
2016/08/23 全球购物
澳大利亚床上用品、浴巾和家居用品购物网站:Bambury
2020/04/16 全球购物
汽车运用工程专业毕业生推荐信
2013/12/25 职场文书
金融管理毕业生求职信
2014/03/03 职场文书
求职信模板
2014/05/23 职场文书
2014年团委工作总结
2014/11/13 职场文书
学校清洁工岗位职责
2015/04/15 职场文书
爱的教育读书笔记
2015/06/26 职场文书