网页前端设计

http://www.86y.org
feedskyQQ邮箱

搜索文章

jq仿虾米网flash效果

关注我吧
 2014/3/13 10:05:36 阅读次数:2270

这是很久以前写的一个效果了,之前虾米音乐网首页的一个flash效果,最初觉得这flash效果也可以完全用jq来写,于是空余时间就写了下当作练习吧,现在就拿出来跟大家分享下其中的实现原理!

先上最终效果图:

jq仿虾米网flash效果

特点:

1、鼠标经过动态创建元素

2、判断鼠标经过每行的最后二个改变方向

完整代码如下:

<!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>jq仿虾米网flash效果</title>
<script src="http://www.86y.org/js/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
*{ margin:0; padding:0;}
.list{  height:160px;width:720px;margin:50px auto; border:1px solid #F60;font-family:'Microsoft YaHei'}
.list ul{ float:left; width:720px; background:#000; position:relative;}
.list ul li{ float:left; width:80px; height:80px; margin:-1px; list-style:none; border:1px solid #F60; position:relative;}
.list ul li img{ width:80px; height:80px; overflow:hidden; border:none; float:left;}
.list ul li p{ position:absolute; width:100px; height:80px; background:#F60; left:80px; top:0; z-index:2;color:#fff;}
.list ul li p b{ float:left; width:160px; height:30px; line-height:30px; font-size:14px;}
.list ul li p span{ float:left; width:160px; height:50px; line-height:20px; overflow:hidden; font-size:12px;}
.list ul li img.active{ border:3px solid #F60; width:74px; height:74px; position:absolute; left:0; top:0; z-index:2;}
</style>

<script type="text/javascript">
    $(function () {
        $('.list li').hover(function () {
        //鼠标移到li,其同辈元素半透明
            $(this).siblings().css('opacity', 0.5);
         //获取图片alt作为title
            var alt = $(this).find('img').attr('alt');
            //获取data作为简要描述
            var data = $(this).find('img').attr('data');
            //创建显示层
            var p = '<p><b>' + alt + '</b><span>' + data + '</span></p>'
            //li中插入创建层
            $(this).append(p);
            //鼠标经过添加默认样式
            $(this).find('img').addClass('active').parent('a').parent('li').siblings().find('img').removeClass('active');
            //鼠标移动到创建元素立即隐藏(这样做是为了被创建元素挡住可以点击)
            $(this).children('p').hover(function () {
                $(this).hide();
            });
            //判断每行的最后二个改变方向
            if ($(this).position().left > 480) {
                $(this).children('p').css({ 'left': -100, 'textAlign': 'right' });
                $(this).children('p').stop().animate({ 'width': 160, 'left': -160  }, 300);
            } else {
                $(this).children('p').stop().animate({ 'width': 160}, 300);
            }

        }, function () {
            $(this).siblings().css('opacity', 1);//鼠标移开回复
            $(this).children('p').remove();//鼠标移开移除创建元素
            $(this).find('img').removeClass('active');
        });

    });

</script>
</head>
<body>
<div class="list">
    <ul>
        <li><a href="#"><img src="/upload/images/eximages/1.jpg" alt="图1" data="图1详细内容" /></a></li>
        <li><a href="#"><img src="/upload/images/eximages/2.jpg" alt="图2" data="图2详细内容" /></a></li>
        <li><a href="#"><img src="/upload/images/eximages/3.jpg" alt="图3" data="图3详细内容"/></a></li>
        <li><a href="#"><img src="/upload/images/eximages/4.jpg" alt="图4" data="图4详细内容"/></a></li>
        <li><a href="#"><img src="/upload/images/eximages/5.jpg" alt="图5" data="图5详细内容" /></a></li>
        <li><a href="#"><img src="/upload/images/eximages/6.jpg" alt="图6" data="图6详细内容" /></a></li>
        <li><a href="#"><img src="/upload/images/eximages/7.jpg" alt="图7" data="图7详细内容" /></a></li>
        <li><a href="#"><img src="/upload/images/eximages/8.jpg" alt="图8" data="图8详细内容" /></a></li>
        <li><a href="#"><img src="/upload/images/eximages/9.jpg" alt="图9" data="图9详细内容"/></a></li>
        <li><a href="#"><img src="/upload/images/eximages/1.jpg" alt="图10" data="图10详细内容"/></a></li>
        <li><a href="#"><img src="/upload/images/eximages/2.jpg" alt="图11" data="图11详细内容"/></a></li>
        <li><a href="#"><img src="/upload/images/eximages/3.jpg" alt="图12" data="图12详细内容"/></a></li>
        <li><a href="#"><img src="/upload/images/eximages/4.jpg" alt="图13" data="图13详细内容"/></a></li>
        <li><a href="#"><img src="/upload/images/eximages/5.jpg" alt="图14" data="图14详细内容"/></a></li>
        <li><a href="#"><img src="/upload/images/eximages/6.jpg" alt="图15" data="图15详细内容"/></a></li>
        <li><a href="#"><img src="/upload/images/eximages/7.jpg" alt="图16" data="图16详细内容"/></a></li>
        <li><a href="#"><img src="/upload/images/eximages/8.jpg" alt="图17" data="图17详细内容"/></a></li>
        <li><a href="#"><img src="/upload/images/eximages/9.jpg" alt="图18" data="图18详细内容"/></a></li>
		<li><a href="#"><img src="/upload/images/eximages/1.jpg" alt="图10" data="图10详细内容"/></a></li>
        <li><a href="#"><img src="/upload/images/eximages/2.jpg" alt="图11" data="图11详细内容"/></a></li>
        <li><a href="#"><img src="/upload/images/eximages/3.jpg" alt="图12" data="图12详细内容"/></a></li>
        <li><a href="#"><img src="/upload/images/eximages/4.jpg" alt="图13" data="图13详细内容"/></a></li>
        <li><a href="#"><img src="/upload/images/eximages/5.jpg" alt="图14" data="图14详细内容"/></a></li>
        <li><a href="#"><img src="/upload/images/eximages/6.jpg" alt="图15" data="图15详细内容"/></a></li>
        <li><a href="#"><img src="/upload/images/eximages/7.jpg" alt="图16" data="图16详细内容"/></a></li>
        <li><a href="#"><img src="/upload/images/eximages/8.jpg" alt="图17" data="图17详细内容"/></a></li>
        <li><a href="#"><img src="/upload/images/eximages/9.jpg" alt="图18" data="图18详细内容"/></a></li>
    </ul>
</div>
</body>
</html>

(完)


大家有什么问题或技术上的想法可以在此与大家分享,也可以加入前端爱好者QQ群(141999928)一起学习进步:【幸凡前端技术交流群】
0

如果您觉得本文的内容对您的学习有所帮助,捐赠与共勉,支付宝(左)或微信(右)

阅读全文内容关闭