返回顶部下载帮助
网站模板
模板颜色分类:
当前位置: javascript学习 >

jquery效果大全中

2020-04-13 文章标签: jquery 效果 浏览次数:

我们继续讲解jquery处理页面效果中,比如使用控制淡入淡出度,渐变切换,模拟show(),自定义动画,滑动定位等等

jquery操作创建元素

1.jquery控制淡入淡出度

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" >
$(function(){
    $("input").click(function(){
       $("div").fadeTo(2000,0.4);
    })
})
</script>
</head>
<body>
<input type="button" value="控制淡入淡出度" />
<div><img src="//freemuban.com/img/demo1.jpg" height="200" /></div>
</body>
</html>

2.jquery渐变切换

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" >
$(function(){
    $("button:first").click(function() {
        $("img:first").fadeToggle("slow", "linear");
    });
    $("button:last").click(function () {
        $("img:last").fadeToggle("fast", function () {
            $("#log").append("<div>单击按钮2</div>");
        });
    });
})
</script>
</head>
<body>
<button>控制按钮1</button>
<button>控制按钮2</button>
<p><img src="//freemuban.com/img/demo1.jpg" height="200" /><img src="//freemuban.com/img/demo1.jpg" height="200" /></p>
<div id="log"></div>
</body>
</html>

3.jquery模拟show(),点击实现图片显示隐藏之间的切换

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" >
$(function(){
    $("img").hide();
    $("button").click(function () {
        $("img").show('slow');
    }); 
})
</script>
</head>
<body>
<button>控制按钮</button>
<p><img src="//freemuban.com/img/demo1.jpg" height="300" /></p>
</body>
</html>

demo2

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" >
$(function(){
    $("img").hide();
    $("button").click(function () {
        $("img").animate({
            height:'show',
            width:'show',
            opacity:'show'
        },'show');
    });
})
</script>
</head>
<body>
<button>控制按钮</button>
<p><img src="//freemuban.com/img/demo1.jpg" height="300" /></p>
</body>
</html>

4.jquery模拟show()

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" >
$(function(){
    $("button").click(function(){
        $("img").animate({ 
            width: "100%",
            height: "100%"
        }, 1000 );
    })
})
</script>
</head>
<body>
<button>控制按钮</button>
<p><img src="//freemuban.com/img/demo1.jpg" height="300" /></p>
</body>
</html>

demo2

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" >
$(function(){
    $("button").click(function(){
        $("p").animate({ 
            width: "200%",
            height: "200%", 
            fontSize: "5em",
            height: 'toggle',
            opacity: 'toggle'
        }, 1000 );
    })
})
</script>
</head>
<body>
<button>控制按钮</button>
<p><img src="//freemuban.com/img/demo1.jpg" height="300" /></p>
</body>
</html>

demo3

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" >
$(function(){
    $("input").eq(0).click(function(){
        $("div").animate({ 
            left: "-100px"
        }, 1000)
    })
    $("input").eq(1).click(function(){
        $("div").animate({ 
            left: "+200px"
        }, 1000)
    })
})
</script>
</head>
<body>
<input type="button" value="向左运动" /><input type="button" value="向右运动" />
<div style="position:absolute;left:200px; border:solid 1px red;">自定义动画</div>
</body>
</html>

demo4

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" >
$(function(){
    $("input").click(function(){
        $("div").animate(    //第1个动画
            {height:"120%"},
            {duration: 5000, queue: false}
        ).animate({    //第2个动画,将与第1个动画并列进行
            fontSize: "10em"
        },1000).animate({    //第3个动画
            opacity: 0
        }, 2000);
    })
})
</script>
</head>
<body>
<input type="button" value="自定义动画" />
<div style="border:solid 1px red;">自定义动画</div>
</body>
</html>

5.jquery滑动定位

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" >
$(function(){
    $("button").click(function(){
        $("p").animate({
            left:200, 
            top:200, 
            opacity: .5
        }, 2000, "linear", function(){alert("动画完成");} );
    })
})
</script>
</head>
<body>
<button>控制按钮</button>
<p style="position:relative"><img src="//freemuban.com/img/demo1.jpg" height="300" /></p>
</body>
</html>


关于我们 - 联系我们 - 广告服务 - 友情链接 - 版权声明 - 手机版

免责声明:站内所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!版权归原创者所有,如果侵犯了您的权益,请通知我们,我们会及时删除侵权内容。