最新赞助活动温馨提示:自愿赞助服务器费用,学生和没有工作的整站资源免费下载!
头像

Js实现幻灯片图片切换效果源码下载

来源:http://www.erdangjiade.com/js/1112.html 沐浴春风 2017-02-06 14:11浏览(919)

Js实现幻灯片图片切换效果源码下载Js实现幻灯片图片切换效果源码下载

0、请不要问“在不在”之类的问题,有问题直接问!1、学生或暂时没有工作的童鞋,整站资源免费下载!2、¥9.9充值终身VIP会员,加我微信,826096331 拉你进VIP群学习!3、程序员加油,技术改变世界。在线 充值

Js实现幻灯片图片切换效果源码下载
分类:图片代码 > 图片轮播 难易:入门级
查看演示 下载资源 下载积分: 10 积分
$(document).ready(function(){ 
 
    /* This code is executed on the document ready event */ 
 
    var left    = 0
        top        = 0
        sizes    = { retina: { width:190, height:190 }, webpage:{ width:500, height:283 } }
        webpage    = $('#webpage'), 
        offset    = { left: webpage.offset().left, top: webpage.offset().top }
        retina    = $('#retina'); 
 
    if(navigator.userAgent.indexOf('Chrome')!=-1
    { 
        /*    Applying a special chrome curosor, 
            as it fails to render completely blank curosrs. */
 
             
        retina.addClass('chrome'); 
    } 
     
    webpage.mousemove(function(e){ 
 
        left = (e.pageX-offset.left); 
        top = (e.pageY-offset.top); 
 
        if(retina.is(':not(:animated):hidden')){ 
            /* Fixes a bug where the retina div is not shown */ 
            webpage.trigger('mouseenter'); 
        } 
 
        if(left<0 || top<0 || left > sizes.webpage.width || top > sizes.webpage.height) 
        { 
            /*    If we are out of the bondaries of the 
                webpage screenshot, hide the retina div */
 
 
            if(!retina.is(':animated')){ 
                webpage.trigger('mouseleave'); 
            } 
            return false; 
        } 
 
        /*    Moving the retina div with the mouse 
            (and scrolling the background) */
 
 
        retina.css({ 
            left                : left - sizes.retina.width/2
            top                    : top - sizes.retina.height/2
            backgroundPosition    : '-'+(1.6*left)+'px -'+(1.35*top)+'px' 
        }); 
         
    }).mouseleave(function(){ 
        retina.stop(true,true).fadeOut('fast'); 
    }).mouseenter(function(){ 
        retina.stop(true,true).fadeIn('fast'); 
    }); 
});
//html 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>jquery 图片放大镜仿iphone苹果手机图片文字放大查看效果</title> 
<meta name="description" content="jquery图片放大镜制作仿iphone苹果手机浏览网页图片文字放大查看效果,带放大镜查看图片文字放大预览效果。" /> 
</head> 
 
<body> 
 
<div id="main"> 
 
    <div id="iphone"> 
        <div id="webpage"> 
            <img src="img/webpage.png" width="499" height="283" alt="Web Page" /> 
            <div id="retina"></div> 
        </div> 
    </div> 
     
</div> 
 
<link rel="stylesheet" type="text/css" href="styles.css" /> 
 
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> 
<script type="text/javascript" src="js/script.js"></script> 
 
</body> 
</html>
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/1112.html
评论1
头像

友情提示:垃圾评论一律封号 加我微信:826096331拉你进VIP群学习群

  • 头像 沙发
    07-18 17:45
    月下独酌521
    幻灯片图片切换应该可以制作照片墙
1 2