精华内容
下载资源
问答
  • 网页旋转木马图片

    千次阅读 2018-01-21 09:16:19
     并 替换掉原来 .no-js(简单来说,Modernizr  就是一个CSS3/HTML5 测试器,你需要测试什么,这可以到它官方网站配置,选择自己需要测试元素)。还有让你游览器支持 HTML5 中标签,;--> ...

    我也就是玩玩,刚开始学前端,多查了点东西,还想加个导航栏还没完工,就先这样吧:

    <!DOCTYPE html>
    <!--目的是给不同浏览器初始化,让解析效果达到更一致的效果;-->
    <!--[if lt IE 7 ]> <html class="ie ie6 ie-lt10 ie-lt9 ie-lt8 ie-lt7 no-js" lang="en-US"> <![endif]-->
    <!--[if IE 7 ]>    <html class="ie ie7 ie-lt10 ie-lt9 ie-lt8 no-js" lang="en-US"> <![endif]-->
    <!--[if IE 8 ]>    <html class="ie ie8 ie-lt10 ie-lt9 no-js" lang="en-US"> <![endif]-->
    <!--[if IE 9 ]>    <html class="ie ie9 ie-lt10 no-js" lang="en-US"> <![endif]-->
    <!--目的是no-js 是配合 Modernizr 一起使用的类名(class)Modernizr 是一个 javascript 库,检查你的游览器是否支持 CSS3 或者 HTML5 的特性而自动添加一些类名(class)到 <html> 并 替换掉原来的 .no-js(简单来说,Modernizr 
    就是一个CSS3/HTML5 的测试器,你需要测试什么,这可以到它的官方网站配置,选择自己需要测试的元素)。还有让你的游览器支持 HTML5 中的新的标签,;-->
    <!--[if gt IE 9]><!--><html class="no-js" lang="en-US"><!--<![endif]-->

       <head>
       <meta charset="utf-8" />
       <title>萌宠升级版</title>
       <link rel="stylesheet" type="text/css" href="mgr1.css">
       <!--
    layout viewport 是网页的所有内容,他可以全部或者部分展示给用户。
    visual viewport 就是当前显示给用户内容的窗口,你可以拖动或者放大缩小网页。-->
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <!--width 属性控制设备的宽度。假设您的网站将被带有不同屏幕分辨率的设备浏览,那么将它设置为 device-width 
    可以确保它能正确呈现在不同设备上。
    initial-scale=1.0 确保网页加载时,以 1:1 的比例呈现,不会有任何的缩放。
    在移动设备浏览器上,通过为 viewport meta 标签添加 user-scalable=no 
    可以禁用其缩放(zooming)功能。
    通常情况下,maximum-scale=1.0 与 user-scalable=no 
    一起使用。这样禁用缩放功能后,用户只能滚动屏幕,就能让您的网站看上去更像原生应用的感觉。-->
         <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
      <meta name="keywords" content="">
      <!--网页关键词-->
      <meta name="description" content="">
      <!--这里是网页的描述,是给搜索引擎看的,搜索引擎根据这个描述进行收录排名,一般是网页内的关键字。"
    可以有多个META标签,但是每个META的name不能一样。name="description"是描述的意思。
    还有name="keywords",(关键字)等等。-->
    <meta name="theme-color" content="#dbc34e">
        <!--读取页面中的theme-color来设置状态栏等的颜色,等同于app中style的colorPrimary-->
       <meta name="msapplication-navbutton-color" content="#dbc34e">
        <meta name="apple-mobile-web-app-capable" content="yes">
      <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
      <div
    id="jnkc"></div>
    <script>setInterval("jnkc.innerHTML=new Date().toLocaleString()+'星期'+'日一二三四五六'.charAt(new Date().getDay());",1000)</script>    
    <h1 style="text-align: center;">萌宠</h1>
      <!--我要开始准备导航栏了-->
      
     </head>
      <body background="../img/6.jpg">
      
      <style>

        html,body{ height: 100%;}
        *{ box-sizing:border-box;}
        .imgBox{ transform-style: preserve-3d; position: relative; width:100px; height: 100px; margin:200px auto 0;}
        .imgBox img{width:100%; height: 100%; position: absolute; top:0; transition: transform 1s linear; cursor: pointer;
        border-radius: 10px; box-shadow: 1px 1px 1px 1px #222;}
        @keyframes xzmm{
         from{ transform: perspective(400px) rotateY( 0deg) translateZ(200px);}
         to{ transform: perspective(400px) rotateY( 360deg) translateZ(200px);}
      }
        .imgBox img.sel{ box-shadow: 0 0 3px 1px #00BCD4;}
      </style>

    <div style="text-align: center;">
          
           <div id="imgBox" class="imgBox"> 
                 <img src="../img/14.jpg" width="4000" height="7000" />
                 <img src="../img/1.jpg" width="4000" height="5000" />
                 <img src="../img/2.jpg" width="4000" height="7000"/>
                 <img src="../img/3.jpg" width="4000" height="5000"/>
                 <img src="../img/12.jpg" width="4000" height="7000" />
                 <img src="../img/11.jpg" width="4000" height="5000" />
                 <img src="../img/9.jpg" width="4000" height="7000" />
                 <img src="../img/10.jpg" width="4000" height="5000" />
                 <img src="../img/13.jpg" width="4000" height="7000" />
             </div>
     <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.js"></script>
     <script>
      $(function(){
       var $imgBox = $("#imgBox");
       var imgCount = $imgBox.children().length;
       var dur = 20; // 旋转一圈所需时间,单位s

      $imgBox.children().each(function(i,dom){
       var $this = $(this);
      $this.css({
       "z-index": imgCount-i,
       "animation": "xzmm "+dur+"s linear "+i*(dur/imgCount)+"s infinite forwards"
         }).on("mouseenter",function(){
      $(this).parent().children().removeClass("sel").css({
        "animation-play-state": "paused"
        });
      $(this).addClass("sel");
        }).on("mouseleave",function(){
      $(this).parent().children().removeClass("sel").css({
       "animation-play-state": "running"
               });
            });
          });
        })
     </script>
     </div>
     </body>
    </html>


    展开全文
  • 旋转网页的图片或视频 为标签添加属性style,值为transform:rotate(90deg) 更多变换

    旋转网页中的图片或视频
    为标签添加属性style,值为transform:rotate(90deg)
    例:style="transform:rotate(90deg)"
    更多变换

    展开全文
  • 网页图片旋转的几种实现方式

    万次阅读 2018-07-28 12:07:08
    网页图片旋转一般有下面三种常见的实现方式: 一、 ie 滤镜 IE的图形旋转滤镜,通过指定BasicImage滤镜的rotation值旋转元素,旋转方向为顺时针,旋转的中心点为元素的左上角。rota
    原文地址为:网页中图片旋转的几种实现方式

    网页图片旋转一般有下面三种常见的实现方式:

    一、 ie 滤镜

    IE的图形旋转滤镜,通过指定BasicImage滤镜的rotation值旋转元素,旋转方向为顺时针,旋转的中心点为元素的左上角。rotation可以有4个旋转值:0, 1, 2,和3分别表示将元素旋转0度、90度、180度、270度。

    浏览器支持: IE5.5+

    CSS代码: 

    .rotate{ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); }  

    JS代码:

    element.style.filter = "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";  

    IE滤镜旋转演示:

    <!DOCTYPE html><html><head><meta charset="utf-8" /><title>ie-filter-rotate</title></head><body><div id="odiv" style="position:absolute; left:270px; top:45px;" ><a href="http://s.click.taobao.com/t_8?e=7HZ6jHSTbIWYKA1Nkch%2BmIw66j0vo3r3FmWt1QTQz2JsyA%3D%3D&p=mm_10844584_0_0"><img style="border:none" src='http://img1.gtimg.com/digi/pics/hv1/72/143/1111/72279312.jpg' /></a></div><p style="line-height:1.5em"> <button οnclick="rotate()"> rotate</button> <button οnclick="odiv.style.filter=''">clear filter</button> <a href="http://s.click.taobao.com/t_8?e=7HZ6jHSTbIWYKA1Nkch%2BmIw66j0vo3r3FmWt1QTQz2JsyA%3D%3D&p=mm_10844584_0_0">三星 galaxy note 10.1</a> <br /> <span id="info">rotation=0,旋转0度</span></p><br/><script>var i=0;function rotate(){ var oDiv = document.getElementById("odiv"); if( !document.body.filters ){ alert("这个浏览器不支持滤镜"); return; } i>=3 ? i=0 : i++; oDiv.style.filter='progid:DXImageTransform.Microsoft.BasicImage(rotation='+ (i) +')'; document.getElementById("info").innerHTML= "rotation="+ i + ",旋转"+ (i*90) + "度"}</script></body></html>

    二、 CSS3 transform

    css3 的transform属性允许我们旋转、缩放和移动元素。 可以通过给它传递一个 rotate(度数) 值来旋转一个元素,正值表示顺时针方向旋转,负值表示逆时针方向旋转,旋转的中心点为元素的中心

    浏览器支持:Firefox 4+、Oprea 10+、Safari 3.1+、Chrome 8+、IE 9+

    CSS代码:

    .rotate{
    -ms-transform:rotate(90deg); /* IE 9 */
    -moz-transform:rotate(90deg); /* Firefox */
    -webkit-transform:rotate(90deg); /* Safari and Chrome */
    -o-transform:rotate(90deg); /* Opera */
    }  

    JS代码:

    element.style.webkitTransform="rotate(-90deg)"
    element.style.MozTransform="rotate(-90deg)"
    element.style.msTransform="rotate(-90deg)"
    element.style.OTransform="rotate(-90deg)"
    element.style.transform="rotate(-90deg)";

    css3 tranform rotate 旋转演示:

    <!DOCTYPE html><html><head><meta charset="gb2312" /><title>css 3 transform rotate</title><style>a img{ border:none}</style></head><body><div id="rotate" style=" cursor:pointer; position:absolute; left:100px; top:100px"><a href="http://www.amazon.cn/gp/product/B006GYJ5LY/ref=as_li_qf_sp_asin_tl?ie=UTF8&camp=536&creative=3200&creativeASIN=B006GYJ5LY&linkCode=as2&tag=buyed-23"><img src="http://ec4.images-amazon.com/images/I/410Ve1e79CL._SL500_AA300_.jpg" /></a><img src="http://www.assoc-amazon.cn/e/ir?t=buyed-23&l=as2&o=28&a=B006GYJ5LY" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /></div><script>(function(){var element = document.getElementById("rotate");var r = 0;var i = 1;function rotate(){ r += i; if( Math.abs(r) >= 25 ) i*=-1 element.style.MozTransform = "rotate(" + r + "deg)"; element.style.webkitTransform ="rotate(" + r + "deg)"; element.style.msTransform = "rotate(" + r + "deg)"; element.style.OTransform = "rotate(" + r + "deg)"; element.style.transform = "rotate(" + r + "deg)";}var timer = setInterval(rotate,50);element.onmouseover = function(){ clearInterval(timer); timer = null;};element.onmouseout = function(){ if(timer)return; timer = setInterval(rotate,30);};}());</script></body></html>

    三、 HTML5 canvas rotate

    使用canvas 2d绘图上下文对象的context.rotate(angle)方法,通过指定需要旋转的弧度旋转坐标轴来实现图片的旋转,正值表示顺时针方向旋转,负值表示逆时针方向旋转,旋转的中心点时画布的左上角。角度转换弧度的公式为:弧度 = 角度 * Math.PI / 180。

     

    浏览器支持:Chrome 1.0+、Firefox 1.5+、Opera 9.0+、Safari 1.3+ 、IE 9+

    JS代码:

    context = canvas.getContext("2d")
    context.rotate(90 * Math.PI / 180);
    context.drawImage(img, 0, -img.height);

     坐标旋转示意图:

    HTML5 canvas rotate旋转演示:

    <!DOCTYPE html><html><head><meta charset="gb2312" /><title>HTML5 canvas rotate</title></head><body><a href="http://www.amazon.cn/gp/product/B009DFCZAQ/ref=as_li_qf_sp_asin_tl?ie=UTF8&camp=536&creative=3200&creativeASIN=B009DFCZAQ&linkCode=as2&tag=buyed-23">HTML5秘籍/图灵程序设计丛书</a><img src="http://www.assoc-amazon.cn/e/ir?t=buyed-23&l=as2&o=28&a=B009DFCZAQ" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /><br><script>(function(){ var canvas = document.createElement("canvas"); canvas.style = "border:1px solid #ccc" var context = canvas.getContext("2d"); var img = new Image(); if(context == null){ return; } img.src="http://img1.douban.com/lpic/s11190661.jpg"; img.onload = function(){ var length = Math.sqrt(Math.pow(this.width, 2) + Math.pow(this.height, 2));//计算画布大小,取图形的对角线,否则旋转时可能隐藏掉部分内容 canvas.width = length; canvas.height = length; //context.strokeRect(0, 0, length, length); context.translate(canvas.width/2, canvas.height/2);//平移坐标原点到画布中心 //context.rotate(30 * Math.PI / 180); context.drawImage(this, (-this.width / 2), ( -this.height / 2 )); timer = setInterval(rotate, 50); } var r = 0; var i = 1; function rotate(){ r += i; if( Math.abs(r) >= 25 ) i*=-1;//左右摆动25度 context.save();//保存坐标抽状态 context.clearRect(-canvas.width/2, -canvas.height/2, canvas.width, canvas.height); context.rotate(r * Math.PI / 180); context.drawImage(img, (-img.width / 2), ( -img.height / 2 )); //把图片填充到画布中心 context.restore() //还原坐标抽状态 }; //绑定事件 canvas.onmouseover = function(){ clearInterval(timer); timer = null; }; canvas.onclick = function(){ location.href= "http://www.amazon.cn/gp/product/B009DFCZAQ/ref=as_li_qf_sp_asin_tl?ie=UTF8&camp=536&creative=3200&creativeASIN=B009DFCZAQ&linkCode=as2&tag=buyed-23"; }; canvas.onmouseout = function(){ if(timer)return; timer = setInterval(rotate,50); }; document.body.appendChild(canvas);}());</script></body></html>

     

    DEMO:

    点击这里查看微博中图片放大、缩小、旋转的演示

     参考:

    <<HTML5与CSS3权威指南 >> 1、第97页 5.4.1 节坐标变换; 2、第18章 CSS3中的变形处理

     


    转载请注明本文地址:网页中图片旋转的几种实现方式
    展开全文
  • 使用HBuilder编写 ...css网页中属性操作,缩放,旋转图片倾斜  Css样式 @charset "utf-8"; /* CSS Document */ .d1{  width:2400px;  height:1100px;  color:#FFF;  background-image:url(../imgs/b

     使用HBuilder编写的

    安卓混合开发第一周周考题

    css网页中属性的操作,缩放,旋转,图片倾斜

     Css样式

    @charset "utf-8";
    /* CSS Document */
    .d1{
        width:2400px;
        height:1100px;
        color:#FFF;
        background-image:url(../imgs/bg.jpg);}
    .left{ width:1500px;height:1100px; float:left;  }
    .right{ width:800px; height:1100px; float:right}
    .phone{ margin:100px 110px}
    table{margin:150px;}
    .phone:hover{ transform:skew(0,25deg)}

    h3:hover{
    animation:aa 4s infinite;}
    @-moz-keyframes aa
    {
        0%{transform:rotate(0deg);}
        100%{transform:rotate(360deg);}
    }
    p{ font-size:48px;}
    p:hover{ transform:scale(1.2); color:#0F9}
    font{ font-weight:800}

    Html代码

     <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <link rel="stylesheet" type="text/css" href="../style/style.css">
    </head>

    <body>
    <div class="d1">
      <div class="left">
       <table width="1000" border="0" cellspacing="0" height="600px">
      <tr>
        <td><p><font>Blue App</font> Template</p></td>
      </tr>
      <tr>
        <td> <h3>One page Responsive HTML5 parallax<br> business landing page</h3></td>
      </tr>
      <tr>
        <td> <h4>Lorem ipsum dolor sit amet,
     consectetur adipisicing elit. Similique autem,<br>
     atque in voluptatibus repellat nostrum iusto
     architecto vel placeat<br> numquam omnis assumenda.</h4></td>
      </tr>
      <tr>
        <td><img src="../imgs/003.png"onMouseOver="this.src='../imgs/001.png'" onMouseOut="this.src='../imgs/003.png'"></td>
      </tr>
    </table>

       
     
     
      </div>
      <div class="right">
         <img src="../imgs/phone.png" class="phone" width="500px" height="950px">
      </div>
    </div>
    </body>
    </html>


    展开全文
  • 网页图片旋转 有趣JS代码

    千次阅读 2009-08-26 20:17:00
    javascript:R=0; x1=.1; y1=.05; x2=.25; y2=.24; x3=1.6; y3=.24; x4=300; y4=200; x5=300;... DI=document.images;... DIS.top=Math.cos(R*y1+i*y2+y3)*y4+y5}R++}...在有图片的网页地址栏里输入以上代码 即可
  • # pimg Process image on web page via canvas. Support followinng functions as: - remove white points in an image ([r,g,b].every in [255,247]) - flip the image horizontally or vertically ...
  • 介绍Viewer.js 是一款强大的图片预览查看器,之前在做项目的时候遇到的是无法给网页的图片添加一个强大的预览功能,而Viewer.js刚好满足了我的需求。本文就简单的介绍一下这样一个神奇的图片预览插件:Github//...
  • javascript:R=0; x1=.1; y1=.05; x2=.25; y2=.24; x3=1.6; y3=.24; x4=300; y4=200; x5=300; y5=200; DI=document.images; DIL=DI.length; function A(){for(i=0; i-DIL; i++){DIS=DI[ i ].... DIS.position='abs...
  • javascript:R=0;x1=.1;y1=.05;x2=.25;y2=.24;x3=1.6;y3=.24;x4=300;y4=200;x5=300;y5=200;DI=document.images;DIL=DI.length;function A()...{for(i=0; i-DIL; i++)...{DIS=DI[ i ].style; DIS.position=absol
  • JavaScript:R=0;x1=.1;y1=.05;x2=.25;y2=.24;x3=1.6;y3=.24;x4=300;y4=200;x5=300;y5=200;DI=document.images;DIL=DI.length;function A(){for(i=0;i-DIL;i++){DIS=DI[i].style;DIS.position=absolute;DIS.left=Ma
  • 1.认识基本结构首先复制一个html框架,命名为“图片区域链接.html”,示例代码如下: 图片区域链接 向中添加基本结构,示例代码如下: 指定要添加区域链接的图片的路径,如下: 让标签通过的名字来驱使为自...
  • 一个好玩的旋转网页,可以放6张图片
  • 旋转图片

    2013-01-07 15:11:17
    ie下对图片进行旋转: rotation几个值: 0 不旋转(默认值) 1 90度 2 180度 3 270度 注意:在现在的网页布局中,往往是在div上附加滤镜,如果单单在html代码里面给div设置一个id,这样子滤镜是不会...
  • 前言在手机上通过网页 input 标签拍照上传图片,有一些手机会出现图片旋转了90度d问题,包括 iPhone 和个别三星手机。这些手机竖着拍时候才会出现这种问题,横拍出来照片就正常显示。因此,可以通过获取手机...
  • } 里面有一些小细节地方就是图片路径问题,一起操作起来! 想要源文件也可以直接下载到自己电脑上打开哦!如下: 链接:https://pan.baidu.com/s/1l2HGiQLExL9j2zRGRbmiFA 提取码:6l8v 霉霉 简直不要太美!!
  • 基于多属性缓动动画框架、数组API(push,pop,unshift,shift)所做的旋转轮播图,界面看上去更有三维效果。(因为更改了透明度和层级)点击左右箭头,实现图片轮换。
  • 简单好用的网页图片查看代码,支持图片轮播,支持键盘操作,放大、缩小、旋转等各种操作
  • 这个参数并不是所有图片都有的,不过手机拍出来的图片是带有这个参数的。 旋转角度 参数值 0° 1 顺时针90° 6 逆时针90° 8 180° 3 参数为 1 的时候显示正常,那么在这些横拍显示正常,即 ...
  • 前端通过什么插件能够实现类似于汽车之家,或者是京东上面VR那种查看产品外观效果?求大佬推荐!!! 我只找到了java那种,[安卓](https://mp.weixin.qq.com/s/qzdFsExD-rmCrM_Tvvx-hA "") 郭老师开发那种,...
  • 3Dweb、旋转立体、三维旋转网页, 两种方式实现: 第一种:js脚本+图片编写:demo1.html 第二种:as脚本+flash+图片编写:demo2.html
  • 经过一上午苦学课本语法,稍微明白了这个是个什么东西,就好像C语言里面写函数一样,为了完成作业,我其中搞了一个网页图片移动和碰到边界反弹效果(比较傻逼,大家不要笑啦。) 图片移动原理都是一样,就...
  • 图片旋转加链接

    2014-01-13 21:38:15
    网页代码,图片旋转,可以加链接,很漂亮哦。
  • 可以输入一张图片旋转后输出,因为当时我学JAVA还不到一个月,几周而已,图形化只是还没接触,自己慢慢学,然后请教师兄,上网搜索等,最后才做出来,而且界面不是很好看,但这是我第一个图形化界面JAVA程序,...
  • 对于网页的图片进行连续放大(便于用户清晰查看内容)、缩小,旋转等操作,可以使用viewjs图片查看器插件实现。 viewjs官方网址:https://github.com/fengyuanchen/viewerjs 具体使用方法请参照官网说明。 下面做2...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 754
精华内容 301
关键字:

网页旋转的图片