图片旋转 和上下一页的js代码 有错误

最新推荐文章于 2023-02-08 21:29:20 发布
最新推荐文章于 2023-02-08 21:29:20 发布
阅读量741 收藏
点赞数
分类专栏： Java Web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wconvey/article/details/40455817
版权
<%@ page language="java" pageEncoding="UTF-8"
    contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<c:set var="ctx" value="${pageContext.request.contextPath}"></c:set>

<!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>
<script type="text/javascript" charset="utf-8">
    (function() {
        AUI = {}; //随便起个名字，
        AUI.Utils = {};
        AUI.Utils.Array = window.Array;

        if (!AUI.Utils.Array.prototype.indexOf) {
            AUI.Utils.Array.prototype.indexOf = function(searchElement,
                    fromIndex) {
                if (this === undefined || this === null) {
                    throw new TypeError('"this" is null or not defined');
                }

                var length = this.length >>> 0; // Hack to convert object.length to a UInt32

                fromIndex = +fromIndex || 0;

                if (Math.abs(fromIndex) === Infinity) {
                    fromIndex = 0;
                }

                if (fromIndex < 0) {
                    fromIndex += length;
                    if (fromIndex < 0) {
                        fromIndex = 0;
                    }
                }

                for (; fromIndex < length; fromIndex++) {
                    if (this[fromIndex] === searchElement) {
                        return fromIndex;
                    }
                }

                return -1;
            };
        }

        AUI.overlay = {};
        AUI.overlay.doCenter = function(target) {
            //让target 位于网页的中央居中的位置
            var targetWidth = target.offsetWidth, //目标的可见宽度
            targetHeight = target.offsetHeight, //目标的可见高度
            realLeft = window.pageXOffset
                    || document.documentElement.offsetLeft
                    || document.body.offsetLeft, realTop = window.pageYOffset
                    || document.documentElement.offsetTop
                    || document.body.offsetTop, clientWidth = document.documentElement.clientWidth
                    || document.body.clientWidth, clientHeight = document.documentElement.clientHeight
                    || document.body.clientHeight, boxTop = realTop
                    + Math.round((clientHeight - targetHeight) / 2), boxLeft = realLeft
                    + Math.round((clientWidth - targetWidth) / 2);
            target.style.position = 'absolute';
            target.style.top = boxTop + 'px';
            target.style.left = boxLeft + 'px';

        };
        AUI.overlay.fadeIn = function(target, speed) {
            //document.location.reload();
            var speed = speed || 20;
            var box = document.getElementById("box"), bg = document
                    .getElementById("bg"), //有点透明的黑色背景
            show = document.getElementById('show');

            bg.style.display = "block";
            box.style.display = "block";
            box.style.opacity = 0;
            show.src = target.src;
            //text.innerHTML = txt;
            AUI.overlay.doCenter(box);
            var val = 0;
            //循环将透明值以5递增,即淡入效果
            (function() {
                box.style.opacity = val;
                val += 0.1;
                if (val <= 100) {
                    setTimeout(arguments.callee, speed);
                }
            })();
        };

        AUI.overlay.fadeOut = function(speed) {
            var speed = speed || 20, box = document.getElementById("box"), bg = document
                    .getElementById("bg"), val = 100;
            //循环将透明值以4递减,即淡出效果
            (function() {
                box.style.opacity = val;

                val = val - 4;
                if (val > 0) {
                    setTimeout(arguments.callee, speed);
                }
                if (val <= 0) {
                    box.style.display = "none";
                    bg.style.display = "none";
                }
            })();
        };

        AUI.overlay.next = function() {
            var imgList = document.getElementById("img-list"), imgs = imgList
                    .getElementsByTagName('img'), show = document
                    .getElementById("show"),srcs = [];
            Array.indexOf = AUI.Utils.Array.indexOf;

            for (var i = 0; i < imgs.length; i++) {
                srcs.push(imgs[i].src);
                if (srcs.indexOf(show.src) === -1) {

                    continue;
                } else if (srcs.indexOf(show.src) < imgs.length - 1) {
                    show.src = imgs[i + 1].src;
                    //text.innerHTML = "第" + (i + 2) + "张图,真尼玛看着漂亮啊";
                    break;
                } else {
                    alert("最后一张了");
                    return false;
                }
            }
        };

        AUI.overlay.pre = function() {
            var imgList = document.getElementById("img-list");
            var imgs = imgList.getElementsByTagName('img');
            var show = document.getElementById("show");
            // var text = document.getElementById("text");
            var srcs = [];

            for (var i = 0; i < imgs.length; i++) {
                srcs.push(imgs[i].src);
                if (srcs.indexOf(show.src) === -1) {

                    continue;
                } else if (srcs.indexOf(show.src) > 0 && i !== 0) {
                    show.src = imgs[i - 1].src;
                    //text.innerHTML = "第" + (i) + "张图,真尼玛看着漂亮啊";
                    break;
                } else {
                    alert("第一张了");
                    return false;
                }
            }
        };
        
        AUI.overlay.rotate=function(id, angle, whence) {
            var p = document.getElementById(id);
            if (!whence) {
                p.angle = ((p.angle == undefined ? 0 : p.angle) + angle) % 360;
            } else {
                p.angle = angle;
            }
            if (p.angle >= 0) {
                var rotation = Math.PI * p.angle / 180;
            } else {
                var rotation = Math.PI * (360 + p.angle) / 180;
            }
            var costheta = Math.cos(rotation);
            var sintheta = Math.sin(rotation);
            if (document.all && !window.opera) {
                var canvas = document.createElement('img');
                canvas.src = p.src;
                canvas.height = p.height;
                canvas.width = p.width;
                canvas.style.filter = "progid:DXImageTransform.Microsoft.Matrix(M11="
                        + costheta
                        + ",M12="
                        + (-sintheta)
                        + ",M21="
                        + sintheta
                        + ",M22=" + costheta + ",SizingMethod='auto expand')";
            } else {
                var canvas = document.createElement('canvas');
                if (!p.oImage) {
                    canvas.oImage = new Image();
                    canvas.oImage.src = p.src;
                } else {
                    canvas.oImage = p.oImage;
                }
                //alert(canvas.width)
                canvas.style.width = canvas.width = Math.abs(costheta
                        * canvas.oImage.width)
                        + Math.abs(sintheta * canvas.oImage.height);
                canvas.style.height = canvas.height = Math.abs(costheta
                        * canvas.oImage.height)
                        + Math.abs(sintheta * canvas.oImage.width);
                var context = canvas.getContext('2d');
                context.save();
                if (rotation <= Math.PI / 2) {
                    context.translate(sintheta * canvas.oImage.height, 0);
                } else if (rotation <= Math.PI) {
                    context.translate(canvas.width, -costheta
                            * canvas.oImage.height);
                } else if (rotation <= 1.5 * Math.PI) {
                    context.translate(-costheta * canvas.oImage.width,
                            canvas.height);
                } else {
                    context.translate(0, -sintheta * canvas.oImage.width);
                }
                context.rotate(rotation);
                context.drawImage(canvas.oImage, 0, 0, canvas.oImage.width,
                        canvas.oImage.height);
                context.restore();
            }
            canvas.id = p.id;
            canvas.angle = p.angle;
            p.parentNode.replaceChild(canvas, p);
        }
        
        //向右旋转
            AUI.overlay.rotateRight=function (id, angle) {
            //alert("right");
            AUI.overlay.rotate(id, angle == undefined ? 90 : angle);
        }
        //向左旋转
           AUI.overlay.rotateLeft=function (id, angle) {
            //alert("left");
            AUI.overlay.rotate(id, angle == undefined ? -90 : -angle);
        }
    })();
</script>
<style type="text/css" media="screen">
h1 {
    color: #333;
    font-family: "微软雅黑";
    border-bottom: solid 3px #ddd;
}

div#bg {
    display: none;
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: #000000;
    filter: alpha(opacity = 80);
    -moz-opacity: 0.8;
    -khtml-opacity: 0.8;
    opacity: 0.8;
}

div#box {
    display: none;
    position: fixed;
    top: 10%;
    width: 50%;
    border: 2px solid #eeeeee;
    padding: 10px;
    background-color: white;
    z-index: 1002;
    overflow: auto;
}

img {
    max-width: 100%;
}

div#img-list img {
    padding: 4px;
    border: solid 1px #dddddd;
    box-shadow: 1px 1px 2px #ddd;
    -moz-box-shadow: 1px 1px 2px #ddd;
}

.btn {
    border: none;
    background-color: #2a6496;
    color: #ffffff;
    float: right;
    margin-bottom: 5px;
}

.btn-left {
    float: left;
}

div#box-inner {
    position: relative;
    width: 100%;
}
/*
p#text {
    height: 30px;
    letter-spacing: 2px;
    line-height: 30px;
    padding-left: 10px;
}*/

</style>
</head>
<body>
    <h1>overlay demo</h1>
    <div id="img-list">
        <img src="${ctx}/wangyun/images/f1.jpg" width="150" alt="点我"
            οnclick="AUI.overlay.fadeIn(this,20)" />
       <img src="${ctx}/wangyun/images/f2.jpg" width="150"
            οnclick="AUI.overlay.fadeIn(this,20)" />
       <img src="${ctx}/wangyun/images/f3.jpg"width="150" alt="点我"
            οnclick="AUI.overlay.fadeIn(this,20)" />
       <img src="${ctx}/wangyun/images/f4.jpg" width="150" alt="点我"
            οnclick="AUI.overlay.fadeIn(this,20)" />
       <img src="${ctx}/wangyun/images/f5.jpg" width="150" alt="点我"
            οnclick="AUI.overlay.fadeIn(this,20)" />
    </div>

    <div id="box">
        <div id="box-inner">
            <button οnclick="AUI.overlay.fadeOut(20)" class="btn">×</button>

            <img id="show" src="" width="" alt='原生js的点击图片弹出预览效果(支持上一张下一张)'
             />
            <!--  
            <p id="text"></p> -->
            <button οnclick="AUI.overlay.next(20)" class="btn">下一张</button>
            <button οnclick="AUI.overlay.rotateRight('show',90)" class="btn">右转</button>
            <button οnclick="AUI.overlay.pre(20)" class="btn btn-left">上一张</button>
            <button οnclick="AUI.overlay.rotateLeft('show',90)" class="btn btn-left">左转</button>
            
        </div>

    </div>
    <div id="bg"></div>
</body>
</html>
sumi
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS实现3D图片旋转展示效果代码
11-26
这是一段JavaScript代码，围绕成3D模型样式的JavaScript图片旋转展示代码，这里为了演示方便，将图片替换成了数字，预留出了图片的位置，这样速度快些，会HTML的朋友都知道用时候该怎么做。本图片旋转需要手功控制，...
html清除图片上下间距,css - 三种方法解决LI和内部Img的上下间距问题
weixin_34537864的博客
06-04 1093
在火狐浏览器和谷歌浏览器(qq浏览器，谷歌内核)bug类似这张图：img的高度是190*127但是放到li中，li并没有设置高度，却和内部的图片之间上下错位。若强行给li设置高度127，他和img依旧不能重合。虽然肉眼看不出来。解决这个问题有如下三种方法：一、设置li的font-size：0；如果你很幸运，布局中li里边不需要放文字的话，那么就可以这么用了。二、设置img的vertical-ali...
分享126个JS图片代码，总有一款适合您
zy0412326的专栏
02-08 452
JS
分享118个JS图片代码，总有一款适合您
zy0412326的专栏
02-08 793
js
分享78个JS相册代码，总有一款适合您
zy0412326的专栏
02-08 2966
js
js+css3图片切换立体旋转代码
04-06
js+css3图片切换立体旋转代码是一款3D旋转的图片轮播特效。
基于JS代码实现图片在页面中旋转效果
11-22
1.概述 在一些交易平台网站，如淘宝网、...（1）本例利用javaScript的Math对象的正弦和余弦值来改变当前层的位置，代码如下： [removed] var x1=200; var x2=200; var timer; var r=60; var i = 0; function eddyp
图片旋转、鼠标滚轮缩放、镜像、切换图片js代码
11-24
本文实例为大家展示了图片旋转、鼠标滚轮缩放、镜像、切换图片多重效果，提供了详细的代码，分享给大家供大家参考，具体内容如下 具体代码： <!DOCTYPE html> <html lang="zh-cn"> <head> <...
用javascript实现旋转图片效果的代码
10-30
用javascript实现旋转图片效果的代码
easyui Datagrid+searchbox 实现搜索功能
热门推荐
Stay hungry,stay foolish!
10-11 5万+
这是
tomcat 卡死 Initializing Spring root WebApplicationContext
Stay hungry,stay foolish!
09-20 2万+
validateJarFile(C:\apache-tomcat-7.0.55\webapps\developer\WEB-INF\lib\servlet-api.jar) - jar not loaded. See Servlet Spec 3.0, section 10.7.2. Offending class: javax/servlet/Servlet.class 2014-9-20 1
如何去掉从数据库中读出的带有html标签的字符串，并是标签起效，显示在前台页面
Stay hungry,stay foolish!
11-18 1万+
内容
Eagerly caching bean '' to allow for resolving potential circular references
Stay hungry,stay foolish!
02-12 7747
tomcat启动时卡在： 一般这样的问题是两个原因： 1. 数据库连接不上； 2. mapper.xml 中有错误，比如单词拼写错误； 这个问题不是，采取的方法是 把项目的日志级别调整为debug模式，查看详细打印信息： DEBUG o.s.b.factory.support.DefaultListableBeanFactory - Ignoring bean creation ex
This is class com.sumiplus.servlet.RedirectServlet, using the GET method
Stay hungry,stay foolish!
04-02 5753
This is class com.sumiplus.servlet.RedirectServlet, using the GET method 出现这个这个问题，是由于servlet没有被编译，把部署的项目删除了再重新部署一下就好了。
struts2 SUCCESS cannot be resolved to a variable
Stay hungry,stay foolish!
09-09 5023
struts2  SUCCESS cannot be resolved to a variable，一直出现这个错误，写的l
Myeclipse 10 点击部署按钮没有反应
Stay hungry,stay foolish!
09-09 4914
这个问题,就是工作空间的问题，需要删除你工作空间的一个文件就可以解决这个文件在Myeclipse
Tomcat目录下文件详解
Stay hungry,stay foolish!
01-17 4858
一、Tomcat背景   （转） 自从JSP发布之后，推出了各式各样的JSP引擎。Apache Group在完成GNUJSP1.0的开发以后，开始考虑在SUN的JSWDK基础上开发一个可以直接提供Web服务的JSP服务器，当然同时也支持 Servlet，这样Tomcat就诞生了。Tomcat是jakarta项目中的一个重要的子项目，其被JavaWorld杂志的编辑选为2001年度最具创新的jav
Hibernat 使用Criteria查询多对多关系（SET集合）条件
Stay hungry,stay foolish!
11-29 4209
1.版块 module{   private Set moderators=new HashSet(); } 版主 moderator{ private Set modules=new HashSet(); } module.hbm.xml                       版块和版主是多对多关系，现在根据版主名来搜索版块 查询
js实现图片旋转功能的完整代码
最新发布
06-08
以下是一个简单的JavaScript实现图片旋转的完整代码： HTML代码： ```html <img id="myImage" src="image.jpg"> <button onclick="rotateImage()">旋转</button> ``` JavaScript代码： ```javascript function rotateImage() { var img = document.getElementById("myImage"); var currentRotation = parseInt(img.getAttribute("data-rotation")); var newRotation = currentRotation + 90; img.setAttribute("data-rotation", newRotation); img.style.transform = "rotate(" + newRotation + "deg)"; } ``` 在这个例子中，我们首先为图片元素添加一个自定义属性“data-rotation”，用于存储当前旋转角度。然后，在按钮点击时，我们使用JavaScript获取图片元素，读取当前旋转角度，将其增加90度，并将新角度存储回“data-rotation”属性中。最后，我们使用CSS3的transform属性将图片旋转到新角度。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值