CSS之动态相册

注释还是比较详细的，所以我就不一一再说明了。--->运行效果图<--- （点击之前温馨提示一下：此picture是我自己的照片，本来不想拿出来的，后来觉得反正不会有很多人看到而且也没人认识我所以厚着脸皮还是摊了出来）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>AWFIDP</title>

<style type="text/css">

    html {

        overflow: hidden;

    }

    body {

        margin: 0px;

        padding: 0px;

        background: #000;

        position: absolute;

        width: 100%;

        height: 100%;

        cursor: crosshair;

    }

    #diapoContainer {

        position: absolute;

        left: 10%;

        top: 10%;

        width: 80%;

        height: 80%;

        background: #222;

    }

    .imgDC {

        position: absolute;

        cursor: pointer;

        border: #000 solid 2px;

        /* ==== 设置过滤器的透明度 ==== */

        filter: alpha(opacity=50);

        opacity: 0.9;

    }

    .spaDC {

        position: absolute;

        filter: alpha(opacity=20);

        opacity: 0.2;

        background: #000;

        visibility: hidden;

    }

    .imgsrc {

        position: absolute;

        width: 300px;

        height: 350px;

        visibility: hidden;

        margin: 4%;

    }

    #bkgcaption {

        position: absolute;

        bottom: 0px;

        left: 0px;

        width: 100%;

        height: 6%;

        background:#1a1a1a;

    }

    #caption {

        position: absolute;

        font-family: arial, helvetica, verdana, sans-serif;

        white-space: nowrap;

        color: #fff;

        bottom: 0px;

        width: 100%;

        left: -10000px;

        text-align: center;

    }

</style>

<script type="text/javascript">

var xm;

var ym;

/* ==== 鼠标移动事件方法 ==== */

document.onmousemove = function(e){

    if(window.event) e=window.event;

    xm = (e.x || e.clientX);

    ym = (e.y || e.clientY);

}

/* ====调整窗口大小==== */

function resize() {

    if(diapo)diapo.resize();

}

onresize = resize;

/* ==== 不透明度 ==== */

setOpacity = function(o, alpha){

    if(o.filters)o.filters.alpha.opacity = alpha * 100; else o.style.opacity = alpha;

}

/* ===== 封装脚本 ==== */

diapo = {

    O : [],

    DC : 0,

    img : 0,

    txt : 0,

    N : 0,

    xm : 0,

    ym : 0,

    nx : 0,

    ny : 0,

    nw : 0,

    nh : 0,

    rs : 0,

    rsB : 0,

    zo : 0,

    tx_pos : 0,

    tx_var : 0,

    tx_target : 0,

    /* ==== 脚本属性 ==== */

    attraction : 2,

    acceleration : .9,

    dampening : .1,

    zoomOver : 2,

    zoomClick : 6,

    transparency : .8,

    font_size: 18,

    /* ==== 使用Diapo调整大小 ==== */

    resize : function(){

        with(this){

            nx = DC.offsetLeft;

            ny = DC.offsetTop;

            nw = DC.offsetWidth;

            nh = DC.offsetHeight;

            txt.style.fontSize = Math.round(nh / font_size) + "px";

            if(Math.abs(rs-rsB)<100) for(var i=0; i<N; i++) O[i].resize();

            rsB = rs;

        }

    },

    /* ==== 加载jQuery插件Diapo ==== */

    CDiapo : function(o){

        /* ==== 输入变量 ==== */

        this.o        = o;

        this.x_pos    = this.y_pos    = 0;

        this.x_origin = this.y_origin = 0;

        this.x_var    = this.y_var    = 0;

        this.x_target = this.y_target = 0;

        this.w_pos    = this.h_pos    = 0;

        this.w_origin = this.h_origin = 0;

        this.w_var    = this.h_var    = 0;

        this.w_target = this.h_target = 0;

        this.over     = false;

        this.click    = false;

        /* ==== 创造"影子" ==== */

        this.spa = document.createElement("span");

        this.spa.className = "spaDC";

        diapo.DC.appendChild(this.spa);

        /* ==== 创建小图片 ==== */

        this.img = document.createElement("img");

        this.img.className = "imgDC";

        this.img.src = o.src;

        this.img.O = this;

        diapo.DC.appendChild(this.img);

        setOpacity(this.img, diapo.transparency);

        /* ====鼠标事件 ==== */

        this.img.onselectstart = new Function("return false;");

        this.img.ondrag = new Function("return false;");

        this.img.onmouseover = function(){

            diapo.tx_target=0;

            diapo.txt.innerHTML=this.O.o.alt;

            this.O.over=true;

            setOpacity(this,this.O.click?diapo.transparency:1);

        }

        this.img.onmouseout = function(){

            diapo.tx_target=-diapo.nw;

            this.O.over=false;

            setOpacity(this,diapo.transparency);

        }

        this.img.onclick = function() {

            if(!this.O.click){

                if(diapo.zo && diapo.zo != this) diapo.zo.onclick();

                this.O.click = true;

                this.O.x_origin = (diapo.nw - (this.O.w_origin * diapo.zoomClick)) / 2;

                this.O.y_origin = (diapo.nh - (this.O.h_origin * diapo.zoomClick)) / 2;

                diapo.zo = this;

                setOpacity(this,diapo.transparency);

            } else {

                this.O.click = false;

                this.O.over = false;

                this.O.resize();

                diapo.zo = 0;

            }

        }

        /* ==== 调整图片位置 ==== */

        this.resize = function (){

            with (this) {

                x_origin = o.offsetLeft;

                y_origin = o.offsetTop;

                w_origin = o.offsetWidth;

                h_origin = o.offsetHeight;

            }

        }

        /* ==== 动画方法 ==== */

        this.position = function (){

            with (this) {

                /* ==== 设置目标位置 ==== */

                w_target = w_origin;

                h_target = h_origin;

                if(over){

                    /* ====鼠标结束时 ==== */

                    w_target = w_origin * diapo.zoomOver;

                    h_target = h_origin * diapo.zoomOver;

                    x_target = diapo.xm - w_pos / 2 - (diapo.xm - (x_origin + w_pos / 2)) / (diapo.attraction*(click?10:1));

                    y_target = diapo.ym - h_pos / 2 - (diapo.ym - (y_origin + h_pos / 2)) / (diapo.attraction*(click?10:1));

                } else {

                    /* ==== 鼠标完成时 ==== */

                    x_target = x_origin;

                    y_target = y_origin;

                }

                if(click){

                    /* ==== 点击时 ==== */

                    w_target = w_origin * diapo.zoomClick;

                    h_target = h_origin * diapo.zoomClick;

                }

                /* ====  特效 ==== */

                x_pos += x_var = x_var * diapo.acceleration + (x_target - x_pos) * diapo.dampening;

                y_pos += y_var = y_var * diapo.acceleration + (y_target - y_pos) * diapo.dampening;

                w_pos += w_var = w_var * (diapo.acceleration * .5) + (w_target - w_pos) * (diapo.dampening * .5);

                h_pos += h_var = h_var * (diapo.acceleration * .5) + (h_target - h_pos) * (diapo.dampening * .5);

                diapo.rs += (Math.abs(x_var) + Math.abs(y_var));

                /* ==== 页面动画 ==== */

                with(img.style){

                    left   = Math.round(x_pos) + "px";

                    top    = Math.round(y_pos) + "px";

                    width  = Math.round(Math.max(0, w_pos)) + "px";

                    height = Math.round(Math.max(0, h_pos)) + "px";

                    zIndex = Math.round(w_pos);

                }

                with(spa.style){

                    left   = Math.round(x_pos + w_pos * .1) + "px";

                    top    = Math.round(y_pos + h_pos * .1) + "px";

                    width  = Math.round(Math.max(0, w_pos * 1.1)) + "px";

                    height = Math.round(Math.max(0, h_pos * 1.1)) + "px";

                    zIndex = Math.round(w_pos);

                }

            }

        }

    },

    /* ==== 主要循环 ==== */

    run : function(){

        diapo.xm = xm - diapo.nx;

        diapo.ym = ym - diapo.ny;

        /* ==== 动画标题 ==== */

        diapo.tx_pos += diapo.tx_var = diapo.tx_var * .9 + (diapo.tx_target - diapo.tx_pos) * .02;

        diapo.txt.style.left = Math.round(diapo.tx_pos) + "px";

        /* ==== anim图片 ==== */

        for(var i in diapo.O) diapo.O[i].position();

        /* ==== 循环 ==== */

        setTimeout("diapo.run();", 16);

    },

    /* ==== 图片装载 ==== */

    images_load : function(){

        // ===== 所有图片装载完成停止循环 =====

        var M = 0;

        for(var i=0; i<diapo.N; i++) {

            if(diapo.img[i].complete) {

                diapo.img[i].style.position = "relative";

                diapo.O[i].img.style.visibility = "visible";

                diapo.O[i].spa.style.visibility = "visible";

                M++;

            }

            resize();

        }

        if(M<diapo.N) setTimeout("diapo.images_load();", 8);

    },

    /* ==== 初始化方法==== */

    init : function() {

        diapo.DC = document.getElementById("diapoContainer");

        diapo.img = diapo.DC.getElementsByTagName("img");

        diapo.txt = document.getElementById("caption");

        diapo.N = diapo.img.length;

        for(i=0; i<diapo.N; i++) diapo.O.push(new diapo.CDiapo(diapo.img[i]));

        diapo.resize();

        diapo.tx_pos = -diapo.nw;

        diapo.tx_target = -diapo.nw;

        diapo.images_load();

        diapo.run();

    }

}

</script>

</head>

<body>

<div id="diapoContainer">

    <img class="imgsrc" src="img/1.jpg" alt="">

    <img class="imgsrc" src="img/2.jpg" alt="">

    <img class="imgsrc" src="img/3.jpg" alt="">

    <div id="bkgcaption"></div>

    <div id="caption"></div>

</div>

<script type="text/javascript">

/* ==== 开始脚本 ==== */

function dom_onload() {

    if(document.getElementById("diapoContainer")) diapo.init(); else setTimeout("dom_onload();", 8);

}

dom_onload();

</script>

</div>

</body>

</html>

点击查看我做的效果图：

点击这里，感觉好尴尬啊

CSS之动态相册的更多相关文章

如何利用腾讯云COS为静态博客添加动态相册
前言本文首发于个人网站Jianger's Blog,欢迎访问订阅.个人博客小站刚建站不久,想着除了主题里的功能外再添加上相册模块,于是半搜索半摸索把相册模块搞出来了,最后采用了利用腾讯云对象存储作图 ...
轻量的、可自定义 CSS 的 Lightbox 相册插件
jQuery LightGallery是一个轻量级的,可定制的,模块化的,响应式的 jQuery 相册插件.它采用 CSS 来实现图像和视频的大小调整.因此,这将是非常灵活的,并且比使用 JavaSc ...
ASP.NET MVC 4 Optimization的JS/CSS文件动态合并及压缩
JS/CSS文件的打包合并(Bundling)及压缩(Minification)是指将多个JS或CSS文件打包合并成一个文件,并在网站发布之后进行压缩,从而减少HTTP请求次数,提高网络加载速度和页面 ...
css实现动态阴影、蚀刻文本、渐变文本
css实现动态阴影创建与类似的阴影box-shadow 而是基于元素本身的颜色. 代码实现: <div class="dynamic-shadow-parent"> ...
有趣的纯CSS实现动态晴阴雨雪
我们先来看看实现的效果吧非常的美腻,对吧.这个是纯css,且单标签实现的哦~ 先贴完整代码,我们再来看看这个里面究竟有什么可以借鉴的知识点 <!DOCTYPE html> <htm ...
CSS 之动态变换背景颜色
先上效果图 HTML代码: 123456789 <div class="header"> <h1>GCCHRN'S BLOG</h1> < ...
使用 jQuery 基本选择器获取页面元素，然后利用 jQuery 对象的 css() 方法动态设置＜span＞和＜a＞标签的样式
查看本章节查看作业目录需求说明: 使用 jQuery 基本选择器获取页面元素,然后利用 jQuery 对象的 css() 方法动态设置 <span> 和 <a> 标签的样式 ...
css做旋转相册效果
css做旋转相册效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...
CSS写动态下拉菜单 -----2017-03-27
动态网站第一步:动态下拉菜单关键点: overflow:hidden max-height xx:hover {} 设置当鼠标移上之后的效果 transition: 设置过度时间 cursor: ...

随机推荐

Oracle数据库使用Analyze提升sql性能
Oracle数据库使用Analyze提升sql性能如果你不使用analyze完成sql优化,将意味着:你拒绝使用数据库的查询优化器,也失去了使用优化连接的机会.假设你创建了一张拥有100万条记录的临 ...
Java源码之String
本文出自:http://blog.csdn.net/dt235201314/article/details/78330377 一丶概述还记得那会的“Hello World”,第一个程序,输出的Str ...
ehcache.xml配置详解
一:配置文件案例 <ehcache>  ...
阿里云RDS上的一些概念性记录
刚接触RDS,只能对RDS上的一些特性做一些笔记,方便记忆,以下为RDS上的内容摘录,取自官方文档 1 数据备份可使用命令行或图形界面进行逻辑数据备份.仅限通过 RDS 管理控制台或 OPEN A ...
Android系统移植与调试之------->build.prop生成过程分析
本文简要分析一下build.prop是如何生成的.Android的build.prop文件是在Android编译时刻收集的各种property(LCD density/语言/编译时间, etc.),编 ...
Oracle学习笔记—oracle体系架构及状态（nomount、mount和open）简介
oracle体系架构简介先来简要了解一下Oracle数据库体系架构以便于后面深入理解,Oracle Server主要由实例(instance)和数据库(database)组成.实例(instance ...
(扫盲)C#中out和ref之间的区别
首先:两者都是按地址传递的,使用后都将改变原来参数的数值. 其次:ref可以把参数的数值传递进函数,但是out是要把参数清空,就是说你无法把一个数值从out传递进去的,out进去后,参数的数值为空,所 ...
【WEB】前段优化
模块化管理: sea.js, require.js 压缩:r.js gulp.js, grunt.js 加速:cdn
python常用模块——sys模块
sys模块的功能很多,下面介绍几个常用的模块. 1.sys.argv:从外部向程序内部传递参数 #!/usr/bin/env python import sys print(sys.argv[0]) ...
号码字符串与BCD编码互转 c#
/// <summary> /// 把号码用BCD进行压缩编码. /// </summary> /// <param name= ...

CSS之动态相册

CSS之动态相册的更多相关文章

随机推荐

热门专题