相册集效果,animate实现鼠标放上去显示离开隐藏
分类:关于美高梅

复制代码 代码如下:

1、CSS样式:

//自己根据图片路径设置好,img/main/index.jpg 为主页显示的9张

setTimeout("document.getElementById('qq_dd').style.display='block'; ",5000);
// JavaScript Document
$(function(){
    if($.browser.msie&&$.browser.version=="6.0"&&$("html")[0].scrollHeight>$("html").height())
        $("html").css("overflowY","scroll");
        $("html").css("overflowX","hidden");
});
function right_down(){
document.writeln("<div id='qq_dd' class='foot_scroll' style='display:none;position:fixed; margin:3px;bottom:3px; right:5px;z-index:1000;_position:absolute; _top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));_bottom:auto;'><div id='my_img' style='position:relative; *left:550px; width:214px; height:124px; font-size:12px; color:#1670eb; background:url(online_cn_fk.png) no-repeat;'><img src='closed_fk.jpg' style='float:right; cursor:pointer;' id='guanbi'onclick="_gaq.push(['_trackEvent', 'QQDD', 'Click', '关闭']);" /><a href='#'  target='_blank' style='display:block; margin:97px 0 0 100px; display:inline; float:left; color:#1670eb;'><img src='jieshou_fk.jpg' onclick="_gaq.push(['_trackEvent', 'QQDD', 'Click', '咨询']);"  border='0'/></a><span style='cursor:pointer; float:right; margin:74px 35px 0 0; display:inline;' id='guanbi0'><img src='jujue_fk.jpg' onclick="_gaq.push(['_trackEvent', 'QQDD', 'Click', '关闭']);" /></span></div></div>")
}
right_down();
$("#guanbi").click(function(){
$("#my_img").hide();
});
$("#guanbi0").click(function(){
$("#my_img").hide();
});
function rattleimage(){$("#my_img").animate({top:'+=3'},50);$("#my_img").animate({left:'+=3'},50);$("#my_img").animate({top:'-=3'},50);$("#my_img").animate({left:'-=3'},50);$("#my_img").animate({top:'+=3'},50);$("#my_img").animate({left:'+=3'},50);$("#my_img").animate({top:'-=3'},50);$("#my_img").animate({left:'-=3'},50);$("#my_img").animate({top:'+=3'},50);$("#my_img").animate({left:'+=3'},50);$("#my_img").animate({top:'-=3'},50);$("#my_img").animate({left:'-=3'},50);$("#my_img").animate({top:'+=3'},50);$("#my_img").animate({left:'+=3'},50);$("#my_img").animate({top:'-=3'},50);$("#my_img").animate({left:'-=3'},50);$("#my_img").animate({top:'+=3'},50);$("#my_img").animate({left:'+=3'},50);$("#my_img").animate({top:'-=3'},50); $("#my_img").animate({left:'-=3'},50);$("#my_img").fadeOut("slow");$('#my_img').fadeIn('slow');setTimeout("rattleimage()",10000);}
rattleimage();

复制代码 代码如下:

//img/show/index/index.jpg 分别为每一张主页后面现实的图片

您可能感兴趣的文章:

  • jQuery实现动态表单验证时文本框抖动效果完整实例
  • jQuery实现网页抖动的菜单抖动效果
  • jQuery+css3实现文字跟随鼠标的上下抖动
  • jQuery插件jRumble实现网页元素抖动
  • jQuery通过扩展实现抖动效果的方法
  • jquery果冻抖动效果实现方法
  • jquery.messager.js插件导致页面抖动的解决方法
  • 基于jquery的仿百度的鼠标移入图片抖动效果
  • jQuery模拟窗口抖动效果

@CHARSET "UTF-8";
* html .showbox,* html .overlay {
position: absolute;
top: expression(eval(document.documentElement.scrollTop) );
}
#AjaxLoading {
border: 1px solid #8CBEDA;
color: #37a;
font-size: 12px;
font-weight: bold;
}
#AjaxLoading div.loadingWord {
width: 180px;
height: 50px;
line-height: 50px;
border: 2px solid #D6E7F2;
background: #fff;
}
#AjaxLoading img {
margin: 10px 15px;
float: left;
display: inline;
}
.overlay {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 998;
width: 100%;
height: 100%;
_padding: 0 20px 0 0;
background: #f6f4f5;
display: none;
}
.showbox {
position: fixed;
top: 0;
left: 50%;
z-index: 9999;
opacity: 0;
filter: alpha(opacity = 0);
margin-left: -80px;
}

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html,body{
width: 100%;
height: 100%;
overflow: hidden;
}
ul li {
list-style: none;
}
#picture{
width: 100%;
height: 100%;
background: url(img/bg2.jpg)no-repeat;
overflow: hidden;
position: relative;
}
#list{
width: 750px;
height: 560px;
margin: 180px auto;
}
#list li{
width: 230px;
height: 159px;
border: 5px solid #fff;
float: left;
margin: 5px;
box-shadow: 0 0 20px #fff;
cursor: pointer;
}
#list li img{
width: 230px;
height: 159px;
display: block;
}
#cover{
width: 100%;
height: 100%;
background:rgba(0 , 0 , 0 , .8);
position: absolute;
top: 0;
left: 0;
display: none;
}
#bigPic{
display: none;
}
#bigList{
width: 650px;
height: 450px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -240px;
margin-left: -325px;
}
#bigList li{
width: 650px;
height: 450px;
position: absolute;
top: 0;
left: 0;
border: 5px solid #fff;
}
#bigList li img{
width: 650px;
height: 450px;
position: absolute;
top: 0;
left: 0;
}
#bigPic a{
text-decoration: none;
display: block;
width: 50px;
height: 70px;
font-size: 60px;
text-align: center;
line-height: 70px;
font-weight: bold;
color: #c5c5c5;
position: absolute;
top: 50%;
margin-top: -35px;
border-radius: 10px;
box-shadow: 0 0 10px #fff;
}
#left{
left: 100px;
}
#right{
right: 100px;
}
</style>
</head>
<body>
<div id="picture">
<ul id="list">
<li><img src="img/main/1.jpg"/></li>
<li><img src="img/main/2.jpg"/></li>
<li><img src="img/main/3.jpg"/></li>
<li><img src="img/main/4.jpg"/></li>
<li><img src="img/main/5.jpg"/></li>
<li><img src="img/main/6.jpg"/></li>
<li><img src="img/main/7.jpg"/></li>
<li><img src="img/main/8.jpg"/></li>
<li><img src="img/main/9.jpg"/></li>
</ul>
<div id="cover"></div>
<div id="bigPic">
<ul id="bigList">
<li><img src="img/show/0/1.jpg"/></li>
<li><img src="img/show/0/2.jpg"/></li>
<li><img src="img/show/0/3.jpg"/></li>
<li><img src="img/show/0/4.jpg"/></li>
<li><img src="img/show/0/5.jpg"/></li>
</ul>
<a href="###" id="left"><</a>
<a href="###" id="right">></a>
</div>
</div>
<script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
window.onload = function(){
var tab = new Tab();
tab.click();
tab.rightclick();
tab.leftclick();
tab.close();
}
function Tab(){
this.list = document.getElementById("list");
this.listLi = this.list.getElementsByTagName('li');
this.bigList = document.getElementById("bigList");
this.bigListLi = this.bigList.getElementsByTagName('li');
this.bigListImg = this.bigList.getElementsByTagName('img');
this.cover = document.getElementById('cover');
this.bigPic = document.getElementById("bigPic");
this.right = document.getElementById("right");
this.left = document.getElementById("left");
}
Tab.prototype.click = function(){
var This = this;
for (var i=0;i<this.listLi.length;i++) {
this.listLi[i].index = i;
this.listLi[i].onclick = function(){
$(This.cover).fadeIn(500)
$(This.bigPic).fadeIn(500)
for (var j=0;j<This.bigListLi.length;j++) {
This.bigListImg[j].src ='img/show/'+this.index+'/'+(j+1)+'.jpg';
};
}
}
}
Tab.prototype.rightclick = function(){
var This = this;
this.right.onclick = function(){
This.last = This.bigList.lastElementChild || This.bigList.lastChild;
$(This.last).animate({'left':'650px'},500,function(){
$(this).animate({'left':0},500)
This.bigList.insertBefore( this, This.bigListLi[0])
})
$(This.bigList).animate({'left':'40%'},500,function(){
$(this).animate({'left':'50%'},500)
})
}
}
Tab.prototype.leftclick = function(){
var This = this;
this.left.onclick = function(){
This.first = This.bigList.firstElementChild||This.bigList.firstChild;
$(This.first).animate({'left':'-650px'},500,function(){
$(this).animate({'left':0},500);
This.bigList.appendChild( this )
})
$(This.bigList).animate({'left':'60%'},500,function(){
$(this).animate({'left':'50%'},500)
})
}
}
Tab.prototype.close = function(){
var This = this;
this.cover.onclick = function(){
$(This.cover).fadeOut(500);
$(This.bigPic).fadeOut(500);
}
}
</script>
</body>
</html>

2、JS:

复制代码 代码如下:

/**
* 加载动画窗口
*
* @author dendy
* @since 2013-7-19 10:13:05
*/
function getLoadingHtml(msg) {
if(!msg) msg = "加载";
var html = "<div id='loadingDiv'>"

  • "<div style='height: 1325px; display: none; opacity: 0;' class='overlay'></div>"
  • "<div style='opacity: 0; margin-top: 250px;' id='AjaxLoading' class='showbox'>"
  • "<div class='loadingWord'>"
  • "<img src='" + Util.getContentPath() +"/images/ajax-loader.gif'>" + msg + "中,请稍候..."
  • "</div>"
  • "</div>"
  • "<div style='height: 1200px;'></div>"
  • "</div>";
    return html;
    }
    function ajaxLoadingInit(msg) {
    var loadingDiv = getLoadingHtml(msg);
    var h = $(document).height();
    $(".overlay").css({"height": h});
    var div = $("body").find("#loadingDiv");
    div.remove();
    $("body").append($(loadingDiv));
    }
    /**
    * 开始显示loading,在ajax执行之前调用
    * @param msg 操作消息,"加载", "保存", "删除"
    */
    function startLoading(msg) {
    ajaxLoadingInit(msg);
    $(".overlay").css({'display':'block','opacity':'0.8'});
    $(".showbox").stop(true).animate({'margin-top':'300px','opacity':'1'},200);
    }
    /**
    * 加载完成后隐藏,在ajax执行完成后(complete)调用
    */
    function endLoading() {
    $(".showbox").stop(true).animate({'margin-top':'250px','opacity':'0'},400);
    $(".overlay").css({'display':'none','opacity':'0'});
    }

3、调用例子:

复制代码 代码如下:

startLoading();
$.ajax({
type : "POST",
url : this.url,
dataType : "json",
data : this.args,
success : function (data) {

},
complete : function () {
if (self.showLoading == true) endLoading();
},
error : this.error
});

您可能感兴趣的文章:

  • jQuery animate效果演示
  • jquery animate 动画效果使用说明
  • jQuery animate(滑块滑动效果代码)
  • 用js实现的模拟jquery的animate自定义动画(2.5K)
  • jQuery动画animate方法使用介绍
  • jquery中animate动画积累的解决方法
  • jQuery动画效果animate和scrollTop结合使用实例
  • JQuery动画animate的stop方法使用详解
  • 使用jquery animate创建平滑滚动效果(可以是到顶部、到底部或指定地方)
  • jQuery中animate()方法用法实例
  • jquery中animate的stop()方法作用实例分析
  • jQuery animate和CSS3相结合实现缓动追逐效果附源码下载

本文由美高梅网址发布于关于美高梅,转载请注明出处:相册集效果,animate实现鼠标放上去显示离开隐藏

上一篇:的方法实现代码,jQuery插件的写法分享 下一篇:post和ajax方法的使用小结,getJSON的解决方法
猜你喜欢
热门排行
精彩图文