jquery悬停放大特效,基于CSS3图片悬停放大特效

jquery悬停放大特效,基于CSS3图片悬停放大特效

基于jQuery悬停图片变色放大特效,jquery悬停放大特效

享用生机勃勃款基于jQuery悬停图片变色放大特效是生机勃勃款响应式鼠标悬停图片放大效应代码。效果图如下:

图片 1

在线预览    源码下载

得以完结的代码。

html代码:

 <div style="width: 620px; margin: 40px auto 0 auto;">
        <div class="img">
            <div class="inner">
                <div>
                    <img src="image/1-1.jpg" /></div>
                <div>
                    <img src="image/1-2.jpg" /></div>
            </div>
        </div>
        <div class="img">
            <div class="inner">
                <div>
                    <img src="image/2-1.jpg" /></div>
                <div>
                    <img src="image/2-2.jpg" /></div>
            </div>
        </div>
        <div class="img">
            <div class="inner">
                <div>
                    <img src="image/3-1.jpg" /></div>
                <div>
                    <img src="image/3-2.jpg" /></div>
            </div>
        </div>
        <div class="img">
            <div class="inner">
                <div>
                    <img src="image/4-1.jpg" /></div>
                <div>
                    <img src="image/4-2.jpg" /></div>
            </div>
        </div>
        <div class="img">
            <div class="inner">
                <div>
                    <img src="image/1-1.jpg" /></div>
                <div>
                    <img src="image/1-2.jpg" /></div>
            </div>
        </div>
        <div class="img">
            <div class="inner">
                <div>
                    <img src="image/2-1.jpg" /></div>
                <div>
                    <img src="image/2-2.jpg" /></div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $(".img").mouseenter(function () {
            var $this = $(this);
            var $div = $this.find(".inner div");
            $div.eq(1).stop();
            $div.eq(1).css({ "top": "0px", "left": "0px", "width": "200px", "height": "200px" });
            $div.eq(0).stop().animate({ "top": "-25px", "left": "-25px", "width": "250px", "height": "250px", "opacity": "0" }, 500);
            $div.eq(1).stop().animate({ "top": "-25px", "left": "-25px", "width": "250px", "height": "250px", "opacity": "1" }, 500);
        }).mouseleave(function () {
            var $this = $(this);
            var $div = $this.find(".inner div");
            $div.eq(0).stop().animate({ "top": "0", "left": "0", "width": "200px", "height": "200px", "opacity": "1" }, 500);
            $div.eq(1).stop().animate({ "top": "0", "left": "0", "width": "200px", "height": "200px", "opacity": "0" }, 500);
        });    
    </script>

via:

分享生机勃勃款基于jQuery悬停图片变色放大特效是豆蔻梢头款响应式鼠标悬停图片放大成效代码。效…

传闻jQuery鼠标悬停上下滑动导航条,jquery悬停

依照jQuery鼠标悬停上下滑动导航条。那是风度翩翩款金色美观的鼠标响应式网址导航菜单特效。效果图如下:

图片 2

在线预览    源码下载

贯彻的代码。

html代码:

  <div id="menu2" class="menu">
        <ul>
            <li><a href="#">首 页</a></li>
            <li><a href="#">预报预警</a></li>
            <li><a href="#">气象新闻</a></li>
            <li><a href="#">气象服务</a></li>
            <li><a href="#">行政审批</a></li>
            <li><a href="#">信息公开</a></li>
            <li><a href="#">气象科普</a></li>
            <li><a href="#">党风廉政</a></li>
            <li><a href="#">气象科普</a></li>
        </ul>
        <div class="cls">
        </div>
    </div>

Javasctipt代码:

  $(document).ready(function () {

            $("#menu2 li a").wrapInner('');

            $("#menu2 li a").each(function () {
                $('' + $(this).text() + '').appendTo(this);
            });

            $("#menu2 li a").hover(function () {
                $(".out", this).stop().animate({ 'top': '48px' }, 300); // move down - hide
                $(".over", this).stop().animate({ 'top': '0px' }, 300); // move down - show

            }, function () {
                $(".out", this).stop().animate({ 'top': '0px' }, 300); // move up - show
                $(".over", this).stop().animate({ 'top': '-48px' }, 300); // move up - hide
            });

        });

via:

基于jQuery鼠标悬停上下滑动导航条。那是生机勃勃款藕灰美观的鼠标响应式网站导航菜单特效。效果…

遵照CSS3图片悬停放大特效,css3悬停加大

今天大家要来分享意气风发款十分帅的CSS3图纸特效,这款图片特效能够采纳鼠标滑过图片使其结束放大,并使图片的四周现身发光的效果。协作群青的背景,这款CSS3图纸悬停放大效应显得愈加立体大气,特别切合产物图片的彰显。

图片 3

在线预览   源码下载

落实的代码。

html代码:

  <div id="image-container">
            <div class="img" id="img-1">
                <div class="mask">
                </div>
                <img src="images/01.jpg">
            </div>
            <div class="img" id="img-2">
                <div class="mask">
                </div>
                <img src="images/07.jpg">
            </div>
            <div class="img" id="img-3">
                <div class="mask" id="mask-1">
                </div>
                <div class="mask" id="mask-2">
                </div>
                <img src="images/05.jpg">
            </div>
            <div class="img" id="img-4">
                <div class="mask">
                </div>
                <img src="images/04.jpg">
            </div>
            <div class="img" id="img-5">
                <div class="mask">
                </div>
                <img src="images/06.jpg">
            </div>
            <div class="img" id="img-6">
                <div class="mask">
                </div>
                <img src="images/08.jpg">
            </div>
            <div class="clearfix">
            </div>
        </div>
        <div class="clearfix">
        </div>
        <br>
        <div id="warning" style="margin-top: 20px; text-align: center;">
        </div>

via:   

前天我们要来共享生机勃勃款太帅的CSS3图片特效,那款图片特效能够动用鼠标滑过图片使其停下放大,并…

admin

网站地图xml地图