图片逐渐由看不见到模糊,最后清晰显示;鼠标点击图片后,图片依照1、2、3、4顺序依次循环显示;鼠标移入图片区域,图片放大

html<html<head lang="en"<meta charset="UTF-8"<titletitle</head<body<div</div<div<img src="images/1.jpg"  alt="" width="192"</div<brbr<div</div<brbrbr<scriptdocument.images[0].onmouseover=function(){        // 设置父元素的大小        this.parentNode.style.width = this.width+‘px‘;        this.parentNode.style.height = this.height+‘px‘;        // 设置当前图片为绝对定位        this.style.position = ‘absolute‘;        this.width = this.width*2;    }    document.images[0].onmouseout=function(){        this.width = this.width/2;    }script<hr<div</div<div<img src="images/1.jpg" alt="" width="192" height="120"</div<brbr<div</div<brbrbr<scriptdocument.images[1].onclick=function(){        var begin = this.src.lastIndexOf(‘/‘);        var end = this.src.lastIndexOf(‘.‘);        var num = this.src.substring(begin+1, end);        num = parseInt(num)+1;        if(num>4) num=1;        this.src = ‘images/‘+num+‘.jpg‘;    }script<hr<div</div<div<img src="images/1.jpg" alt="" style="display: none;" width="192"</div<brbr<button id="btnshow"</button<div</div<scriptvar opnum=0.02, imgtime;    function showimg(){        var img3 = document.images[2];        opnum+=0.02;        img3.style.opacity=opnum;        img3.style.display=‘inline‘;

if(opnum>=1)            clearInterval(imgtime);    }    document.getElementById(‘btnshow‘).onclick=function(){        var img3 = document.images[2];        img3.style.opacity=0;        img3.style.display=‘inline‘;        this.disabled = true;        imgtime=setInterval(showimg, 200);    }script</body</html>
时间: 2024-10-10 10:39:02

图片逐渐由看不见到模糊,最后清晰显示;鼠标点击图片后,图片依照1、2、3、4顺序依次循环显示;鼠标移入图片区域,图片放大的相关文章

Android打开图库中图片为什么从模糊变清晰

1. 有一点要明确,图片要进行显示,首先要先将图片进行decode,然后才能显示 2. 图片decode需要时间,越大的图片,细节越多的图片,那么它decode时间就越长 3. 最笨的做法就是,等图片decode完了,我们再显示,在decode完之前就看到黑色的背景.但 这样的做法不太友好,尤其是大的图片的时候,等待的时间就越长 为了给客户更好的用户体验,我们会先decode一张图片的thumbnail即缩略图, 当我们点击一张 图片进来之后,我们首先看到的是这个图片的thumbnail,这样用

实现图片加载从模糊到清晰显示的方法

1.通过代码控制 QQ相册最近做的一些优化方法解决了上诉两个方法的缺点和满足了用户查看照片的需求:第一时间看到照片大概情况和尽可能快的看到清晰的原图.该方法使用缩略图和原图同时加载并叠加显示,先加载缩略图并拉大显示,大图叠加在缩略图上面同时加载.缩略图很小通常很快就能给用户看到照片模糊的效果,大图加载过程中从上往下逐步覆盖缩略图,这样用户就可以看到加载过程中的大图. 如上如所示,本方法的处理步骤是:1).获取照片缩略图和原图的URL,获取照片的长和宽:2).加载并显示照片缩略图,将缩略图按照片的

万彩动画大师给图片添加倒影、阴影、模糊等装修效果

给图片添加倒影.阴影或者模糊等装修效果,可以提高动画视频的艺术感和专业感. 1. 给图片添加倒影的装修效果 单击选中图片,在右边属性栏中找到[样式],点击[样式]里面的滚动条,滑到[倒影]的样式,选择其中一个倒影效果的样式即可,如下图所示: 2. 给图片添加阴影的装修效果 鼠标单击选中图片,在画布的右边属性栏中找到并点击[装修效果],弹出[装修效果]小窗体,然后点击[效果],设置阴影前记得先钩选中[应用阴影],然后就可以设置阴影了,最后点击[确定],如下图所示: 3. 给图片添加模糊的装修效果

网站优化之路---图片优化,图片从模糊到清晰

前言 作为一个有追求有信仰的程序员,做一个网站绝不是仅仅能用就行了,当我们实现功能后,或者在写代码的过程中就要考虑怎么去优化,一个网站要去优化,作为前端要考虑的是资源优化(减少 http 请求啊,固定图片压缩啊,精灵图合并啊,或者使用图标字体啊),安全问题(代码压缩丑化,存储 cookie 或者storage 时候加密啊),还有性能优化,资源优化的重中之重就是图片的优化,加载图片是很耗费资源的.正常情况下,当图片没有加载过来的时候,如果没有外层标签限制高度,会没有图片的位置,图片资源加载过来之后

CSS鼠标点击式变化图片透明度

今天分享前端代码主题:jequery控制css图片透明度 很多时候在网站图片处理上需要实现一些辅助效果,比如鼠标在图片上滑动时或点击时改变图片颜色(变灰或者其他),其实一个简单的办法就是改变图片css透明度属性. 如何改变呢?一种是纯css,一种使用jquery或者javascript代码控制.第一种使用:hover伪类选择器,本示例使用第二种. 先看最后效果: 第一步:放置图片 <ul id="test">        <li>            <

循环播放一张图片,如果图片大小小于屏幕,继续使用该图片进行填充

场景: 需要做出来的效果差不多如标题所述,即如果屏幕宽度为720,而图片的宽度只有150,现在需要从中间开始,往两边移动该图片, 我们现在以往右边移动为例,如果往右移动了150,此时绘制了一整个完整图形,继续移动,此时不仅要从中间绘制出新的图形,已经绘制的完整图形也得向右移动.进而达到动画的效果. 分析: 为了达到上面的效果,最开始想到的是使用动画,但是发现: 1)如果选择平移动画,只能移动图片,不会保留之前图片走过的路径,这样的话背景图就不会出现连续的情况,而只是有单张图,并不是这里想要的.

js可视区域图片懒加载

可视区域图片懒加载 实现原理,页面滚动时获取需要懒加载的图片,判断此图片是否在可视区域内,是则设置图片data-src地址为src地址,加载图片. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jquery可视区域图片懒加载</title> <script src="http://libs.baidu.com/jquery/2

鼠标点击出现爱心+社会主义价值观+随机颜色的文字+鼠标cursor自定义图片

js动画--鼠标点击出现爱心 只需将如下JS代码放到</body>之前就好了 <script type='text/javascript' src='//api.dujin.org/js/aixintexiao.js'></script> 完整代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

[读码时间] 图片列表:鼠标移入/移出改变图片透明度

说明:代码来自网络.注释为笔者学习时添加. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>图片列表:鼠标移入/移出改变图片透明度</title> <style> ul,li{ /*去除内外边距,去除列表默认样式*/ margin:0; padding:0; list-style-type:none; } #imgList{ /