注册 登录
编程论坛 → JavaScript论坛

这个效果，是怎么做的，谢谢

z18215101491 发布于 2016-04-29 14:31， 4348 次点击
只有本站会员才能查看附件，请 登录
5 回复
#2
风吹过b2016-04-29 14:52
JS，做的。移吧。
#3
z182151014912016-04-29 15:43
回复 2楼 风吹过b
你好，就是我鼠标到哪，相应图片就在上面显示。vb这个好做吗
，谢谢
#4
风吹过b2016-04-29 21:00
VB里，如果是做成应用程序，算好做。

下面是一组图像，捕捉鼠标移动，当鼠标在它上面移过时，就显示对应的图像。
另外加一个定时器，当上次切换图像经过多少秒后，就自动移动下一个图像。

鼠标移动事件-》 调用 显示图像，同时定时器计数归零
定时器，每次计数器+1，如果超过规定的计数，-》 调用 显示图像，同时定时器计数归零

二个事件，一个函数。一个全局变量。
外加一个初始化过程。
#5
熊孩子canfly2016-06-29 11:08
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .whole { border:0px solid #333; width: 1002px; height: 950px; margin: 0 auto;}
        .head { border: 1px solid #b979e9; width: 1000px;height: 35px; background-color:#b979e9; border-radius:5px 5px 0 0; }
        .head_ul li{ list-style: none; float: left; margin-right:35px;margin-top: -17px; padding-left:10px; width:65px; height:36px;font-size: 14px; font-weight: bold;
            background-color: #b979e9;text-align: center;}
        .head_ul li a {  text-decoration: none; color: #fff; line-height: 5px; line-height:40px;}

        .out ul li { list-style: none;}/*display: none ;margin-left:-40px;*/
        .out { width:1000px;  height:200px; border: 1px solid sandybrown;
            position: relative;}
        .tu li {position: absolute;top: 0;left: 0;display: none ;}
        .shu { position: absolute;bottom:0px;left:400px; text-align: center;}/*font-size: 0;width: 100%;*/
        .shu li { height: 15px; width:15px;background-color:#333333 ;color:#ededed;font-size: 12px;border-radius: 50%;display: inline-block;margin: 0 5px;cursor: pointer;}
        .shu li:hover { background-color:#a60000; }
        .out .btn { width: 30px; height: 60px; background:rgba(0,0,0,0.3); color: #FFFFFF; font-size: 14px;
            text-align: center; line-height: 60px; position: absolute;top: 50%; margin-top: -30px;
            cursor: pointer;
        }
        .out .left{ left: 0;}
        .out .right{right: 0;}


        .top-dl { margin-top: -15px;}
        .top-dl dl {  float: left; width: 111px; position: relative;  }
        .top-dl dt { background: url("images/037.jpg"); background-repeat: no-repeat;
            height: 26px;padding-top:8px;text-align: center ;;font-size: 14px;font-weight: bold;}
        .top-dl dt a,.top-dl dt a:hover { text-decoration: none;  color: #000; font-size: 14px; font-weight: 900;}
        .top-dl dd {background: url("images/background/0019a.jpg") repeat-y; width:111px; margin-left:-10px;
            display:none;  position:absolute;
            z-index:1;
            left:10px;
            top:33px;
            text-align: center;;
        }
        /*悬浮显示*/
        .top-dl  dl:hover dd{  display:block;  }
        .top-dl  dd a{
            font-size:12px;
            color: #333333;
            line-height:25px;
            display:block;
            text-decoration: none;
        }
        .top-dl  dd a:hover{ color: #7f0107;}

        .menu { background-color: #d6ffff; border: 1px solid #1cb7f9; width: 1000px; height: 650px;}


        .topBox ul li { list-style: none;}
        .bottomBox ul { padding-left:0px;}
        .bottomBox ul li { height:20px; width:40px; list-style: none;
            border: 1px solid #fff;  float: left;margin-top:-15px;}
        .bottomBox ul li.cur { border:1px solid #900;}
        .bottomBox { text-decoration: none;border: 1px solid #FFFFFF; height: 22px ;width: 210px;overflow:hidden;margin-top: 210px; }
        .topBox img { border: 1px solid #FFFFFF;cursor:pointer;}
        .topBox img:hover { border: 1px solid #7f0107;}
         #forcus {position: relative; border: 1px solid #d6ffff; width: 210px; height: 235px; margin-top:25px; float: right;}
         #forcus dl { bottom: 1px; left: 0; height:60px;  width: 210px;font-size: 12px; background-color: #999999;
          opacity: 0.7; filter:alpha(opacity=70); color: #fff; line-height: 20px text-inden: 10px; display:none; position:absolute;z-index:1; top: 140px;left: 0px;}
         #forcus dl.on { display: block;}

         .hot h3 {
             display:inline-block;
             margin-top: -10px;}
        .hot a { float: right; text-decoration: none;}
        .hua ul {list-style: none; padding-left:0px; margin-top:-15px;}
        .hua li a{text-decoration: none;font-size: 14px; line-height:28px; }
        .hua li a:hover{ color: #f58fd1;}

        .foot{
            width:1000px; height:50px;
            background-color:#bef9fd;
            color:#999; text-align: center; font-size: 12px; margin-top: -8px;
            border: 1px solid #1cb7f9 ;
        }
        .foot p{ line-height: 20px;}
    </style>
    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
    <script type="text/javascript">
        $(document).ready( function(){
            $(".head_ul li").hover( function(){
                $(this).css("background-color","red");
            },function(){
                $(this).css("background-color","#b979e9");
            });
        });

        $(function(){
            $(".tu li").first().show();
            $(".shu li").first().addClass("hover");

            //手动控制
            $(".shu li").mouseout(function(){
                $(this).addClass("hover").siblings("li").removeClass("hover");

                var index=$(this).index();
                i=index
                $(".tu li").eq(index).fadeIn().siblings().fadeOut();
            })

            //时间间隔自动
            var i=0;
            var t =setInterval(move,2000)
           //运动函数
            function move(){
                i++
                if(i==4){
                    i=0;
                }
                $(".shu li").eq(i).addClass("hover").siblings().removeClass("hover");
                $(".tu li").eq(i).fadeIn().siblings().fadeOut();//与手动相同.
            }
            function moveL(){
                i--
                if(i==-1){
                    i=3;
                }
                $(".shu li").eq(i).addClass("active").siblings().removeClass("active");
                $(".tu li").eq(i).fadeIn().siblings().fadeOut();//同手动
            }

            //鼠标悬浮停止运动
            $(".out").hover(function(){
                clearInterval(t);
            },function(){
                t=setInterval(move,2000);
            })
            // 点击左边箭头执行的动画
            $(".out .left").click(function(){
                moveL();
            })
            //点击右边箭头执行的动画
            $(".out .right").click(function(){
                move();
            })


        })

        $(function(){
            $(".topBox ul li").first().show();
            $(".bottomBox ul li").first().addClass("cur");
            var movement =  setInterval(moves,2000);
            var index =0;
            var maxindex = $(".bottomBox ul li").length;
            function moves(){
                $(".bottomBox ul li").removeClass("cur").eq(index).addClass("cur");
                dosome(index);
                index++;
                if(index>maxindex-1)index=0;
            }

            $(".bottomBox ul li").hover(function(){
                var index = $(this).index();
                $(this).addClass("cur");

                dosome(index);
            },function(){
                $(".bottomBox ul li").removeClass("cur","hover");

                //$(this).addClass("cur");
            });

            $("#forcus").hover(function(){
                clearInterval(movement);
            },function(){
                movement = setInterval(moves,3000);
            });

            function dosome(index){
                $(".topBox li").fadeOut(500).eq(index).fadeIn(500);
                $("#forcus dl").slideUp(500).eq(index).slideDown(500);
            }

        })
    </script>
</head>
<body>
<div class="whole">
    <div class="head">
        <ul class="head_ul">
            <li><a href="Login.html">首页</a></li>
            <li><a href="#">艺术简介</a></li>
            <li><a href="#">新闻动态</a></li>
            <li><a href="#">经典作品</a></li>
            <li><a href="Xiangce.html">动感相册</a></li>
            <li><a href="#">服务指南</a></li>
            <li><a href="#">联系我们</a></li>
        </ul>
    </div>
    <div class="out">
        <ul class="tu">
            <li><img src="images/one.jpg"></li>
            <li><img src="images/two.jpg"></li>
            <li><img src="images/stree.jpg"></li>
            <li><img src="images/four.jpg"></li>
        </ul>
        <ul class="shu">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
        <div class="btn left"><</div>
        <div class="btn right">></div>
    </div>
    <div class="menu">
    <div class="top-dl">
        <dl>
            <dt><a href="#">中心信息</a></dt>
            <dd><a href="#">中心介绍</a>
                <a href="#" >荣誉奖项</a>
                <a href="#" >中心环境</a>
                <a href="#" >中心地址</a>
                <a href="#" >联系我们</a> </dd>
        </dl>
        <dl>
            <dt><a href="#">新闻动态</a></dt>
            <dd><a href="#">行业新闻</a>
                <a href="#" >中心新闻</a> </dd>
        </dl>
        <dl>
            <dt><a href="#">课程介绍</a></dt>
        </dl>
        <dl>
            <dt><a href="#">师资力量</a></dt>
            <dd><a href="#">招生办公室</a>
                <a href="#" >教质部</a>
                <a href="#" >学术部</a>
                <a href="#" >就业部</a> </dd>
        </dl>
        <dl>
            <dt><a href="#">就业展示</a></dt>
            <dd><a href="#">就业学员</a>
                <a href="#" >签约名企</a>
                <a href="#" >就业感言</a>
                <a href="#" >就业活动</a>
                <a href="#" >就业部工作</a> </dd>
        </dl>
        <dl>
            <dt><a href="#">学术教学</a></dt>
            <dd><a href="#">教学教法</a>
                <a href="#" >学习心得</a>
                <a href="#" >视频分享</a>
                <a href="#" >技术文档</a> </dd>
        </dl>
        <dl>
            <dt><a href="#">学员天地</a></dt>
            <dd><a href="#">学员活动</a>
                <a href="#" >学社工作</a>
                <a href="#" >项目展示</a> </dd>
        </dl>
        <dl>
            <dt><a href="#">招生信息</a></dt>
            <dd><a href="#">开班信息</a>
                <a href="#" >体验课信息</a>
                <a href="#" >讲座信息</a>
                <a href="#" >招生问答</a> </dd>
        </dl>
        <dl>
            <dt><a href="#">咨询报名</a></dt>
        </dl>
    </div>

        <div id="forcus">

        <div class="topBox">
        <ul class="tu">
            <li ><a href="#"><img src="./images/017.jpg"width="208" height="210"  alt=""></a></li>
            <li><a href="#"><img src="./images/018.jpg"width="208" height="210"  alt=""></a></li>
            <li><a href="#"><img src="./images/019.jpg"width="208" height="210"  alt=""></a></li>
            <li><a href="#"><img src="./images/020.jpg"width="208" height="210" alt=""></a></li>
            <li><a href="#"><img src="images/021.jpg"width="208" height="210" alt=""></a></li>
        </ul>
        </div>

        <div class="">

        </div>



        <div class="bottomBox">
            <ul>
                <li class="cur"><img src="images/017.jpg"width="40" height="20"  alt=""></li>
                <li class=""><img src="images/018.jpg" width="40" height="20" alt=""></li>
                <li class=""><img src="images/019.jpg"width="40" height="20" alt=""></li>
                <li class=""><img src="images/020.jpg"width="40" height="20" alt=""></li>
                <li class=""><img src="images/021.jpg"width="40" height="20" alt=""></li>
            </ul>

            <dl class='on'>
                <dt> <a href="#">Merry Christmas! 1乐</a></dt>
                <dd>大家圣诞快乐啊<br/>，平安夜祝福你</dd>
            </dl>
            <dl >
                <dt> <a href="#">Merry Christmas!!圣诞快乐 圣诞2乐</a></dt>
                <dd>平安夜收到心仪的礼物，<br/>1平安幸福！！</dd>
            </dl>
            <dl >
                <dt> <a href="#">Merry Christmas!!Merry Christmas!!1</a></dt>
                <dd>大家圣诞快乐啊<br/>，平安夜祝福你</dd>
            </dl>
            <dl >
                <dt> <a href="#">Merry Christmas!!Merry Christmas!!Merry Christmas!!</a></dt>
                <dd>平安夜收到心仪的礼物，<br/>1平安幸福！！</dd>
            </dl>
            <dl >
                <dt> <a href="#">Merry Christmas!!Merry Christmas!!Merry Christmas!!</a></dt>
                <dd>平安夜收到心仪的礼物，<br/>1平安幸福！！</dd>
            </dl>
        </div>
            <hr/>
            <div class="hot">
                <h3>热门资源推荐</h3>
                <a href="#">换一换</a>
            </div>
            <div class="hua">
                <ul>
                    <li><img src=" images/small/hua.jpg" width="10px"; height="10px";><a href="#">年终报告如何写，千份模板</a></li>
                    <li><img src=" images/small/hua.jpg" width="10px"; height="10px";><a href="#">雾霾天生存指南 &nbsp;快保存&nbsp;手慢无</a></li>
                    <li><img src=" images/small/hua.jpg" width="10px"; height="10px";><a href="#">一套价值8800元的高考教程</a></li>
                    <li><img src=" images/small/hua.jpg" width="10px"; height="10px";><a href="#">年终报告如何写，人你说</a></li>
                    <li><img src=" images/small/hua.jpg" width="10px"; height="10px";><a href="#">雾霾天生存指南 &nbsp;快保存&nbsp;手慢无</a></li>
                    <li><img src=" images/small/hua.jpg" width="10px"; height="10px";><a href="#">一套价值8800元的高考教程</a></li>
                    <li><img src=" images/small/hua.jpg" width="10px"; height="10px";><a href="#">哈哈哈哈哈哈哈哈哈哈</a></li>
                    <li><img src=" images/small/hua.jpg" width="10px"; height="10px";><a href="#">雾霾天生存指南 &nbsp;快保存&nbsp;手慢无</a></li>
                    <li><img src=" images/small/hua.jpg" width="10px"; height="10px";><a href="#">一套价值8800元的高考教程</a></li>
                    <li><img src=" images/small/hua.jpg" width="10px"; height="10px";><a href="#">哈哈哈哈哈哈哈哈哈哈</a></li>
                </ul>
            </div>
        </div><!--漂浮需移动-->

    </div><!--背景颜色-->
    <div class="foot">
        <!--
        .foot{
            width:1000px; height:50px;
            background-color:#befdf8;
            color:#999;
            }
        --> <p>婚纱摄影公司网站CopyLight(c)2016-05-06</p>

    </div>
</div><!--整体-->

</body>
</html>
#6
熊孩子canfly2016-06-29 11:09
copy运行，，，，只是包含了你要的111
1
©2025, BC-CN.NET
电脑版