#asc

JavaScript实现判断图片是否加载完成的3种方法整理

 有时候我们在前端开发工作中为了获取图片的信息,需要在图片加载完成后才可以正确的获取到图片的大小尺寸,并且执行相应的回调函数使图片产生某种显示效果。本文主要整理了几种常见的javascipt判断图片加载完成时的方法,并通过代码与实际应用相结合进行解释与说明。onload方法通过向img标签添加onload属性...

JavaScript之图片操作7

 前面总结了很多了有关于图片操作的案例,本次是基于前面的基础,做一个综合的图片轮播效果,需要实现以下功能:没有任何操作时,图片自动轮播鼠标悬浮时,图片停止轮播;当鼠标移开,轮播继续鼠标悬浮时,出现左右切换按钮,可点击按钮进行左右切换点击地下的小按钮进行切换为了实现上面的效果,我们需要有个大盒子来固定位置和大小...
代码星球 ·2021-01-26

JavaScript之图片操作6

上一篇写的关于放大镜的,可能在实际开发中用的不是很多,接下来将的图片无缝滚动在实际工作中就是用的比较多的了。如上图,通过定时器控制图片无缝滚动,当鼠标悬浮时停止滚动,鼠标离开,滚动继续。主要原理是通过定位实现图片的移动,然后通过定时器实现滚动的效果,即无缝滚动。首先是基础的结构<!DOCTYPEhtml>&...
代码星球 ·2021-01-26

JavaScript之图片操作5

本次的图片操作是要实现模仿天猫淘宝的放大镜效果,如下图所示:其实现原理其实很简单,主要就是定位的运用,在上面的图中,左边是一个div,它的大小就是左边图片的大小,我们称为左窗口(原图),红色部分我们称为放大镜,右边也是一个div,我们称为右窗口,在右窗口中有一个大图,要实现放大效果,就需要保证原图/放大镜=大图/右窗口...
代码星球 ·2021-01-26

JavaScript之图片操作4

本次要实现的效果是,在一个盒子里面有一张长图,只显示了一部分,为方便用户浏览,当鼠标移入时,图片开始滚动,将盒子分成上下两部分,当鼠标移入上部分时,图片向上滚动,当鼠标移入下部分时,图片向下滚动。为了实现上面的效果,我们需要在html中进行简单的布局:<divid="box"><imgid="pic"...
代码星球 ·2021-01-26

JavaScript之图片操作3

在页面布局中,常常会用到九宫格布局,如下图所示:本次我们就以九宫格为基础进行图片的布局操作,首先我们以上面的图片的为例,假设每个格子的大小都相同,将每一个格子相对其父元素进行定位,这样,我们只需要控制每个格子的left和top属性,就可以控制图片的位置了,例如上面序号为4的格子,其left属性值就是每个格子一倍的宽度值...
代码星球 ·2021-01-26

JavaScript之图片操作2

在前一次,我们实现最简单的图片切换效果,这一次,依旧还是图片切换,具体效果如下:通过点击下面的小图,上面的大图和标题随之切换。因此,我们需要三个容器分别放标题,大图和小图。<!--大图描述--><pid="des">蒲公英</p><!--大图展示--><imgid=...
代码星球 ·2021-01-26

JavaScript之图片操作1

在网页中,经常需要对图片经常各种操作,包括切换,轮播等等,接下来将总结一些常见的图片操作,首先是最简单前后切换。如上面所示,通过点击右边的按钮切换左边的图片,为了实现想要的效果,首先,我们需要在html中创建一个放照片的容器和两个切换的按钮。<imgid="icon"src="img/icon_01.png">"...
代码星球 ·2021-01-26

利用Javascript生成txt文本文件

<script type="text/javascript">  // 将字符串用txt的格式报存 ie中会出现中文乱码的问题  var saveAs = saveAs || (funct...

javascript templating

 I’vehadalittleutilitythatI’vebeenkickingaroundforsometimenowthatI’vefoundtobequiteusefulinmyJavaScriptapplication-buildingendeavors.It’sasuper-simpletempl...
代码星球 ·2021-01-23

JavaScript(九)---- 正则表达式

js中的正则表达式的规则和java中的一致。只是用法上存在差异。正则表达式的创建方式:     方式1:    varreg= /正则表达式/模式;      ...

JavaScript(八)---- 文档对象模型DOM

DOM:全称DocumentObjectModel,即文档对象模型。DOM描绘了一个层次化的树,允许开发人员添加、删除、修改页面的某一部分。浏览器在解析HTML页面标记的时候,其实不是按照一行一行读取并解析的,而是将HTML页面中的每一个标记按照顺序在内存中组建一颗DOM树,组建好之后,按照树的结构将页面显示在浏览器的...

JavaScript(七)---- 浏览器操作对象BOM

BOM:全称BrowserObjectModel,浏览器对象模型。JavaScript是由浏览器中内置的javascript脚本解释器程序来执行javascript脚本语言的。为了便于对浏览器的操作,javascript封装了对浏览器的各个对象使得开发者可以方便的操作浏览器。BOM中常用对象有: window ...

JavaScript(六)---- 原型prototype

“prototype”字面翻译是“原型”,是javascript实现继承的主要手段。粗略来说就是:prototype是javascript中的函数(function)的一个保留属性,并且它的值是一个对象(我们可以称这个对象为"prototype对象")。Prototype注意的细节:   ...

JavaScript(五)---- 基于对象的操作

常用对象为了便于操作基本类型值,ECMAScript提供了3个特殊的引用类型:Boolean,Number,String。它们是引用类型。当读取基本数据类型时,后台就会创建一个对应的基本包装类对象,所以我们在操作基本数据类型时,可以直接调用一些方法。1、String对象创建一个字符串的方式:方式1: &nbs...
首页上一页...1920212223...下一页尾页