图片翻转效果具体实现代码


Posted in Javascript onJanuary 09, 2014

以下为程序代码:

<!DOCTYPE html /> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> 
<title>图片翻转效果</title> 
<style type="text/css"> 
.box {overflow:hidden;position:relative;} 
.txt {width:100%;height:100%;background:#f51146;font-size:12px;position:absolute;top:-100%;color:white; 
text-align:center;filter:alpha(Opacity=80);-moz-opacity:0.8;opacity:0.8;} 
#b1 {background:url(http://biyuan.tk/u/upload/201310221457326875.jpg);width:232px;height:232px;} 
#b2 {background:url(http://biyuan.tk/u/upload/201310221457486875.jpg);width:110px;height:110px;} 
#b3 {background:url(http://biyuan.tk/u/upload/201310221458149843.jpg);width:110px;height:110px;} 
</style> 
</head> 
<body> 
<div id="obj"> 
<div class="box" id="b1"><div class="txt">文字说明<br />文字说明</br />文字</div></div> 
<div class="box" id="b2"><div class="txt">文字说明<br />文字说明</br />文字</div></div> 
<div class="box" id="b3"><div class="txt">文字说明<br />文字说明</br />文字</div></div> 
</div> 
<script type="text/javascript"> 
function Show(o, s, v){ 
clearInterval(Show.prototype["a" + v]); 
Show.prototype["a" + v] = setInterval(function(){ 
if(s == -1) { 
if(o.offsetTop <= -o.parentNode.offsetHeight) { 
o.style.top = -o.parentNode.offsetHeight + "px"; 
return clearInterval(Show.prototype["a" + v]); 
} 
} else { 
if(o.offsetTop >= -10) { 
o.style.top = 0; 
return clearInterval(Show.prototype["a" + v]); 
} 
} 
o.style.top = (o.offsetTop * 1 + 10 * s) + "px"; 
}, 10); 
} 
var igs = document.getElementById('obj').getElementsByTagName("div"); 
for(var i = 0; i < igs.length; i ++) { 
if(igs[i].className == "box") { 
(function(x){ 
igs[x].onmouseover = function(){ 
Show(this.childNodes[0], 1, x); 
this.onmouseout = function() { 
Show(this.childNodes[0], -1, x); 
} 
} 
})(i); 
} 
} 
</script> 
</body> 
</html>

效果预览:http://biyuan.tk/u/upload/201310221500310000.html
Javascript 相关文章推荐
js实现的网站首页随机公告随机公告
Mar 14 Javascript
javascript数字数组去重复项的实现代码
Dec 30 Javascript
关于js注册事件的常用方法
Apr 03 Javascript
jquery获取颜色在ie和ff下的区别示例介绍
Mar 28 Javascript
妙用Bootstrap的 popover插件实现校验表单提示功能
Aug 29 Javascript
AngularJS使用自定义指令替代ng-repeat的方法
Sep 17 Javascript
在JS中a标签加入单击事件屏蔽href跳转页面
Dec 16 Javascript
JS实现的数字格式化功能示例
Feb 10 Javascript
Vue.js实现移动端短信验证码功能
Mar 29 Javascript
JavaScript实现创建自定义对象的常用方式总结
Jul 09 Javascript
ES6的Fetch异步请求的实现方法
Dec 07 Javascript
《javascript设计模式》学习笔记三:Javascript面向对象程序设计单例模式原理与实现方法分析
Apr 07 Javascript
js获取光标位置和设置文本框光标位置示例代码
Jan 09 #Javascript
扩展IE中一些不兼容的方法如contains、startWith等等
Jan 09 #Javascript
javascript计算当月剩余天数(天数计算器)示例代码
Jan 09 #Javascript
含有CKEditor的表单如何提交
Jan 09 #Javascript
javascript计算星座属相(十二生肖属相)示例代码
Jan 09 #Javascript
javascript计算用户打开网页的停留时间
Jan 09 #Javascript
js中生成map对象的方法
Jan 09 #Javascript
You might like
模拟flock实现文件锁定
2007/02/14 PHP
PHP-MySQL教程归纳总结
2008/06/07 PHP
深入PHP内存相关的功能特性详解
2013/06/08 PHP
10条php编程小技巧
2015/07/07 PHP
php 生成Tab键或逗号分隔的CSV
2016/09/24 PHP
PHP htmlspecialchars() 函数实例代码及用法大全
2018/09/18 PHP
Mootools 1.2教程 输入过滤第二部分(字符串)
2009/09/15 Javascript
Javascript学习笔记5 类和对象
2010/01/11 Javascript
JavaScript的类型简单说明
2010/09/03 Javascript
jQuery.extend 函数的详细用法
2012/06/27 Javascript
基于jquery插件实现常见的幻灯片效果
2013/11/01 Javascript
浅析XMLHttpRequest的缓存问题
2013/12/13 Javascript
基于jQuery.validate及Bootstrap的tooltip开发气泡样式的表单校验组件思路详解
2016/07/18 Javascript
BootStrap表单宽度设置方法
2017/03/10 Javascript
JavaScript-定时器0~9抽奖系统详解(代码)
2017/08/16 Javascript
vue 运用mock数据的示例代码
2017/11/07 Javascript
extjs图表绘制之条形图实现方法分析
2020/03/06 Javascript
JavaScript或jQuery 获取option value值方法解析
2020/05/12 jQuery
Openlayers实现距离面积测量
2020/09/28 Javascript
详解Python Socket网络编程
2016/01/05 Python
对Python Class之间函数的调用关系详解
2019/01/23 Python
Python实现的大数据分析操作系统日志功能示例
2019/02/11 Python
Python性能分析工具Profile使用实例
2019/11/19 Python
Python telnet登陆功能实现代码
2020/04/16 Python
pandas中read_csv、rolling、expanding用法详解
2020/04/21 Python
Python configparser模块封装及构造配置文件
2020/08/07 Python
HR喜欢的自荐信格式
2013/10/08 职场文书
高一新生军训感言
2014/03/02 职场文书
会计工作决心书
2014/03/11 职场文书
国际会计专业求职信
2014/08/04 职场文书
白酒营销策划方案
2014/08/17 职场文书
医院护士见习期自我鉴定
2014/09/15 职场文书
银行求职信范文
2019/05/13 职场文书
《敬重卑微》读后感3篇
2019/11/26 职场文书
手把手教你用SpringBoot将文件打包成zip存放或导出
2021/06/11 Java/Android
设置IIS Express并发数
2022/07/07 Servers