jquery双击图片弹出插件js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery双击图片弹出插件js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jquery双击图片弹出插件</title>
    <script type="text/javascript" src="jquery-1.2.6.min.js"></script>
    <script type="text/javascript" src="jquery.flyoffpage.full.js"></script>

    <style type="text/css">
        body {
            background: #000;
            color: #EEE;
            font: 0.8em Arial,Verdana,Sans-Serif;
            margin: 0 auto;
        }

        h1 {
            font-size: 2em;
            margin: 0;
            padding: 10px 0;
        }

        h2 {
            font-size: 1.6em;
        }

        p {
            clear: both;
        }

        a {
            color: white;
            font-weight: bold;
        }

        ul {
            background: #333;
            border: 1px solid #777;
            padding: 20px 0 20px 20px;
            margin: 0 auto;
            overflow: hidden;
            height: 1%;
        }

        li {
            display: inline;
            float: left;
        }

        img {
            margin: 0 20px 0 0;
        }

        #demo {
            border-top: 1px solid #CCC;
        }

        #wrap {
            padding: 25px;
            width: 862px;
            background: #222;
            border: 1px solid #CCC;
            margin: 30px auto;
        }
    </style>

</head>
<body>
    <!-- <body content> -->
    <div id="wrap">
        <h1>flyOffPage DEMONSTRATION</h1>
        <p id="author">
        </p>
        <h2>TO BEGIN DEMO, DOUBLE-CLICK ON ANY PARAGRAPH OR IMAGE WITHIN THIS PAGE...</h2>

        <div id="demo">

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sollicitudin, nisl pulvinar bibendum cursus, est neque iaculis nunc, sit amet semper sapien velit et odio. Aenean vestibulum. Phasellus ipsum justo, molestie ac, feugiat quis, pulvinar venenatis, ligula. Integer vehicula, neque in eleifend hendrerit, nibh elit suscipit quam, et accumsan tortor neque ut orci. In dolor elit, porta sed, elementum ac, hendrerit eu, leo. Etiam auctor nibh vitae leo. In libero odio, pretium non, tincidunt non, fringilla nec, mauris. Nullam fringilla quam non felis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam auctor suscipit mi. Aenean eu nisi. Mauris sem risus, vulputate nec, varius sit amet, volutpat eu, nisl. In sed tellus. Nullam nibh lectus, congue sed, sodales eu, scelerisque in, risus. Etiam id lectus. Integer rhoncus. Integer a magna imperdiet lectus accumsan blandit. Mauris leo. </p>

            <ul>
                <li><img src="1.jpg" alt="" /></li>
                <li><img src="2.jpg" alt="" /></li>
                <li><img src="3.jpg" alt="" /></li>
                <li><img src="4.jpg" alt="" /></li>

                <li><img src="5.jpg" alt="" /></li>
                <li><img src="6.jpg" alt="" /></li>
                <li><img src="7.jpg" alt="" /></li>
            </ul>

            <p>Integer a tortor. Pellentesque eu libero. Morbi non arcu. In hac habitasse platea dictumst. Suspendisse tincidunt est sit amet elit. Aliquam pharetra ultricies odio. Ut tortor nibh, adipiscing vel, consequat tempus, pulvinar in, eros. Phasellus sed mi et velit malesuada placerat. Vivamus a augue non neque faucibus rhoncus. Maecenas commodo congue nibh. Ut dui diam, consequat sed, dictum in, venenatis non, eros. Nullam porta velit non sem. Etiam augue ligula, posuere ac, tincidunt a, varius sit amet, dolor. Vivamus nec sem quis mi fermentum pharetra. </p>

        </div>
    </div>
    <!-- </body content> -->
    <script type="text/javascript">
        // <![CDATA[

        $('p', '#demo').dblclick(function () {
            $(this).flyOffPage({
                retainSpace: {
                    height: 0,
                    margin: 0
                },
                direction: 'btm'
            });
            return false;
        });

        $('li', '#demo').dblclick(function () {
            $(this).flyOffPage({
                retainSpace: {
                    height: 0,
                    width: 0,
                    margin: 0
                },
                tween: {
                    opacity: 0
                }
            });
            return false;
        });
        // ]]>
    </script>
</body>
</html>

JS代码(jquery.flyoffpage.full.js):

// jQuery plugin:'flyOffPage'// @description Selected element/'s will fly off page in random or pre-defined direction.// @version 0.1// @author James Padolsey// @info http://james.padolsey.com/javascript/new-jquery-plugin-fly-off-page/(function($,W,D){
	// Define all possible exit positions:var exitPositions ={
	top:function(el){
	return{
	top:0 - el.height(),left:el.offset().left}
;
}
,topLeft:function(el){
	return{
	top:0 - el.height(),left:0 - (el.width()/2)}
;
}
,topRight:function(el){
	return{
	top:0 - el.height(),left:$(W).width() + (el.width()/2)}
;
}
,left:function(el){
	return{
	top:el.offset().top,left:0 - el.width()}
;
}
,right:function(el){
	return{
	top:el.offset().top,left:$(W).width() + el.width()}
;
}
,btmLeft:function(el){
	return{
	top:getWindowHeight() + el.height(),left:0 - (el.width()/2)}
;
}
,btmRight:function(el){
	return{
	top:getWindowHeight() + el.height(),left:getWindowHeight() + (el.width()/2)}
;
}
,btm:function(el){
	return{
	top:getWindowHeight(),left:el.offset().left}
;
}
}
;
	function getWindowHeight(){
	return W.innerHeight || $(window).height();
}
function randDirection(){
	var directions = [],count = 0;
	// Loop through available exit positions:for (var i in exitPositions){
	// Push property name onto new array:directions.push(i);
	count++;
}
// Return random directions property (corresponds to exitPositions properties):return directions[ parseInt(Math.random() * count,10) ];
}
function prepareOverflow(){
	// The various overflow settings will be set to hidden,// but only if it does not conflict with the current document:var oX = $(D).width() <= $(W).width(),oY = $(D).height() <= $(W).height(),oR = oX && oY;
	oX && $('body').css('overflow-x','hidden');
	oY && $('body').css('overflow-y','hidden');
	oR && $('body').css('overflow','hidden');
}
function flyElement(s){
	// Main functionality of plugin:// Create shortcut to element:var el = $(this),// Handle random direction:direction = s.direction.toLowerCase() === 'random' ? randDirection():s.direction,// New objext:Tweens - All tweens,including user-defined ones and ours:// (Gives our tweens precedence):tweens = $.extend(s.tween,exitPositions[direction](el)),// Define all properties associated with layout/position:positionProps = 'position,left,top,bottom,right,width,height,paddingTop,paddingRight,paddingBottom,paddingLeft,marginTop,marginRight,marginBottom,marginLeft,zIndex,overflow,clip,display',// New element:clone of original (remove unique identifier):// (Must re-apply all layout styles because the ID may have been CSS hook):clone = $(el.clone()) .removeAttr('id') .attr('id','replaced-element-' + (+new Date())) .css((function(){
	// Loop through each position/layout property // and return object containing all:var props = positionProps.split(','),length = props.length,d styles ={
}
;
	while(length--){
	styles[props[length]] = el.css(props[length]);
}
return styles;
}
)());
	// Prepare document overflows:prepareOverflow();
	$(el) // Style new element:.css({
	left:tweens.left ? el.offset().left:null,top:tweens.top ? el.offset().top:null,position:'absolute',zIndex:999,width:el.outerWidth(),height:el.outerHeight()}
) // Animate using collective 'tweens' object:.animate(tweens,s.duration,function(){
	// On comepletion,remove the animated element:el.remove();
}
) .filter(function(){
	// Filter:// (will only continue with chain if user set 'retainSpace' to true) return !!s.retainSpace;
}
) // Insert clone before original element:(make clone invisible) .before($(clone).css('opacity',0));
	if (s.retainSpace && typeof s.retainSpace === 'object'){
	$(clone).animate(s.retainSpace,s.duration,function(){
	$(this).remove();
}
);
}
}
// Expose functionality to jQuery namespace:$.fn.flyOffPage = function(userDefinedSettings){
	// Define settings var s = $.extend({
	direction:'random',tween:{
}
,retainSpace:true,duration:500}
,userDefinedSettings);
	// Initiate:return this.each(function(){
	flyElement.call(this,s);
}
);
}
;
}
)(jQuery,window,document);

附件:下载该文件资源,减少时间成本(增值服务)