html图片渐隐渐显,js实现图片切换效果渐隐渐显

图片渐隐渐显的切换效果

window.onload = function()

{

var testDiv = document.getElementById('test');

testDiv.style.opacity = 1.0;

testDiv.onmouseover = show;

testDiv.onmouseout = hide;

};

var interval1, interval2;

var show = function()

{

if(interval2) {

//这里是为了当鼠标在Div渐隐的过程中移到Div上图片立即慢慢重现

clearInterval(interval2);

}

i = document.getElementById('test').style.opacity*100;

interval1 = setInterval("showRound()",20);

};

var showRound = function()

{

i++;

var testDiv = document.getElementById('test');

if(testDiv.style.opacity != 1.0) {

testDiv.style.opacity = i/100;

} else {

if(interval1) {

clearInterval(interval1);

}

var hide = function()

{

if(interval1) {

//这里是为了当鼠标在Div渐现的过程中从Div上移走图片立即慢慢消失

clearInterval(interval1);

}

j = document.getElementById('test').style.opacity*100;

interval2 = setInterval("hideRound()",20);

};

var hideRound = function()

{

j--;

var testDiv = document.getElementById('test');

if(testDiv.style.opacity != 0.0) {

testDiv.style.opacity = j/100;

} else {

if(interval2) {

clearInterval(interval2);

}

};

html图片渐隐渐显,js实现图片切换效果渐隐渐显相关推荐

JavaScript 逼真图片倒计时实现代码 js时间图片倒计时
JavaScript 逼真图片倒计时实现代码 js时间图片倒计时效果图: <!doctype html> <html> <head> <meta cha ...
php根据图片地址获取图片原始高宽,Js获取图片原始宽高的实现代码
如果我们页面看到的图片都是缩略图,那就需要做个图片点击放大效果,那么怎样获取图片的原始宽高呢?方法如下: //获取图片原始宽度 function getNaturalWidthAndHeight(im ...
html原生js实现图片轮播,原生JS实现图片轮播切换效果
原生JS实现图片轮播切换效果 2019-01-06 编程之家 https://www.jb51.cc 编程之家收集整理的这篇文章主要介绍了原生JS实现图片轮播切换效果,编程之家小编觉得挺不错的,现在分 ...
php 获得图片大小,js获取图片大小_php 或js获取图片大小
摘要腾兴网为您分享:php 或js获取图片大小,之了课堂,云集,宜信,学堂在线等软件知识,以及手机东方财富通,航空证券软件,日历星座,大吉大利晚上吃鸡图片,一米鲜,熊猫云,sketchup动画,空文 ...
Vue.js实现tab切换效果
tab切换第一步先要把HTML写好,这个第一步很关键,主要分为两块结构 <div id="app"><ul class="tab-tilte" ...
html 图片滚动放大缩小,js实现图片旋转 js滚动鼠标中间对图片放大缩小
从开通博客园到今天,有两个多月了.我发现之前没有开通博客记录自己所做的东西,真是后悔啊. 现在一点一点把自己所做的功能以博客的形式记录下来,一方面可以给大家分享,大家一起学习,同时自己也从新回顾一下. ...
html 图片自动滚动播放,JS实现图片自动滚动(图片横向滚动)
实带道术用量确示常构端析以要效开的用,近不现的效果就是一排图片自动横向滚动,鼠标指向的时候,暂定滚动,鼠标离开,继续滚要圈器是天的年编功小还久概据含直这请框结业未商屏页屏随会维气大机域页效实一应控高 ...
前端读取文件图片信息流；js读取图片不同信息流；js读取图片；前端就js读取二进制数据；前端js读取文件流使用FileReader对象的readAsDataURL方法来读取图像文件；
原文链接 FileReader来把文件读入内存,并且读取文件中的数据. readAsDataURL方法可以在浏览器主线程中异步访问文件系统,读取文件中的数据,且读取后 result 为 DataURL ...
matlab转化图片点云,three.js把图片转换成3D点云图特效
JavaScript 语言: JaveScriptBabelCoffeeScript 确定 window.addEventListener("DOMContentLoaded", ...

html图片渐隐渐显,js实现图片切换效果渐隐渐显

html图片渐隐渐显,js实现图片切换效果渐隐渐显相关推荐

最新文章

热门文章