为您提供网站建设行业资讯、网站优化知识、主机域名邮箱、网站开发常见问题等
仿QQ空间图片展示和百度图片展示方式代码
发表日期:2012-11-09 资讯来源:佰牛科技 浏览:126

很多时候用到图片展示方式时都会想起QQ空间图片或百度图片的展示方式,鼠标移动到图片的左右侧或上下部分会显示上一张和下一张箭头,点击直接显示上一张或下一张图片。下面为你介绍种简单即可实现这种QQ空间图片展示或百度图片展示方式的代码:
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html>
<head>
<style type='text/css'>
#xx{border:1px solid red;margin:0 auto;text-align:center;position:relative;}
</style>
</head>
<body>
<div id='xx'>
<img src='UploadFile/201211985647955.jpg' id='photo' name='0' />
<div id='loading' style='display:none;'>loading...</div>
</div>
<script type='text/&#106avascript'>
imgs = new Array('UploadFile/201211985647955.jpg','UploadFile/201211985647769.jpg');
/*
* 这里借用了img.name保存url在imgs里的位序.
* 事件可以考虑注册在#xx上。使大小能适应#photo的大小,这样使用#loading的时候会方便一点,第一张图片unload的话也好处理一点。
* click事件的时候,可以根据pos考虑预加载一些图片。
* ....
*/
document.getElementById('photo').&#111nmousemove=function(e)
{
var event=e||window.event; //
var pos;
if(event.offsetX!=undefined)
pos=event.offsetX<this.offsetWidth/2?true:false;
else if(event.layerX!=undefined)//
pos=event.layerX<this.offsetWidth/2?true:false;
//this.style.cursor=pos?'sw-resize':'nw-resize';
//opera 9 好像不支持cursor:url,ie6:url要.cur文件,.gif换掉就好了。
this.style.cursor=pos?'url(img/left.cur),auto':'url(img/right.cur),auto';
this.&#111nclick=function()
{
var next=(this.name-0+imgs.length+(pos?-1:1))%imgs.length;
this.src=imgs[next];
this.name=next;
//
}
}
document.getElementById('photo').onload=function()
{
this.parentNode.style.width=this.width+'px';
this.parentNode.style.height=this.height+'px';
}
</script>
</body>
</html>
- 内容标签:
- 深圳高端设计公司
- 传统网页设计
- 深圳网络公司
- 深圳网站建设
- 上一条:生鲜电商难找盈利模式背后的危机
- 上一条:教你如何来做好长尾关键词优化
- 相关资讯
-
联系我们-新盛娱乐客服开户注册电话15559858555
首页-新盛娱乐公司-电话【15559858555】【微信】新盛公司微同步【在线客服-15559858555】开户电话-客服开户-热线开户-咨询-联系-代理开户-在线开户-开户网址-注册开户-开账号-开会员
日期:2025-06-25 浏览:100 -
浅谈Seo工作中执行力的重要性
总的来说’PDCAR法则”就是制定好计划马上实施,计划实施完毕后,将整个计划执行的过程回顾一遍,仔细考虑每个细节,确认哪些部分成功了,哪些部分是失败的。
日期:2016-05-16 浏览:120 -
SEO大牛是如何“原创”网站文章的?
首先是收集长尾关键词,你可以去百度指数、百度相关搜索栏、百度知道问答或者软件等等地方收集到长尾关键词。有一点要注意的是,我们收集好关键词后要进行整理,把明显不相关的长尾词筛选,比如搜索钢管时会出现"钢管舞"这跟做钢管这一产品词没有帮助。
日期:2016-05-16 浏览:123 -
外链建设如何影响网站关键词排名
再次是外链的相关性远比数量重要,很多SEOER做外链基本不注重相关性,在他们看来,只要悬挂外链的网站有高权重即可,并且觉得外链做的越多越好,也就是说十分注重外链的数量,忽略的质量。
日期:2016-05-16 浏览:122 -
如何识别SEO中的水货?
百科中原理写的是向百度发送数据包。大哥,你发了也得人家接收执行才行。这边如果写成『缓存溢出可执行漏洞』,那还具有一定可行性。而忽悠大师是不会这么深入研究的,他们最擅长的就是抛出一套理论,让你觉得很高深,很有效,其实具体怎么执行,往往他们都说不出个所以然来。
日期:2016-05-16 浏览:120 -
精简优化代码是做好SEO优化必须的一个步骤
尽量采用局您的页面,局的益处是让搜索引擎爬虫能够更顺遂的、更快的、更友好的爬完您的页面局还可以年夜量缩减网页巨细,这在SEO优化工作中起到很大的浸染,不仅提高浏览的速度,更使得代码更精练、流利、更轻易放置更多内容。
日期:2016-05-16 浏览:121 -
对于于门第上网站seo优化的网站操作
网站题目:关于一度新站来说是很首要的,第二天你网站题目就成为了呵呵,这可是举例,百度引擎可没有喜爱网站题目没有断变来边去,新站要安靖做兴起,就要想好一度面前的题目,假如斯后需求批改,也最好正在网站有所根底的状况下,遏制修正。
日期:2016-05-16 浏览:130 -
SEO优化 文章隐藏的文本和链接算是作弊?
在网站底部添加闪动的友情链接,只需要拉动到网站底部就可以看到一排闪动,从源代码里面可以看到,也有添加到其他地方的(这个情况一般都是网站被黑了,网站怎么预防请看:网站被黑预防措施)
日期:2016-05-13 浏览:122