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


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 相关文章推荐
使用jquery.upload.js实现异步上传示例代码
Jul 29 Javascript
关于JS中的apply,call,bind的深入解析
Apr 05 Javascript
利用Js+Css实现折纸动态导航效果实例源码
Jan 25 Javascript
jQuery元素选择器实例代码
Feb 06 Javascript
js实现下拉菜单效果
Mar 01 Javascript
分享一个精简的vue.js 图片lazyload插件实例
Mar 13 Javascript
JS 调试中常见的报错问题解决方法
May 20 Javascript
js 原生判断内容区域是否滚动到底部的实例代码
Nov 15 Javascript
Three.js实现简单3D房间布局
Dec 30 Javascript
微信小程序如何播放腾讯视频的实现
Sep 20 Javascript
JS实现随机抽取三人
Nov 06 Javascript
使用JavaScript获取Django模板指定键值数据
May 27 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
PHP伪静态写法附代码
2008/06/20 PHP
PHP mysqli事务操作常用方法分析
2017/07/22 PHP
解决Laravel blade模板转义html标签的问题
2019/09/03 PHP
用函数式编程技术编写优美的 JavaScript
2006/11/25 Javascript
跟我学习javascript的循环
2015/11/18 Javascript
js实现C#的StringBuilder效果完整实例
2015/12/22 Javascript
利用jQuery中的ajax分页实现代码
2016/02/25 Javascript
使用jQuery中的wrap()函数操作HTML元素的教程
2016/05/24 Javascript
Angular2 (RC4) 路由与导航详解
2016/09/21 Javascript
微信小程序开发(二)图片上传+服务端接收详解
2017/01/11 Javascript
微信小程序开发的四十个技术窍门总结(推荐)
2017/01/23 Javascript
如何快速解决JS或Jquery ajax异步跨域的问题
2018/01/08 jQuery
微信小程序之多文件下载的简单封装示例
2018/01/29 Javascript
vue router动态路由下让每个子路由都是独立组件的解决方案
2018/04/24 Javascript
Angularjs 根据一个select的值去设置另一个select的值方法
2018/08/13 Javascript
分享5个顶级的JavaScript Ajax组件库
2018/09/16 Javascript
Vue 组件封装 并使用 NPM 发布的教程
2018/09/30 Javascript
js 实现 list转换成tree的方法示例(数组到树)
2019/08/18 Javascript
Vue的Eslint配置文件eslintrc.js说明与规则介绍
2020/02/03 Javascript
Node.js+Vue脚手架环境搭建的方法步骤
2020/03/08 Javascript
vue-drag-chart 拖动/缩放图表组件的实例代码
2020/04/10 Javascript
Vue如何提升首屏加载速度实例解析
2020/06/25 Javascript
Python制作简单的网页爬虫
2015/11/22 Python
Python控制多进程与多线程并发数总结
2016/10/26 Python
Python温度转换实例分析
2018/01/17 Python
Python读取properties配置文件操作示例
2018/03/29 Python
在Python中居然可以定义两个同名通参数的函数
2019/01/31 Python
简单了解django orm中介模型
2019/07/30 Python
处理Selenium3+python3定位鼠标悬停才显示的元素
2019/07/31 Python
Python3读写Excel文件(使用xlrd,xlsxwriter,openpyxl3种方式读写实例与优劣)
2020/02/13 Python
使用Python-OpenCV消除图像中孤立的小区域操作
2020/07/05 Python
Microsoft新加坡官方网站:购买微软最新软件和技术产品
2016/10/28 全球购物
转预备党员政审材料
2014/02/06 职场文书
党在我心中的演讲稿
2014/09/13 职场文书
四大名著读书笔记
2015/06/25 职场文书
MySQL一些常用高级SQL语句
2021/07/03 MySQL