- 浏览: 320391 次
- 性别:
- 来自: 贵阳
最新评论
-
贝塔ZQ:
没遇到类似错误,可以用插件PageOffice处理的
jxl生成excel报错:“文件错误。可能某些数字格式已丢失” -
woaiziji:
为什么我招不到spket呢在myeclipse里
MyEclipse10.5集成spket并添加extjs4.1代码提示支持 -
eliot4u:
不错啊~~~
MyEclipse10.5集成spket并添加extjs4.1代码提示支持 -
lf136492244:
走了2遍,没走通。前3步做完,第四步完全看不到Window—— ...
MyEclipse10.5集成spket并添加extjs4.1代码提示支持 -
wengsibo:
谢谢——楼主啊。。好东西啊。。
MyEclipse10.5集成spket并添加extjs4.1代码提示支持
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>byzuo.cn---焦点图片 </title> <style type="text/css"> /* Reset style */ * { margin:0; padding:0; word-break:break-all; } body { background:#FFF; color:#333; font:12px/1.6em Helvetica, Arial, sans-serif; } h1, h2, h3, h4, h5, h6 { font-size:1em; } a { color:#039; text-decoration:none; } a:hover { text-decoration:underline; } ul, li { list-style:none; } fieldset, img { border:none; } em, strong, cite, th { font-style:normal; font-weight:normal; } /* Focus_change style */ #focus_change { position:relative; width:450px; height:295px; overflow:hidden; margin:20px 0 1px 60px; } #focus_change_list { position:absolute; width:1800px; height:295px; } #focus_change_list li { float:left; } #focus_change_list li img { width:450px; height:295px; } .focus_change_opacity { position:absolute; width:450px; height:70px; top:225px; left:0; background:#000; filter:alpha(opacity=50); -moz-opacity:0.5; opacity: 0.5; } #focus_change_btn { position:absolute; width:450px; height:65px; top:225px; left:0; } #focus_change_btn ul { padding-left:5px; } #focus_change_btn li { display:inline; float:left; margin:0 15px; padding-top:12px; } #focus_change_btn li img { width:76px; height:50px; border:2px solid #888; } #focus_change_btn .current { background:url(http://www.byzuo.cn/demo/focus_change/img/icon_arrow.gif) no-repeat 37px 8px;} #focus_change_btn .current img { border-color:#EEE; } </style> <script type="text/javascript"> function $(id) { return document.getElementById(id); } function moveElement(elementID,final_x,final_y,interval) { if (!document.getElementById) return false; if (!document.getElementById(elementID)) return false; var elem = document.getElementById(elementID); if (elem.movement) { clearTimeout(elem.movement); } if (!elem.style.left) { elem.style.left = "0px"; } if (!elem.style.top) { elem.style.top = "0px"; } var xpos = parseInt(elem.style.left); var ypos = parseInt(elem.style.top); if (xpos == final_x && ypos == final_y) { return true; } if (xpos < final_x) { var dist = Math.ceil((final_x - xpos)/10); xpos = xpos + dist; } if (xpos > final_x) { var dist = Math.ceil((xpos - final_x)/10); xpos = xpos - dist; } if (ypos < final_y) { var dist = Math.ceil((final_y - ypos)/10); ypos = ypos + dist; } if (ypos > final_y) { var dist = Math.ceil((ypos - final_y)/10); ypos = ypos - dist; } elem.style.left = xpos + "px"; elem.style.top = ypos + "px"; var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")"; elem.movement = setTimeout(repeat,interval); } function classNormal(){ var focusBtnList = $('focus_change_btn').getElementsByTagName('li'); for(var i=0; i<focusBtnList.length; i++) { focusBtnList.className=''; } } function focusChange() { var focusBtnList = $('focus_change_btn').getElementsByTagName('li'); focusBtnList[0].onmouseover = function() { moveElement('focus_change_list',0,0,5); classNormal() focusBtnList[0].className='current' } focusBtnList[1].onmouseover = function() { moveElement('focus_change_list',-450,0,5); classNormal() focusBtnList[1].className='current' } focusBtnList[2].onmouseover = function() { moveElement('focus_change_list',-900,0,5); classNormal() focusBtnList[2].className='current' } focusBtnList[3].onmouseover = function() { moveElement('focus_change_list',-1350,0,5); classNormal() focusBtnList[3].className='current' } } setInterval('autoFocusChange()', 5000); function autoFocusChange() { var focusBtnList = $('focus_change_btn').getElementsByTagName('li'); for(var i=0; i<focusBtnList.length; i++) { if (focusBtnList.className == 'current') { var currentNum = i; } } if (currentNum==0 ){ moveElement('focus_change_list',-450,0,5); classNormal() focusBtnList[1].className='current' } if (currentNum==1 ){ moveElement('focus_change_list',-900,0,5); classNormal() focusBtnList[2].className='current' } if (currentNum==2 ){ moveElement('focus_change_list',-1350,0,5); classNormal() focusBtnList[3].className='current' } if (currentNum==3 ){ moveElement('focus_change_list',0,0,5); classNormal() focusBtnList[0].className='current' } } window.onload=function(){ focusChange(); } </script> </head> <body> <div id="focus_change"> <div id="focus_change_list" style="top:0; left:0;"> <ul> <li><img src="http://www.byzuo.cn/demo/focus_change/img/01.jpg" alt="" /></li> <li><img src="http://www.byzuo.cn/demo/focus_change/img/02.jpg" alt="" /></li> <li><img src="http://www.byzuo.cn/demo/focus_change/img/03.jpg" alt="" /></li> <li><img src="http://www.byzuo.cn/demo/focus_change/img/04.jpg" alt="" /></li> </ul> </div> <div class="focus_change_opacity"></div> <div id="focus_change_btn"> <ul> <li class="current"><a href="#"><img src="http://www.byzuo.cn/demo/focus_change/img/btn_01.jpg" alt="" /></a></li> <li><a href="#"><img src="http://www.byzuo.cn/demo/focus_change/img/btn_02.jpg" alt="" /></a></li> <li><a href="#"><img src="http://www.byzuo.cn/demo/focus_change/img/btn_03.jpg" alt="" /></a></li> <li><a href="#"><img src="http://www.byzuo.cn/demo/focus_change/img/btn_04.jpg" alt="" /></a></li> </ul> </div> </div><!--focus_change end--> </body> </html>
1.对焦点图片下方进行透明处理.兼容ie6 ie7 ff透明效果
2.通过鼠标移动到不同的四小图片时,通过改变图片所处父节点id=focus_change_list的left值取得效果
3.默认下每5秒执行一次函数autoFocusChange(),来实现图片自动变换
<!--v:3.2-->
发表评论
-
HTML页面的垂直滚动条不见了~
2011-05-23 12:39 14308HTML页面的垂直滚动条不见了~找了半天也没有找到原因~~最后 ... -
当xmlhttp.onreadystatechange时,给handleStateChange传递参数
2010-11-20 23:07 1549xmlhttp.onreadystatechange = ha ... -
960网页栅格化总结
2010-04-13 10:20 4436几个术语和一个公式 一个标准的栅格系统,包括以下部分: ... -
javaScritp递归求n的阶乘
2010-03-20 11:58 1484<script type="text/java ... -
JS日期控件
2010-01-15 10:13 899官方推荐优点如下: ============== 更人性化,更 ... -
几个经典的css技巧
2009-12-29 15:33 1033使用 line-height 垂直居中 line-hei ... -
毛zedong字体及04英文像素字体下载
2009-12-29 15:27 1598见附件 -
CSS常用网站布局实例
2009-12-29 15:24 984单行一列以下是引用片 ... -
216种Web安全颜色
2009-12-29 14:55 1163<!--Content S ... -
JS复选框checkbox选中与否弹出窗口提示确认
2009-06-18 21:50 9380<!DOCTYPE html PUBLIC " ... -
css兼容IE8
2009-05-20 09:40 1346微软在IE8提供三种解析页面的模式 IE8 Standard ... -
无条件引回根目录下登陆页面
2009-04-19 14:42 1097<SCRIPT language=javascrip ... -
DIV图层拖动原理与实现
2009-04-19 14:36 2863这几天做基于Web页面的 ... -
javascript 多个层拖动效果
2009-04-19 14:35 1341<style> <!-- div { ... -
CSS中cursor鼠标形状属性列表
2009-04-19 14:34 2025光标类型 CSS 把你的光标放到相应文字上查看效果 要 ... -
层拖动代码
2009-04-19 14:33 903<!DOCTYPE html PUBLIC " ... -
元素操作:可以准确定位的两个不同风格的移动层
2009-04-19 14:32 1291风格一 <script> z_index= 1 ... -
js图片切换
2009-04-19 14:29 12998<!DOCTYPE html PUBLIC " ... -
常用的CSS命名规则
2009-04-13 10:27 724常用的CSS命名规则 头:header 内容:co ...
相关推荐
仿土豆网的焦点轮换图片,鼠标划过小图片时,相应DIV位置显示其大图
本文实例讲述了js仿土豆网带缩略图的焦点图片切换效果实现方法。分享给大家供大家参考。具体实现方法如下: 代码如下:<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ...
土豆网弹窗 弹窗 仿土豆网弹窗效果下载完整版
js图片滚动仿土豆 横向 javascript多张图片切换滚动
漂亮的JS图片切换特效,土豆网和网都用过的经典特效,切换时的效果很平滑,感觉和FLASH一模一样。
土豆网首页的最新焦点幻灯 土豆网首页的最新焦点幻灯
淘宝、土豆网JS图片切换特效 JavaScript
这是提供给正在做网站的程序员,或者正在学习和做学习案例的学员使用。其中一个是模仿土豆网做的一个“首页图片轮流显示”效果。
这个是模仿 土豆网 首页 资源图片自动切换 效果 代码 jsp代码 方便网页制作过程的一些效果
仿土豆视频网站程序第三期首发
php+mysql完美仿土豆视频程序 增加了一个国外视频网站采集规则 可播放的视频类型有flash系列 flv系列 windowsmedie系列 real系列 QVOD高清视频 可在视频缓冲前加上广告
基于QT+C++开发的仿土豆兄弟游戏+源码,适合毕业设计、课程设计、项目开发。项目源码已经过严格测试,可以放心参考并在此基础上延申使用~ 基于QT+C++开发的仿土豆兄弟游戏+源码,适合毕业设计、课程设计、项目开发...
仿土豆视频播放 jsp源码下载 仿土豆视频播放
纯javascript仿做土豆网豆单列表载入图片特效.zip
本站采用帝国ecms内核 php mysql 数据达到100万以上 也不会有丝毫... ... ... ...仿土豆网站模板 可改造成为任何主流类型的网站 也可以改造为视频网站 由于本地图片太多 有近70M 所以没打包 需要的请联系qq:250093148
仿土豆网站源码完全是公开的,数据库登陆名admin 密码admin
网页模板——纯javascript仿做土豆网豆单列表载入图片特效
29 土豆网右下角悬浮导航效果