模板无忧
Div+Css
每日更新
|
TOP排行榜
|
Tag标签
|
充值
无忧首页
网页模板
程序模板
建站教程
视频教程
网页特效
图标素材
字体下载
站长工具
站长问答
CMS教程
CMS行业动态
动易Cms教程
DedeCms教程
PHPCms教程
Discuz教程
PhpWind教程
动网论坛教程
PHP168教程
SupeSite教程
帝国Cms教程
新云Cms教程
科汛Cms教程
风讯Cms教程
模板安装教程
Div+Css教程
Div+CSS教程
DIV+CSS实例
CSS教程
XHTML教程
Web标准教程
浏览器兼容教程
HTML5教程
CSS3教程
网站制作教程
Flash教程
Fireworks教程
Dreamweaver教程
网页配色教程
网页设计教程
网站重构教程
Photoshop教程
网站运营
站长新闻
建站经验教程
SEO优化教程
免费建站资源
网站推广教程
策划盈利教程
GoogleAdsense教程
站长休闲故事
网络编辑教程
网络编程
PHP教程
ASP教程
.Net教程
JSP教程
AJAX教程
Xml教程
Access数据库教程
Mssql数据库教程
MySQL教程
服务器教程
Web服务器教程
Windows教程
Linux教程
Ftp服务器教程
Mail服务器教程
Dns服务器教程
负载集群教程
站长工具
站长常用软件
网站综合查询
Alexa排名查询
Google PR查询
域名Whois查询
网站收录查询
友情链接查询
CSS2中文手册
CSS精简优化工具
Div+Css教程
模板无忧
>
建站教程
>
Div+Css教程
>
Div+CSS教程
>
收藏
分享
查看评论
Div+CSS教程
大
中
小
CSS+JS控制图片展示效果_Div+CSS教程
编辑Tag赚U币
教程Tag:
CSS
图片展示
js
添加
此文来自_模板无忧_www.mb5u.com
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML lang=it dir=ltr xml:lang="it" xmlns="http://www.w3.org/1999/xhtml"><HEAD> <TITLE>CSS+JS控制图片展示效果</TITLE> <STYLE> BODY { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; FONT: 70% Verdana, Geneva, Arial, Helvetica, sans-serif; COLOR: #000; PADDING-TOP: 0px; TEXT-ALIGN: center } #outer { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: url(/images/bg-outer.gif) repeat-y center top; PADDING-BOTTOM: 0px; MARGIN: 0px auto; WIDTH: 780px; PADDING-TOP: 0px; TEXT-ALIGN: left } #wrapper { BACKGROUND: #fff; MARGIN: 0px 4px } #content { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; MIN-HEIGHT: 400px; PADDING-BOTTOM: 20px; MARGIN: 20px 30px; PADDING-TOP: 0px; POSITION: relative } #focus { BORDER-RIGHT: #ccc 2px solid; PADDING-RIGHT: 0px; BORDER-TOP: #ccc 2px solid; PADDING-LEFT: 0px; MIN-HEIGHT: 188px; BACKGROUND: url(/images/tile.gif) #eee repeat-y left top; PADDING-BOTTOM: 10px; MARGIN: 25px 0px 30px; BORDER-LEFT: #ccc 2px solid; WIDTH: 100%; PADDING-TOP: 15px; BORDER-BOTTOM: #ccc 2px solid; POSITION: relative; HEIGHT: 188px } #beni { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 250px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none; POSITION: absolute; TOP: 15px } #beni LI { BORDER-TOP: #fff 1px solid; FONT-SIZE: 12px; FLOAT: left; WIDTH: 250px; TEXT-INDENT: 24px; LINE-HEIGHT: 26px } #beni LI.first { BORDER-TOP: 0px } #beni LI A { BORDER-RIGHT: 0px; PADDING-RIGHT: 0px; BORDER-TOP: 0px; DISPLAY: block; PADDING-LEFT: 0px; FONT-WEIGHT: bold; BACKGROUND: #eee; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER-LEFT: 0px; PADDING-TOP: 0px; BORDER-BOTTOM: 0px; TEXT-DECORATION: none } #beni LI A:hover { BACKGROUND: #f9f9f9 } </STYLE> <SCRIPT type="text/javascript"> function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { oldonload(); func(); } } } function insertAfter(newelement,existingelement) { var parentelement = existingelement.parentNode; if (parentelement.lastChild == existingelement) { return parentelement.appendChild(newelement); } else { return parentelement.insertBefore(newelement,existingelement.nextSibling); } } function makeSlideshow(details,coords,linkholder) { if (!document.getElementById) return false; if (!document.getElementById(linkholder)) return false; var pane = document.createElement('div'); pane.style.width = details['width']; pane.style.height = details['height']; pane.style.overflow = 'hidden'; pane.style.position = 'relative'; pane.style.top = '0px'; pane.style.left = '270px'; pane.setAttribute('id','descrizione'); var pic = document.createElement('img'); pic.setAttribute('id',details['id']); pic.setAttribute('src',details['image']); pic.setAttribute('alt',''); pic.style.position = 'absolute'; pane.appendChild(pic); var l_beni = document.getElementById(linkholder); l_beni.parentNode.insertBefore(pane,l_beni); var lnks = l_beni.getElementsByTagName('a'); for (var i=0;i<lnks.length;i++) { var linktext = lnks[i].childNodes[0].nodeValue; if (coords[linktext]) { lnks[i].elementId = details['id']; lnks[i].x = coords[linktext][0]; lnks[i].y = coords[linktext][1]; lnks[i].sliding = null; lnks[i].onmouseover = function() { slideElement(this.elementId,this.x,this.y,6); } lnks[i].onfocus = lnks[i].onmouseover; } } } function slideElement(elementId,x,y,inc) { if (!document.getElementById) return false; if (!document.getElementById(elementId)) return false; var element = document.getElementById(elementId); if (element.sliding) clearTimeout(element.sliding); if (!element.xpos) element.xpos = 0; if (!element.ypos) element.ypos = 0; if (element.xpos == x && element.ypos == y) return true; if (element.xpos > x) { var dist = Math.ceil((element.xpos-x)/inc); element.xpos = element.xpos - dist; } if (element.xpos < x) { var dist = Math.ceil((x-element.xpos)/inc); element.xpos = element.xpos + dist; } if (element.ypos > y) { var dist = Math.ceil((element.ypos-y)/inc); element.ypos = element.ypos - dist; } if (element.ypos < y) { var dist = Math.ceil((y-element.ypos)/inc); element.ypos = element.ypos + dist; } element.style.left = element.xpos+'px'; element.style.top = element.ypos+'px'; element.sliding = setTimeout('slideElement("'+elementId+'",'+x+','+y+','+inc+')',10); } /* Focus Beni */ addLoadEvent(showbeni); function showbeni() { if (!document.getElementById) return false; if (!document.getElementById('beni')) return false; var panel_details = new Array(); panel_details['id'] = 'pic'; panel_details['image'] = '/uploads/allimg/120607/B394852212.jpg'; panel_details['width'] = '420px'; panel_details['height'] = '188px'; var coords = new Array(); coords['default'] = new Array(0,0); coords['Opere e oggetti d\'arte'] = new Array(0,-188); coords['Architetture'] = new Array(0, -376); coords['Reperti archeologici'] = new Array(0,-564); coords['Stampe e matrici di incisione'] = new Array(0,-752); coords['Fotografie'] = new Array(0,-940); coords['Beni etnoantropologici'] = new Array(0,-1128); var linkholder = 'beni'; makeSlideshow(panel_details,coords,linkholder); } </SCRIPT> </HEAD> <BODY id=home> <DIV id=outer> <DIV id=wrapper> <DIV id=content> <DIV id=focus> <UL id=beni> <LI class=first><A href="#">Opere e oggetti d'arte</A></LI> <LI><A href="#">Architetture</A></LI> <LI><A href="#">Reperti archeologici</A></LI> <LI><A href="#">Stampe e matrici di incisione</A></LI> <LI><A href="#">Fotografie</A></LI> <LI><A href="#">Beni etnoantropologici</A></LI> </UL> </DIV> </DIV> </DIV> </DIV> </BODY> </HTML>
网站制作在线视频教程
网站制作视频教程打包下载
DIV+CSS模板
CSS视频教程
CSS设计彻底研究视频教程
网页制作基础教程
网站重构&web标准设计教程
div css视频教程
DIV + CSS 入门视频教程,只用记事本编写代码演示
精通CSS+DIV网页样式与布局配套视频教程
别具光芒:DIV+CSS网页布局与美化
DIV.CSS应用视频教程(DIV+CSS)
来源:模板无忧
/
/
所属分类:
Div+CSS教程
/
更新时间:2012-06-08
[收藏]
[报错]
[返回列表]
相关
Div+CSS教程
:
DIV+CSS设计的误区
CSS基础:常用CSS英文字体介绍
IE6和IE7中border边框断线现象
border:none;与border:0;的有什么不同?
div+css下js对联广告不随屏幕滚动的解决方法
HTML元素的ID和Name属性的区别
divcss教程:深入了解css的行高Line Height属性
CSS文档流,块级元素和内联元素
5个你该知道的CSS3新技术
用正则表达式替换a标记href值
30个优秀的CSS导航和按钮设计教程
css中px和em有什么区别
Div+CSS教程Rss订阅
Div+Css教程搜索
Div+CSS教程推荐
IE6图片下方空隙的产生原因及解决方法
用PhotoShop两分钟完成一个xhtml css首页
如何避免容器被长单词撑开?
用ul标签来实现四行三列“表格式”布局
Google谷歌的CSS前景图片合并技术
firefox下使连续长字段自动换行
float和position属性的区别和使用方法
IE中background-image在链接转行后未显示的现象
如何定义标题最恰当符合Web标准?
overflow与text-indent:-9999px 字体隐藏及input value偏移
猜你也喜欢看这些
DIV CSS布局入门示例(二)写入整体层结构与CSS
CSS中以图片替换文字的表现方法
CSS布局的8个你需要掌握的技巧
CSS实例教程:红蓝炫CSS横向菜单
用css制作有滚动条的居中弹出框
DivCSS布局实例:很实用的图文混排CSS列表-富有语义
DIVCSS布局教程:应用ul、li实现表格形式
JS显示网页最后更新时间
如何用CSS实现翻页效果?
CSS表格样式:CSS JS打造可伸缩的表格
相关链接:
复制本页链接
|
搜索CSS+JS控制图片展示效果
教程说明:
Div+CSS教程
-
CSS+JS控制图片展示效果
。