【原生javascript-图片弹窗交互效果】的更多相关文章

原生javascript-图片弹窗交互效果

本人的第一个原生js插件 - picLightBox 在线例子:http://lgy.1zwq.com/photoBox/ [一]用var 声明多个变量,比每个变量都用var快多了 var sScrollTop = document.body.scrollTop || document.documentElement.scrollTop, sWindow_h = document.documentElement.clientHeight, t_h = parseInt(this.getCss(t…

javascript - 图片的幻灯片效果

javascript 代码: <script type="text/javascript"> function select_play() { var select_play_box = document.getElementById("select_play_box"); var aUl = select_play_box.getElementsByTagName("ul"); var aImg = aUl[0].getElemen…

原生 JavaScript 图片裁剪效果

图片裁剪程序效果如下,可鼠标操作.   拖动左边小方框时在右侧实时显示对应的裁剪图片,同时左侧的拖动框里图片完全显示,拖动框外部图片模糊显示.8个控制点可以对显示区域大小进行控制. HTML 和 CSS 部分 左侧的裁剪操作区域可以分为三层. 最底层的图片半透明效果:中间层的图片只显示制定区域,其他部分隐藏:最上层为拖拽控制层.最低层和中间层使用同一张图片,利用CSS属性clip控制中间层只显示一部分. 三个层都使用 absolute 绝对定位.下面是 HTML 和 CSS 代码. <div i…

《JavaScript 实战》：JavaScript 图片滑动切换效果

看到alibaba的一个图片切换效果,感觉不错,想拿来用用.但代码一大堆的,看着昏,还是自己来吧.由于有了做图片滑动展示效果的经验,做这个就容易得多了. 效果预览 仿淘宝/alibaba图片切换: 默认缓动 方式1 方式2 程序说明 原理就是通过不断设置滑动对象的left(水平切换)和top(垂直切换)来实现图片切换的动态效果. 首先需要一个容器,程序会自动设置容器overflow为hidden,如果不是相对或绝对定位会同时设置position为relative, 滑动对象会设置为绝对定位: v…

javascript 图片淡入淡出效果 实例源代码

代码说明:把代码粘贴好之后,需要更改html代码中的图片路径,即可执行成功.后面还有对js代码的详细说明,希望大家好好消化,好好理解. html源代码: <head> <title>图片切换</title> <script type="text/javascript" src="图片切换.js"></script> <link rel="stylesheet" type="…

javascript图片切换

JavaScript 图片滑动切换效果 作者:cloudgamer 时间: 2009-09-25 文档类型:原创 来自:蓝色理想 第 1 页 JavaScript 图片滑动切换效果 [1] 第 2 页 JavaScript 图片滑动切换效果 [2] 序一(08/07/06)看到 alibaba 的一个图片切换效果,感觉不错,想拿来用用.但代码一大堆的,看着昏,还是自己来吧.由于有了做 图片滑动展示效果 的经验,做这个就容易得多了. 序二(09/03/19)自写了 Tween缓动 之后就很想重新写…

javascript学习-原生javascript的小特效（多个运动效果整理）

以下代码就不详细解析了,在我之前的多个运动效果中已经解析好多次了,重复的地方这里就不说明了,有兴趣的童鞋可以去看看之前的文章<原生javascript的小特效> <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css&…

原生javascript写的侧栏跟随效果

浏览网站时经常看到有的网站上,当一个页面很长的时候,设定侧栏内容会跟随滚动条滚动,我们把这种效果叫做“侧栏跟随滚动”.这种特效对提高网站浏览量.文章点击率.广告点击量都有一定效果. 侧栏跟随滚动的实现方法有很多种,比较常见的有两种,这两种方法在NEOEASE写的一篇文章中介绍的很清楚,一种是借助jQuery来实现,这种方法对于那些平时不需要加载jQuery库的网站来说,显然是一种负担(jQuery现在是越做越大了……).另外一种方法是通过原生javascript编写的效果,这种方法相比上一种,要…

超实用的JavaScript代码段 Item3 --图片轮播效果

图片轮播效果 图片尺寸 统一设置成:490*170px; 一.页面加载.获取整个容器.所有放数字索引的li及放图片列表的ul.定义放定时器的变量.存放当前索引的变量index 二.添加定时器,每隔2秒钟index递增一次.调用一次切换图片函数 提示: 1. index不能一直无限制的递增下去,需做判断 2.调用切换图片函数时需将递增之后的index作为参数传过去 三.定义图片切换函数 提示: 1.遍历所有放数字索引的li,将每个li上的类去掉. 2.根据传递过来的index值找到对应的li给它添…

【javascript/css】Javascript+Css实现图片滑动浏览效果

今天用js+css来做一个能够左右滑动的图片浏览效果. 首先写一个结构,包括需要浏览的两张图,以及能够点击来滑动图片的两个按钮. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script type="text/javascript" sr…