js实现图片展示效果
js预览文件方法
js预览文件方法在JavaScript中预览文件通常指的是在用户选择文件后，能够在网页上直接查看文件内容，而不是下载后查看。
这种功能在处理图片、文本文件、PDF等时特别有用。
下面我将介绍几种常见文件类型的预览方法。
1. 图片预览图片预览相对简单，可以直接使用HTML的<img>标签和FileReader API。
html复制代码<input type="file" id="fileInput" accept="image/*"><img id="previewImage" src="#" alt="Image preview..."><script>document.getElementById('fileInput').addEventListene r('change', function(e) {var file = e.target.files[0];var reader = new FileReader();reader.onloadend = function() {document.getElementById('previewImage').src = reader.result;if (file) {reader.readAsDataURL(file);} else {previewImage.src = "";}});</script>2. 文本文件预览文本文件预览可以使用<textarea>或<pre>标签与FileReader API。
html复制代码<input type="file" id="fileInput" accept="text/*"><textarea id="previewText" rows="10"cols="50"></textarea><script>document.getElementById('fileInput').addEventListene r('change', function(e) {var file = e.target.files[0];var reader = new FileReader();reader.onloadend = function() {document.getElementById('previewText').textContent = reader.result;}if (file) {reader.readAsText(file);} else {previewText.textContent = "";}});</script>3. PDF预览PDF预览稍微复杂一些，因为浏览器原生不支持直接预览PDF 内容。
JavaScript实现动态网页特效
JavaScript实现动态网页特效JavaScript是一种常用的编程语言，可以用于实现动态网页特效。
通过JavaScript，开发者可以为网页添加各种交互效果，使用户体验更加丰富和吸引人。
以下是一些常见的JavaScript动态网页特效的实现方法：1. 鼠标悬停效果：通过JavaScript可以实现当鼠标悬停在某个区域上时，改变该区域的样式或显示隐藏的内容。
例如，当用户将鼠标悬停在一个按钮上时，可以让按钮的颜色变化或显示按钮下方的一段描述文字。
2. 幻灯片效果：通过JavaScript可以实现网页上的幻灯片效果，使多张图片自动轮播展示。
可以通过设置定时器和改变图片的显示状态来实现。
这种效果常用于图片展示、轮播广告等地方。
3. 下拉菜单效果：通过JavaScript可以实现网页上的下拉菜单效果，让用户点击或悬停在一个导航栏上时，下方显示出更多的选项。
可以通过设置事件监听和改变菜单的可见性来实现。
4. 表单验证效果：通过JavaScript可以实现网页上的表单验证效果，检查用户输入的内容是否符合要求。
可以通过设置事件监听和编写验证函数来实现。
例如，当用户提交表单时，可以检查是否所有的必填项都已填写，并给出相应的提示。
5. 动态加载内容效果：通过JavaScript可以实现动态加载内容的效果，当用户滚动网页到一定位置时，自动加载更多的内容。
可以通过监听滚动事件和设置ajax 请求来实现。
这种效果常用于博客、社交媒体等网站上。
6. 特效动画效果：通过JavaScript可以实现各种特效动画，如淡入淡出效果、滑动效果、旋转效果等。
可以通过改变元素的显示状态、设置定时器和改变元素的样式来实现。
这种效果常用于网页中的广告、特效展示等地方。
7. 音频视频播放效果：通过JavaScript可以实现网页上的音频和视频播放效果。
可以通过设置事件监听、控制播放状态和改变样式来实现。
例如，当用户点击一个按钮时，可以播放音频或视频，并显示相应的控制按钮。
JS图片屏幕旋转特效代码
JS图片旋转特效代码JS图片旋转代码，像屏幕一样围成柱体圆形的图片旋转特效，图片的高度和宽度可自设，图片路径也可自定义，还有旋转速度也可以自定义调节。
<body onLoad="Carousel()"><script type="text/javascript">var Car_Image_Width=320;var Car_Image_Height=275;var Car_Border=true;var Car_Border_Color="white";var Car_Speed=4;var Car_Direction=true;var Car_NoOfSides=8;Car_Image_Sources=new Array("/jscss/demoimg/wall_s2.jpg","","/jscss/demoimg/wall_s3.jpg","","/jscss/demoimg/wall_s4.jpg","", //this slide isn't linked"/jscss/demoimg/wall_s7.jpg","" // NOTE No comma after last line);CW_I=new Array(Car_NoOfSides/2+1);C_ClcW=new Array(Car_NoOfSides/2);C_Coef=new Array(3*Math.PI/2,0,3*Math.PI/2,11*Math.PI/6,Math.PI/6,3*Math.PI/2,7*Math.PI/4, 0,Math.PI/4,3*Math.PI/2,5*Math.PI/3,11*Math.PI/6,0,Math.PI/6,Math.PI/3);var C_CoefOf=Car_NoOfSides==4?0:Car_NoOfSides==6?2:Car_NoOfSides==8?5:9;C_Pre_Img=new Array(Car_Image_Sources.length);varC_Angle=Car_Direction?Math.PI/(Car_NoOfSides/2):0,C_CrImg=Car_NoOfSides,C_MaxW,C_T otalW,C_Stppd=false,i,C_LeftOffset,C_HalfNo=Car_NoOfSides/2;function Carousel(){if(document.getElementById){for(i=0;i<Car_Image_Sources.length;i+=2){C_Pre_Img[i]=new Image();C_Pre_Img[i].src=Car_Image_Sources[i]} C_MaxW=Car_Image_Width/Math.sin(Math.PI/Car_NoOfSides)+C_HalfNo+1;Car_Div=document.getElementById("Carousel");for(i=0;i<C_HalfNo;i++){CW_I[i]=document.createElement("img");Car_Div.appendChild(CW_I[i]);CW_I[i].style.position="absolute";CW_I[i].style.top=0+"px";CW_I[i].style.height=Car_Image_Height+"px";if(Car_Border){CW_I[i].style.borderStyle="solid";CW_I[i].style.borderWidth=1+"px";CW_I[i].style.borderColor=Car_Border_Color}CW_I[i].src=Car_Image_Sources[2*i];CW_I[i].lnk=Car_Image_Sources[2*i+1];CW_I[i].onclick=C_LdLnk;CW_I[i].onmouseover=C_Stp;CW_I[i].onmouseout=C_Rstrt}CarImages()}}function CarImages(){if(!C_Stppd){C_TotalW=0;for(i=0;i<C_HalfNo;i++){C_ClcW[i]=Math.round(Math.cos(Math.abs(C_Coef[C_CoefOf+i]+C_Angle))*Car_Image_ Width);C_TotalW+=C_ClcW[i]}C_LeftOffset=(C_MaxW-C_TotalW)/2;for(i=0;i<C_HalfNo;i++){CW_I[i].style.left=C_LeftOffset+"px";CW_I[i].style.width=C_ClcW[i]+"px";C_LeftOffset+=C_ClcW[i]}C_Angle+=Car_Speed/720*Math.PI*(Car_Direction?-1:1);if((Car_Direction&&C_Angle<=0)||(!Car_Direction&&C_Angle>=Math.PI/C_HalfNo)){ if(C_CrImg==Car_Image_Sources.length)C_CrImg=0;if(Car_Direction){CW_I[C_HalfNo]=CW_I[0];for(i=0;i<C_HalfNo;i++)CW_I[i]=CW_I[i+1];CW_I[C_HalfNo-1].src=Car_Image_Sources[C_CrImg];CW_I[C_HalfNo-1].lnk=Car_Image_Sources[C_CrImg+1]}else{ for(i=C_HalfNo;i>0;i--)CW_I[i]=CW_I[i-1];CW_I[0]=CW_I[C_HalfNo];CW_I[0].src=Car_Image_Sources[C_CrImg];CW_I[0].lnk=Car_Image_Sources[C_CrImg+1]}C_Angle=Car_Direction?Math.PI/C_HalfNo:0;C_CrImg+=2}} setTimeout("CarImages()",50)}function C_LdLnk(){if(this.lnk)window.location.href=this.lnk}function C_Stp(){this.style.cursor=this.lnk?"pointer":"default";C_Stppd=true;}function C_Rstrt(){C_Stppd=false}</script>吕延良博客整理发布，更多的网站特效和广大站长分享讨论！<div id="Carousel" style="position:relative"></div>。
js实现点击图片在屏幕中间弹出放大效果
js实现点击图⽚在屏幕中间弹出放⼤效果js实现点击图⽚在屏幕中间弹出放⼤效果效果图点击图⽚后关键代码html<div><img height="100" width="100" src="https:///photo/2018/08/14/13/23/ocean-3605547_960_720.jpg" class="pic"/><img height="100" width="100" src="https:///photo/2011/12/14/12/21/orion-nebula-11107_960_720.jpg" class="pic"/><img height="100" width="100" src="https:///photo/2017/08/30/01/05/milky-way-2695569_960_720.jpg" class="pic"/></div><div id="outerdiv" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:2;width:100%;height:100%;display:none;"><div id="innerdiv" style="position:absolute;"><img id="bigimg" style="border:5px solid #fff;" src="" /></div>js<script src="./jquery.min.js"></script><script type="text/javascript">$(function(){$(".pic").click(function(){var _this = $(this);//将当前的pimg元素作为_this传⼊函数imgShow("#outerdiv", "#innerdiv", "#bigimg", _this);});});function imgShow(outerdiv, innerdiv, bigimg, _this){var src = _this.attr("src");//获取当前点击的pimg元素中的src属性$(bigimg).attr("src", src);//设置#bigimg元素的src属性/*获取当前点击图⽚的真实⼤⼩，并显⽰弹出层及⼤图*/$("<img/>").attr("src", src).load(function(){var windowW = $(window).width();//获取当前窗⼝宽度var windowH = $(window).height();//获取当前窗⼝⾼度var realWidth = this.width;//获取图⽚真实宽度var realHeight = this.height;//获取图⽚真实⾼度var imgWidth, imgHeight;var scale = 0.8;//缩放尺⼨，当图⽚真实宽度和⾼度⼤于窗⼝宽度和⾼度时进⾏缩放if(realHeight>windowH*scale) {//判断图⽚⾼度imgHeight = windowH*scale;//如⼤于窗⼝⾼度，图⽚⾼度进⾏缩放imgWidth = imgHeight/realHeight*realWidth;//等⽐例缩放宽度if(imgWidth>windowW*scale) {//如宽度扔⼤于窗⼝宽度imgWidth = windowW*scale;//再对宽度进⾏缩放}} else if(realWidth>windowW*scale) {//如图⽚⾼度合适，判断图⽚宽度imgWidth = windowW*scale;//如⼤于窗⼝宽度，图⽚宽度进⾏缩放imgHeight = imgWidth/realWidth*realHeight;//等⽐例缩放⾼度} else {//如果图⽚真实⾼度和宽度都符合要求，⾼宽不变imgWidth = realWidth;imgHeight = realHeight;}$(bigimg).css("width",imgWidth);//以最终的宽度对图⽚缩放var w = (windowW-imgWidth)/2;//计算图⽚与窗⼝左边距var h = (windowH-imgHeight)/2;//计算图⽚与窗⼝上边距$(innerdiv).css({"top":h, "left":w});//设置#innerdiv的top和left属性$(outerdiv).fadeIn("fast");//淡⼊显⽰#outerdiv及.pimg});$(outerdiv).click(function(){//再次点击淡出消失弹出层$(this).fadeOut("fast");});}</script>使⽤⽅式将以下两个⽂件放在同⼀个⽂件夹下，使⽤浏览器打开1.html完整代码完整1.html<html><head><script src="./jquery.min.js"></script><script type="text/javascript">$(function(){$(".pic").click(function(){var _this = $(this);//将当前的pimg元素作为_this传⼊函数imgShow("#outerdiv", "#innerdiv", "#bigimg", _this);});});function imgShow(outerdiv, innerdiv, bigimg, _this){var src = _this.attr("src");//获取当前点击的pimg元素中的src属性$(bigimg).attr("src", src);//设置#bigimg元素的src属性/*获取当前点击图⽚的真实⼤⼩，并显⽰弹出层及⼤图*/$("<img/>").attr("src", src).load(function(){var windowW = $(window).width();//获取当前窗⼝宽度var windowH = $(window).height();//获取当前窗⼝⾼度var realWidth = this.width;//获取图⽚真实宽度var realHeight = this.height;//获取图⽚真实⾼度var imgWidth, imgHeight;var scale = 0.8;//缩放尺⼨，当图⽚真实宽度和⾼度⼤于窗⼝宽度和⾼度时进⾏缩放if(realHeight>windowH*scale) {//判断图⽚⾼度imgHeight = windowH*scale;//如⼤于窗⼝⾼度，图⽚⾼度进⾏缩放imgWidth = imgHeight/realHeight*realWidth;//等⽐例缩放宽度if(imgWidth>windowW*scale) {//如宽度扔⼤于窗⼝宽度imgWidth = windowW*scale;//再对宽度进⾏缩放}} else if(realWidth>windowW*scale) {//如图⽚⾼度合适，判断图⽚宽度imgWidth = windowW*scale;//如⼤于窗⼝宽度，图⽚宽度进⾏缩放imgHeight = imgWidth/realWidth*realHeight;//等⽐例缩放⾼度} else {//如果图⽚真实⾼度和宽度都符合要求，⾼宽不变imgWidth = realWidth;imgHeight = realHeight;}$(bigimg).css("width",imgWidth);//以最终的宽度对图⽚缩放var w = (windowW-imgWidth)/2;//计算图⽚与窗⼝左边距var h = (windowH-imgHeight)/2;//计算图⽚与窗⼝上边距$(innerdiv).css({"top":h, "left":w});//设置#innerdiv的top和left属性$(outerdiv).fadeIn("fast");//淡⼊显⽰#outerdiv及.pimg});$(outerdiv).click(function(){//再次点击淡出消失弹出层$(this).fadeOut("fast");});}</script></head><body><div><img height="100" width="100" src="https:///photo/2018/08/14/13/23/ocean-3605547_960_720.jpg" class="pic"/><img height="100" width="100" src="https:///photo/2011/12/14/12/21/orion-nebula-11107_960_720.jpg" class="pic"/><img height="100" width="100" src="https:///photo/2017/08/30/01/05/milky-way-2695569_960_720.jpg" class="pic"/></div><div id="outerdiv" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:2;width:100%;height:100%;display:none;"><div id="innerdiv" style="position:absolute;"><img id="bigimg" style="border:5px solid #fff;" src="" /></div></body></html>jquery.min.js (常规jquery包)/*! jQuery v1.11.1 | (c) 2005, 2014 jQuery Foundation, Inc. | /license */!function(a,b){"object"==typeof module&&"object"==typeof module.exports?module.exports=a.document?b(a,!0):function(a){if(!a.document)throw new Error("jQuery requires a window with a document");return b(a)}:b(a)}("undefined"!=typeof window?window:this,fu if(k&&j[k]&&(e||j[k].data)||void 0!==d||"string"!=typeof b)return k||(k=i?a[h]=c.pop()||m.guid++:h),j[k]||(j[k]=i?{}:{toJSON:m.noop}),("object"==typeof b||"function"==typeof b)&&(e?j[k]=m.extend(j[k],b):j[k].data=m.extend(j[k].data,b)),g=j[k],e||(g.data||(g.data={}),g=g.d },cur:function(){var a=Zb.propHooks[this.prop];return a&&a.get?a.get(this):Zb.propHooks._default.get(this)},run:function(a){var b,c=Z总结以上所述是⼩编给⼤家介绍的js实现点击图⽚在屏幕中间弹出放⼤效果,希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。
viewer.js实现图片预览功能
viewer.js实现图⽚预览功能viewer.js是实现图⽚预览的插件库，要在项⽬中使⽤它⾥⾯的功能，⾸先要引⼊两个⽂件：1、css⽂件:viewer.css2、js⽂件:viewer.js可以在下载下载后，在html中引⼊<link rel="stylesheet" type="text/css" href="./viewer.css" /><script src="./viewer.js" type="text/javascript" charset="utf-8"></script>页⾯布局html部分<div id="imgBox"><div id="imgBoxItem" class="imglist1"><img src="image/img-1.jpg" data-imgurl="image/img-1.jpg"></div><div id="imgBoxItem" class="imglist2"><img src="image/img-2.jpg" data-imgurl="image/img-2.jpg"></div><div id="imgBoxItem" class="imglist3"><img src="image/img-3.jpg" data-imgurl="image/img-3.jpg"></div><div id="imgBoxItem" class="imglist4"><img src="image/img-4.jpg" data-imgurl="image/img-4.jpg"></div></div>CSS部分:* {margin: 0;padding: 0;list-style: none;}body {background-color: #f5f5f5;font-family: 'PingFang SC Regular', 'PingFang SC';width: 100%;min-width: 320px;max-width: 480px;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);text-shadow: none;position: absolute;box-sizing: content-box;word-break: break-all;}#imgBox {width: 92%;margin: 0 auto;margin-top: 10px;display: flex;flex-wrap: wrap;}#imgBoxItem {width: 48%;margin-left: 1%;margin-right: 1%;margin-top: 1%;height: 100px;}#imgBoxItem img {width: 100%;height: 100%;}JS部分:<script type="text/javascript">window.onload = function() {var viewer = new Viewer(document.getElementById('imgBox'), { url: 'data-imgurl'});}</script>效果:预览前:点击图⽚预览:以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。
JavaScript实现图像轮播特效教程
JavaScript实现图像轮播特效教程章节一：引言在现代网页设计中，图像轮播特效是非常常见的元素之一。
通过图像轮播特效，可以使网页更加动态、吸引人，提升用户体验。
本教程将介绍如何使用JavaScript实现图像轮播特效，并提供详细的步骤和示例代码。
章节二：基本结构首先，我们需要准备好轮播图的基本结构。
在HTML文件中，创建一个容器元素，用于包裹轮播图的图片和导航按钮。
然后，给容器元素添加一个唯一的ID，方便在JavaScript中进行操作。
章节三：样式设计接下来，我们需要为轮播图的容器元素和其中的图片设置样式。
使用CSS，可以设置容器元素的宽度和高度，以及图片的显示方式和过渡效果。
通过设置适当的样式，可以使轮播图在页面中居中显示，并可以根据需要进行自定义的设计。
章节四：添加JavaScript代码再接下来，我们需要使用JavaScript编写轮播图的逻辑代码。
首先，使用DOM操作获取到容器元素和其中的图片元素。
然后，使用数组或者类数组对象保存每张图片的路径或地址。
接下来，定义一个变量来存储当前显示的图片的索引。
然后，编写一个函数来实现图像切换的效果。
在函数中，通过改变图片元素的样式或属性，实现图片的切换。
同时，更新当前显示的图片的索引，以便进行下一次切换。
章节五：自动轮播功能除了手动切换图片，我们还可以添加自动轮播的功能。
使用JavaScript的定时器函数，可以定期触发图片切换的函数。
通过设置合适的时间间隔，可以实现自动轮播的效果。
同时，需要添加鼠标移入和移出事件，以便在用户鼠标悬停在图片上时停止轮播，鼠标离开时继续轮播。
章节六：导航按钮如果希望用户可以通过导航按钮来手动控制轮播图的切换，我们还需要添加导航按钮的功能。
在HTML文件中，创建相应数量的导航按钮，并为每个按钮设置一个特定的类名或索引属性。
在JavaScript中，使用事件委托的方式，监听导航按钮的点击事件。
当用户点击某个导航按钮时，获取该按钮的索引，然后调用图片切换函数，显示对应索引的图片。
html+css+js实现拍照预览上传图片功能
html+css+js实现拍照预览上传图⽚功能前⾔：我们在做⽹页时经常会需要有上传图⽚的需求，可能是选择图⽚或者拍照上传，如果简单的使⽤<input type="file"/>这种⽅式虽然也能实现功能，但⽤户体验上可能会差了⼀些，所以本⽂记录了使⽤css+js实现图⽚选中后的预览及压缩上传功能，部分带来来源于⽹络，此处做了记录整理。
效果预览：1.创建index.html<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><title>拍照上传</title><link rel="stylesheet" href="index.css"/><script type='text/javascript' src='index.js' charset='utf-8'></script></head><body><form id="mainForm"><div class="content"><div class="label">⾝份证</div><div class="img-area"><div class="container"><input type="file" id='id-face' name='face' accept="image/*" /><div id='face-empty-result'><img style='width:4rem' src="https:///wangheng3751/my-resources/blob/master/images/camera.png?raw=true" alt=""><p>⾝份证正⾯照</p></div><img style='width: 100%' id='face-result'/></div><div class="container" style='margin-top:0.5rem;'><input type="file" id='id-back' name='back' accept="image/*" /><div id='back-empty-result'><img style='width:4rem' src="https:///wangheng3751/my-resources/blob/master/images/camera.png?raw=true" alt=""><p>⾝份证反⾯照</p></div><img style='width: 100%' id='back-result'/></div></div></div><div class="btn">提交</div></form></body></html>2.创建index.cssbody{margin: 0}.content{padding:0.5rem;display: flex;align-items: center;border-bottom: 1px #999 solid}.label{width:5rem;}.img-area{flex:1}.container{background-color:#e7e7e7;position: relative;}.container div{text-align: center;padding:0.5rem 0}.container input{opacity:0;filter:alpha(opacity=0);height: 100%;width: 100%;position: absolute;top: 0;left: 0;z-index: 9;}.container p{font-size: 0.9rem;color:#999}.btn{background-color: #4363ab;color: #fff;text-align: center;padding: 0.5rem 1rem;width:80%;border-radius: 0.2rem;margin: 2rem auto;font-weight: 600;font-size: 1.2rem}3.创建index.jswindow.onload=function(){document.getElementById("id-face").addEventListener("change", function(){onFileChange(this,"face-result","face-empty-result")});document.getElementById("id-back").addEventListener("change", function(){onFileChange(this,"back-result","back-empty-result")});document.getElementsByClassName("btn")[0].addEventListener("click", function(){ submit();});};/*** 选中图⽚时的处理* @param {*} fileObj input file元素* @param {*} el //选中后⽤于显⽰图⽚的元素ID* @param {*} btnel //未选中图⽚时显⽰的按钮区域ID*/function onFileChange(fileObj,el,btnel){var windowURL = window.URL || window.webkitURL;var dataURL;var imgObj = document.getElementById(el);document.getElementById(btnel).style.display="none";imgObj.style.display="block";if (fileObj && fileObj.files && fileObj.files[0]) {dataURL = windowURL.createObjectURL(fileObj.files[0]);imgObj.src=dataURL;} else {dataURL = fileObj.value;imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;}}/*** 将图⽚压缩后返回base64格式的数据* @param {*} image img元素* @param {*} width 压缩后图⽚宽度* @param {*} height 压缩后图⽚⾼度* @param {*} qua //图⽚质量1-100*/function compressImageTobase64(image,width,height,qua){var quality = qua ? qua / 100 : 0.8;var canvas = document.createElement("canvas"),ctx = canvas.getContext('2d');var w = image.naturalWidth,h = image.naturalHeight;canvas.width = width||w;canvas.height = height||h;ctx.drawImage(image, 0, 0, w, h, 0, 0, width||w, height||h);var data = canvas.toDataURL("image/jpeg", quality);return data;}//提交function submit(){//1、form提交//document.getElementById("mainForm").submit();//2、压缩后ajax提交var face_data=compressImageTobase64(document.getElementById("face-result"),200,100,90);var back_data=compressImageTobase64(document.getElementById("back-result"),200,100,90);var formData = new FormData();formData.append("face",face_data);formData.append("back",back_data);//需引⼊jQuery$.ajax({url:"/地址",type: 'POST',cache: false,data: formData,timeout:180000,processData: false,contentType: false,success:function(r){},error:function(r){}});}源码：总结以上所述是⼩编给⼤家介绍的html+css+js 实现拍照预览上传图⽚功能，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。
使用JS实现图片翻转效果
使⽤JS实现图⽚翻转效果.flip-container {perspective:1000px;/*设置假定⼈眼到投影平⾯的距离为1000px,只影响3D元素，不影响2D元素*/ width: 1300px;margin:0 auto;}.front,.back {width:400px;height:400px;}.flipper {width: 400px;height: 400px;border-radius: 50%;margin-left:10px;margin-bottom:120px;display: inline-block;/*div横排显⽰，变成⾏级元素*/transition:0.6s;transform-style:preserve-3d;}.front,.back {width: 400px;height: 400px;border-radius: 20%;display: inline-block;}.back {display: none;/*隐藏背⾯*/}</style></head><body><div class="flip-container"><div class="flipper"><div class="front" style="background:url(imges/4.jpg) no-repeat" "><!-- <p>正⾯</p> --></div><div class="back" style="background:url(imges/1.gif) no-repeat"><!-- <p>背⾯</p> --></div></div><div class="flipper"><div class="front" style="background:url(imges/4.jpg) no-repeat" "><!-- <p>正⾯</p> --></div><div class="back" style="background:url(imges/2.gif) no-repeat"><!-- <p>背⾯</p> --></div></div><div class="flipper"><div class="front" style="background:url(imges/4.jpg) no-repeat" "><!-- <p>正⾯</p> --></div><div class="back" style="background:url(imges/3.gif) no-repeat"><!-- <p>背⾯</p> --></div></div><div class="flipper"><div class="front" style="background:url(imges/4.jpg) no-repeat" "><!-- <p>正⾯</p> --></div><div class="back" style="background:url(imges/4.gif) no-repeat"><!-- <p>背⾯</p> --></div></div><div class="flipper"><div class="front" style="background:url(imges/4.jpg) no-repeat" "> <!-- <p>正⾯</p> --></div><div class="back" style="background:url(imges/5.gif) no-repeat"> <!-- <p>背⾯</p> --></div></div><div class="flipper"><div class="front" style="background:url(imges/4.jpg) no-repeat" "> <!-- <p>正⾯</p> --></div><div class="back" style="background:url(imges/6.gif) no-repeat"> <!-- <p>背⾯</p> --></div></div></div><script>$(function(){$(".flipper").hover(function(){ //⿏标移动的function$(this).css("transform","rotateY(180deg)");//⿏标移上去旋转180度var n=$(this).index(); //找到⿏标经过的flipper$(".back").eq(n).css("display","inline-block"); //让back显⽰出来$(".front").eq(n).hide(); //隐藏front},function(){$(this).css("transform","rotateY(0deg)"); //⿏标移开让旋转度数归零var n=$(this).index();$(".front").eq(n).css("display","inline-block");$(".back").eq(n).hide();})})</script>。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "/TR/html4/strict.dtd"><html><head><title>10款动感图片展示js代码-效果预览(10)</title><meta http-equiv="imagetoolbar" content="no"><style type="text/css">body {background: #222;overflow: hidden;left: 0;top: 0;width: 100%;height: 100%;margin: 0;padding: 0;}#screen span {position:absolute;overflow:hidden;border:#FFF solid 1px;background:#FFF;}#screen img{position:absolute;left:-32px;top:-32px;cursor: pointer;}#caption, #title{color: #FFF;font-family: georgia, 'times new roman', times, veronica, serif;font-size: 1em;text-align: center;}#caption b {font-size: 2em;}</style><script type="text/javascript"><!--window.onerror = new Function("return true");var obj = [];var scr;var spa;var img;var Wi;var Hi;var wi;var hi;var Sx;var Sy;var M;var xm;var ym;var xb = 0;var yb = 0;var ob = - 1;var cl = false;/* needed in standard mode */px = function(x){return Math.round(x) + "px";}/* center image - do not resize for perf. reason */img_center = function(o){with(img[o]){style.left = px( - (width - Wi) / 2);style.top = px( - (height - Hi) / 2);}}//////////////////////////////////////////////////////////var Nx = 4; //size grid xvar Ny = 4; //size grid yvar Tx = 3; // image widthvar Ty = 3; // image heightvar Mg = 40; // marginvar SP = 1; // speed//////////////////////////////////////////////////////////function Cobj(o, x, y){this.o = o;this.ix = Math.min(Nx - Tx, Math.max(0, Math.round(x - (Tx / 2)))); this.iy = Math.min(Ny - Ty, Math.max(0, Math.round(y - (Ty / 2)))); this.li = ((this.ix * M + this.ix * Sx) - (x * M + x * Sx)) / SP;this.ti = ((this.iy * M + this.iy * Sy) - (y * M + y * Sy)) / SP;this.l = 0;this.w = 0;this.h = 0;this.s = 0;this.mv = false;this.spa = spa[o].style;this.img = img[o];this.txt = img[o].alt;img[o].alt = "";/* zooming loop */this.zoom = function(){with(this){l += li * s;t += ti * s;w += wi * s;h += hi * s;if ((s > 0 && w < Wi) || (s < 0 && w > Sx)) {/* force window.event */window.focus();/* loop */setTimeout("obj[" + o + "].zoom()", 16);}else{/* finished */mv = false;/* set final position */if (s > 0){l = ix * M + ix * Sx;t = iy * M + iy * Sy;w = Wi;h = Hi;}else{l = x * M + x * Sx;t = y * M + y * Sy;w = Sx;h = Sy;}}/* html animation */with(spa){left = px(l);top = px(t);width = px(w);height = px(h);zIndex = Math.round(w);}}}this.click = function(){with(this){img_center(o);/* zooming logic */if ( ! mv || cl){if (s > 0){if (cl || Math.abs(xm - xb) > Sx * .4 || Math.abs(ym - yb) > Sy * .4) {s = - 2;mv = true;zoom();cap.innerHTML = txt;}}else{if (cl || ob != o){if (ob >= 0){with(obj[ob]){s = - 2;mv = true;zoom();}}ob = o;s = 1;xb = xm;yb = ym;mv = true;zoom();cap.innerHTML = txt;}}}}}/* hook up events */img[o].onmouseover = img[o].onmousemove = img[o].onmouseout = new Function("cl=false;obj[" + o + "].click()");img[o].onclick = new Function("cl=true;obj[" + o + "].click()");img[o].onload = new Function("img_center(" + o + ")");/* initial display */this.zoom();}/* mouse */document.onmousemove = function(e){if ( ! e){e = window.event;}xm = (e.x || e.clientX);ym = (e.y || e.clientY);}/* init */function load(){/* html elements */scr = document.getElementById("screen");spa = scr.getElementsByTagName("span");img = scr.getElementsByTagName("img");cap = document.getElementById("caption");/* mouseover border */document.getElementById("border").onmouseover = function(){cl = true;if(ob >= 0 && obj[ob].s > 0) obj[ob].click();ob = -1;}/* global variables */W = parseInt(scr.style.width);H = parseInt(scr.style.height);M = W / Mg;Sx = (W - (Nx - 1) * M) / Nx;Sy = (H - (Ny - 1) * M) / Ny;Wi = Tx * Sx + (Tx - 1) * M;Hi = Ty * Sy + (Ty - 1) * M;SP = M * Tx * SP;wi = (Wi - Sx) / SP;hi = (Hi - Sy) / SP;/* create objects */for (k = 0, i = 0; i < Nx; i ++){for (j = 0; j < Ny; j ++){obj[k] = new Cobj(k ++, i, j);}}}//--></script></head><body><div style="position: absolute; left: 50%; top: 50%;"><div id="title" style="position: absolute; width: 440px; height: 40px; left: -220px; top: -200px;"></div><div id="border" style="border: 1px solid rgb(85, 85, 85); background: rgb(0, 0, 0) none repeat scroll 0%; position: absolute; width: 440px; height: 340px; left: -220px; top: -170px; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;"></div><div id="screen" style="background: rgb(0, 0, 0) none repeat scroll 0%; position: absolute; width: 400px; height: 300px; left: -200px; top: -150px; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;"><span style="left: 0px; top: 0px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="slide-M_data/im6.jpg" alt=""></span><span style="left: 0px; top: 78px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -8px;" src="slide-M_data/im2.jpg" alt=""></span><span style="left: 0px; top: 155px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="slide-M_data/im3.jpg" alt=""></span><span style="left: 0px; top: 233px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="slide-M_data/im4.jpg" alt=""></span><span style="left: 103px; top: 0px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="slide-M_data/im5.jpg" alt=""></span><span style="left: 103px; top: 78px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="slide-M_data/im1.jpg" alt=""></span><span style="left: 103px; top: 155px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="slide-M_data/im7.jpg" alt=""></span><span style="left: 103px; top: 233px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="slide-M_data/im18.jpg" alt=""></span><span style="left: 205px; top: 0px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="slide-M_data/im8.jpg" alt=""></span><span style="left: 205px; top: 78px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="slide-M_data/im10.jpg" alt=""></span><span style="left: 205px; top: 155px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="slide-M_data/im12.jpg" alt=""></span><span style="left: 205px; top: 233px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="slide-M_data/im17.jpg" alt=""></span><span style="left: 308px; top: 0px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="slide-M_data/im14.jpg" alt=""></span><span style="left: 308px; top: 78px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="slide-M_data/im15.jpg" alt=""></span><span style="left: 308px; top: 155px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="slide-M_data/im16.jpg" alt=""></span><span style="left: 308px; top: 233px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="slide-M_data/im9.jpg" alt=""></span></div><div id="caption" style="position: absolute; width: 440px; height: 60px; left: -220px; top: 175px;"><b>carefully</b> weight the options</div></div><script type="text/javascript"><!--// starterload();//--></script><SPAN class=spanclass style="DISPLAY: none"><script>document.write("<imgsrc=/newcount/count.php?channel=135&screen="+screen.width+"* " +screen.height+"&refer="+escape(document.referrer)+" border=0 width=0 height=0>");</script><script type="text/javascript" src="/wzcount/artbrowse.php?id=1421645&response=1"></script> </SPAN></body></html>。