JS感应鼠标的图片上下滑动展示效果

<!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=gb2312" />
    <title>JS感应鼠标的图片上下滑动展示效果丨沧州羊角脆批发</title>
    <script type="text/javascript">
    var $ = function (id) {
    return "string" == typeof id ? document.getElementById(id) : id;
    };
    function Event(e){
    var oEvent = document.all ? window.event : e;
    if (document.all) {
    if(oEvent.type == "mouseout") {
    oEvent.relatedTarget = oEvent.toElement;
    }else if(oEvent.type == "mouseover") {
    oEvent.relatedTarget = oEvent.fromElement;
    }
    }
    return oEvent;
    }
    function addEventHandler(oTarget, sEventType, fnHandler) {
    if (oTarget.addEventListener) {
    oTarget.addEventListener(sEventType, fnHandler, false);
    } else if (oTarget.attachEvent) {
    oTarget.attachEvent("on" + sEventType, fnHandler);
    } else {
    oTarget["on" + sEventType] = fnHandler;
    }
    };
    var Class = {
    create: function() {
    return function() {
    this.initialize.apply(this, arguments);
    }
    }
    }
    Object.extend = function(destination, source) {
    for (var property in source) {
    destination[property] = source[property];
    }
    return destination;
    }
    var GlideView = Class.create();
    GlideView.prototype = {
    //容器对象 容器宽度 展示标签 展示宽度
    initialize: function(obj, iHeight, sTag, iMaxHeight, options) {
    var oContainer = $(obj), oThis=this, len = 0;
    this.SetOptions(options);
    this.Step = Math.abs(this.options.Step);
    this.Time = Math.abs(this.options.Time);
    this._list = oContainer.getElementsByTagName(sTag);
    len = this._list.length;
    this._count = len;
    this._height = parseInt(iHeight / len);
    this._height_max = parseInt(iMaxHeight);
    this._height_min = parseInt((iHeight - this._height_max) / (len - 1));
    this._timer = null;
    this.Each(function(oList, oText, i){
    oList._target = this._height * i;//自定义一个属性放目标left
    oList.style.top = oList._target + "px";
    oList.style.position = "absolute";
    addEventHandler(oList, "mouseover", function(){ oThis.Set.call(oThis, i); });
    })
    //容器样式设置
    oContainer.style.height = iHeight + "px";
    oContainer.style.overflow = "hidden";
    oContainer.style.position = "relative";
    //移出容器时返回默认状态
    addEventHandler(oContainer, "mouseout", function(e){
    //变通防止执行oList的mouseout
    var o = Event(e).relatedTarget;
    if (oContainer.contains ? !oContainer.contains(o) : oContainer != o && !(oContainer.compareDocumentPosition(o) & 16)) oThis.Set.call(oThis, -1);
    })
    },
    //设置默认属性
    SetOptions: function(options) {
    this.options = {//默认值
    Step:20,//滑动变化率
    Time:3,//滑动延时
    TextTag:"",//说明容器tag
    TextHeight: 0//说明容器高度
    };
    Object.extend(this.options, options || {});
    },
    //相关设置
    Set: function(index) {
    if (index < 0) {
    //鼠标移出容器返回默认状态
    this.Each(function(oList, oText, i){ oList._target = this._height * i; if(oText){ oText._target = this._height_text; } })
    } else {
    //鼠标移到某个滑动对象上
    this.Each(function(oList, oText, i){
    oList._target = (i <= index) ? this._height_min * i : this._height_min * (i - 1) + this._height_max;
    if(oText){ oText._target = (i == index) ? 0 : this._height_text; }
    })
    }
    this.Move();
    },
    //移动
    Move: function() {
    clearTimeout(this._timer);
    var bFinish = true;//是否全部到达目标地址
    this.Each(function(oList, oText, i){
    var iNow = parseInt(oList.style.top), iStep = this.GetStep(oList._target, iNow);
    if (iStep != 0) { bFinish = false; oList.style.top = (iNow + iStep) + "px"; }
    })
    //未到达目标继续移动
    if (!bFinish) { var oThis = this; this._timer = setTimeout(function(){ oThis.Move(); }, this.Time); }
    },
    //获取步长
    GetStep: function(iTarget, iNow) {
    var iStep = (iTarget - iNow) / this.Step;
    if (iStep == 0) return 0;
    if (Math.abs(iStep) < 1) return (iStep > 0 ? 1 : -1);
    return iStep;
    },
    Each:function(fun) {
    for (var i = 0; i < this._count; i++)
    fun.call(this, this._list[i], (this.Showtext ? this._text[i] : null), i);
    }
    };
    </script>
    <style type="text/css">
    #idGlideView {
    height:260px;
    width:320px;
    margin:0 auto;
    }
    #idGlideView div {
    width:320px;
    height:260px;
    }
    </style>
    </head>
    <body>
    <div id="idGlideView">
    <div style="background-color:#006699;"><img src="/images/m01.jpg"></div>
    <div style="background-color:#FF9933;"><img src="/images/m03.jpg"></div>
    </div>
    <SCRIPT>
    var gv = new GlideView("idGlideView", 314, "div", 240,"");
    </SCRIPT>
    </body>
    </html>
    <br><br><hr>
    
时间: 2024-10-14 10:18:45

JS感应鼠标的图片上下滑动展示效果的相关文章

CSS+JS感应鼠标展开的的二级下拉菜单

<!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> <title>CSS+JS感应鼠标展开的的二级下拉菜单丨

一款JS感应鼠标横向左右切换的焦点图切换效果

<!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-

CSS实现DIV感应鼠标Hover时的显示隐藏效果

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS实现DIV感应鼠标Hover时的显示隐藏效果</title> <style> .wrap{} .wrap .box{border:2px solid red;width:200px;height:200px;float:left;margi

炫酷CSS3鼠标hover图片缩放和标题效果

这是一款使用纯CSS3制作的效果非常炫酷的鼠标滑过图片缩放和标题效果.该CSS3图片效果中图片的边框被制作为不停动画的护栏效果,当用鼠标滑过图片时,图片会有非常炫酷的动画效果. CSS3 animations是一个非常神奇的技术,相比于javascript和flash,它只用少量的代码就可以制作出平滑的动画效果.现在,所有的现代浏览器,包括IE9都支持CSS3 transitions 和 animations. 在线演示:http://www.htmleaf.com/Demo/201502081

Flexslider图片轮播、文字图片相结合滑动切换效果

Flexslider是一款基于的jQuery内容滚动插件.它能让你轻松的创建内容滚动的效果,具有非常高的可定制性.开发者可以使用Flexslider轻松创建各种图片轮播效果.焦点图效果.图文混排滚动效果. Flexslider具有以下特性: 支持滑动和淡入淡出效果. 支持水平.垂直方向滑动. 支持键盘方向键控制. 支持触控滑动. 支持图文混排,支持各种html元素. 自适应屏幕尺寸. 可控制滑动单元个数. 更多选项设置和回调函数. HTML 首先在页面head部位载入jquery库文件和Flex

Flexslider插件实现图片轮播、文字图片相结合滑动切换效果

插件下载: 点击下载 密码: fbeg Flexslider具有以下特性: 支持滑动和淡入淡出效果. 支持水平.垂直方向滑动. 支持键盘方向键控制. 支持触控滑动. 支持图文混排,支持各种html元素. 自适应屏幕尺寸. 可控制滑动单元个数. 更多选项设置和回调函数. HTML代码: <link rel="stylesheet" type="text/css" href="flexslider.css" /> <script t

Flexslider图片轮播文字图片相结合滑动切换效果

Flexslider是一款基于的jQuery内容滚动插件.它能让你轻松的创建内容滚动的效果,具有非常高的可定制性.开发者可以使用Flexslider轻松创建各种图片轮播效果.焦点图效果.图文混排滚动效果. Flexslider具有以下特性: 支持滑动和淡入淡出效果. 支持水平.垂直方向滑动. 支持键盘方向键控制. 支持触控滑动. 支持图文混排,支持各种html元素. 自适应屏幕尺寸. 可控制滑动单元个数. 更多选项设置和回调函数. 在线演示一 在线演示二 在线演示三 在线演示四 源码下载 Fle

jQuery实现鼠标经过图片预览大图效果

jQuery:是一种客户端的技术,它的诞生的理由是:write less,do more(写更少的代码,做更多的事情). 因此,我们可以借助jQuery来实现一些很酷炫的效果,相比于javaScript来说,同样的效果,但是很简单的代码.jQuery中的核心知识点就是选择器的使用,选择器的内容我会在之后的博客中总结,希望大家去看下,学好了选择我器,相当于完全掌握了jQuery. 这篇博文是实现怎么通过jQuery实现我们在购物网站中常见的:当鼠标经过了图片数,图片会放大进行预览大图.接下来我就粘

JS写四个图片滚动显示的效果

<!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-