【JS图片灯箱(lightBox)效果基本原理和demo】的更多相关文章

JS图片灯箱(lightBox)效果基本原理和demo

到年底了,项目不怎么忙,所以有空特地研究了下KISSY中源码JS灯箱效果,感觉代码比较简单,所以就按照他们的思路依赖于Jquery框架也封装了一个,特地分享给大家,以前经常看到网上很多这样的插件,感觉很多人很牛逼的样子,这样的效果也能做出来,碰巧今天自己也能研究出来一个,代码也不多,就300多行代码,嘿嘿!如果写的不够好,或者还不够的,希望大家多多指教!或者多多发表意见,那些需要值得改进的地方!共同学习! 基本原理 点击缩略图浮层显示大图,可点击键盘←.→键切换图片,也可以鼠标点击左右箭头切换.…

js图片轮播效果实现代码

首先给大家看一看js图片轮播效果,如下图 具体思路: 一.页面加载.获取整个容器.所有放数字索引的li及放图片列表的ul.定义放定时器的变量.存放当前索引的变量index 二.添加定时器,每隔2秒钟index递增一次.调用一次切换图片函数 提示: 1. index不能一直无限制的递增下去,需做判断,当大于或者等于当前图片数的时候就index归0,重新开始再次循环 2.调用切换图片函数时需将递增之后的index作为参数传过去 三.定义图片切换函数 提示:   1.遍历所有放数字索引的li,将每个l…

Jquery+ajax+json+servlet原理和Demo

Jquery+ajax+json+servlet原理和Demo 大致过程: 用户时间点击,触发js,设置$.ajax,开始请求.服务器响应,获取ajax传递的值,然后处理.以JSON格式返回给ajax.ajax在sucess对应的函数中将返回的json数据进行解析,然后输出到jsp页面. 1.前台index.jsp <%@ page language="java" import="java.util.*" pageEncoding="UTF-8&qu…

js图片瀑布流效果

要实现图片瀑布流效果,首先得准备几张图片. html的部分比较简单就是将图片加载到浏览器就可以了 代码如下(注意放的图片多一点要不然之后无法滑动鼠标就无法达到瀑布流效果): <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>pool</title> <link rel="stylesheet…

js鼠标移入移出效果【原】

<HTML> <HEAD> <!-- meta 解释 : http://www.haorooms.com/post/html_meta_ds --> <meta http-equiv="content-Type"content="text/html;charset=utf-8"> <TITLE>js鼠标移入移出效果</TITLE> <style> *{ margin:2;paddin…

js图片加载效果（延迟加载+瀑布流加载）

概述 两种图片加载的效果:一种是遇到图片较多时,带读条效果的加载提示:另一种是根据滑块的位置进行预加载,用户不察觉的情况下,实现瀑布流的加载效果 详细 代码下载:http://www.demodashi.com/demo/10656.html 主要做了两种图片加载的效果 一种是遇到页面图片比较多的时候,带读条效果的加载提示(为了验证正确加载,设置了1秒钟的加载间隔时间) 另外一种是根据滑块的位置进行图片的预加载,在用户不察觉的情况下,实现瀑布流的加载效果 一.延迟加载 1.需要准备什么环境 2.…

js图片放大境效果

放大境效果如下图所示,当鼠标放到小图时,就会出现浅黄色的小块,而右边方框也出现了,并且右边方框的内容时根据浅黄色小块的内容变换而变换: 原理: 1,准备2张图,一大一小,如上图所示,小图的盒子div1放小图,大图的盒子div2放大图,  div2一定要小于大图,假设oSapn在oDiv中距离左边的距离(L) ,即oSapn在oDiv中距离上边的距离(T) 2.计算浅黄色的小块(span)在小图中的移动比例,然后把比例赋给大图即可 向左的移动比例为:   L / (div1.offsetWidth…

js图片跑马灯效果

<style. type="text/css">body{margin:0px auto; padding:0px;}ul,li{margin:0px; padding:0px;list-style.:none;}.sqBorder {width:122px; height:182px; padding:10px; border:1px #000000 solid; background:#555555;}.scroll_div {width:122px; height:1…

js 图片瀑布流效果实现

/** * Created by wwtliu on 14/9/5. */$(document).ready(function(){ $(window).on("load",function(){ imgLocation(); var dataImg = {"data":[{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.j…

js图片轮播效果常见的产品无缝轮播

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body> <style…