首页
矢量素材
PNG图标
JS代码
网页小图标
网页素材
设计欣赏
广告达人
有趣新鲜
技术文档
懒人博客
懒人论坛
当前位置:
首页
>
JS代码
>
JS特效代码
>
滚动代码
> 第1页
JS控制图片滚动的效果
VIEW:2611
来源:懒人图库
2009-06-12
<!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 } #description{ width:420px; height:188px; overflow:hidden; float:right; margin-right:15px; } </STYLE> <script> window.onload=function(){ var ele=document.getElementById("description"); var w=ele.clientWidth; var n=20,t=20; var timers=new Array(n); var c=document.getElementById("beni").getElementsByTagName("li"); for(var i=0;i<c.length;i++){ c[i].index=i; c[i].onmouseover=doSlide; } c=null; function doSlide(){ var x=ele.scrollLeft; var d=this.index*w-x; if(!d) return; for(var i=0;i<n;i++)(function(){ if(timers[i]) clearTimeout(timers[i]); var j=i; timers[i]=setTimeout(function(){ ele.scrollLeft=x+Math.round(d*Math.sin(Math.PI*(j+1)/(2*n))); },(i+1)*t); })(); } } </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="#">architettzure</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 id=description> <img src="http://www.lanrentuku.com/down/js/images/12447871590.jpg" /> </div> </div> </div> </div> </div> <p>查找更多代码,请访问:<a href="http://www.lanrentuku.com" target="_blank">懒人图库</a></p> </body> </html>
提示:您可以先修改部分代码再运行,复制代码和保存代码功能在Firefox下无效。
JS控制图片滚动的效果,推荐!
↑上一篇:
CSS自适应宽度按钮
↓下一篇:
Ext 2.0+Ext JS 3.0
JS控制图片滚动的效果
不间断向上滚动代码
JS实现的幻灯上滚效果
不间断向左滚动代码
无间断图片循环滚动效果
JS不间断向上滚动
JS不间断向下滚动
JS不间断向左滚动
JS不间断向右滚动
广告代码
共
338
个JS广告代码
››全部
焦 点 图(156)
全屏广告(11)
对联广告(6)
在线客服(5)
相册代码(39)
菜单导航(32)
TAB标签(13)
悬浮漂浮(3)
视频播放(4)
图片特效(23)
翻牌书角(7)
其他代码(39)
特效代码
共
273
个JS特效代码
››全部
导航菜单(55)
表单按钮(43)
文字特效(11)
表格图层(35)
图片特效(15)
时间日期(21)
滚动代码(11)
窗口特效(8)
颜色背景(2)
网站常用(42)
CSS样式(13)
其他特效(17)
最近浏览过的特效代码
更多››
关于我们
-
版权声明
-
广告服务
-
懒人西西
-
RSS订阅
-
工作机会
-
网站地图
-
友情链接
-
联系我们
-
在线留言
Copyright © 2006-2009
lanrentuku.com
All Rights Reserved.
-
京ICP备08001501号