<javascript实现3D切换焦点图_javascript技巧
您的当前位置:首页正文

javascript实现3D切换焦点图_javascript技巧

2023-12-06 来源:六三科技网
做了一个用鼠标拖拽配合 CSS3 的小尝试,截图如下:

熟悉拖拽效果的朋友应该不会陌生鼠标按住以后,左右拖动的实现方式。这个小demo里尝试的是把CSS3中的相关知识点运用到图片展示中,当拖动图片时,显示出立体的感觉~~

直接代码如下:

#list{ width:400px; height:440px; margin:30px auto 30px; position:relative;z-index:500;}#list li{height:40px;width:400px; position:relative;cursor:pointer;-webkit-perspective:800px; }#list li div{height:40px;width:400px; -webkit-transform-style:preserve-3d;-webkit-backface-visibility:hidden;position:relative;-webkit-transform:translateZ(-200px);-webkit-transform:50ms all linear;}#list span{height:40px; width:400px; position:absolute;left:0;top:0; overflow:hidden;}#list div span:nth-child(1){background:url(img/1.jpg) no-repeat; -webkit-transform:translateZ(200px);}#list div span:nth-child(2){background:url(img/2.jpg) no-repeat;-webkit-transform-origin:right;-webkit-transform:translateZ(200px) rotateY(-90deg);}#list div span:nth-child(3){background:url(img/3.jpg) no-repeat;-webkit-transform-origin:right;-webkit-transform:translateZ(-200px);}#list div span:nth-child(4){background:url(img/4.jpg) no-repeat;-webkit-transform-origin:left;-webkit-transform:translateZ(200px) rotateY(90deg);}#list em{ width:400px;height:400px; position:absolute;left:0;background:#666;}#list li em:nth-of-type(1){-webkit-transform-origin:top;-webkit-transform:translateZ(200px) rotateX(-90deg); top:0;}#list li em:nth-of-type(2){-webkit-transform-origin:bottom;-webkit-transform:translateZ(200px) rotateX(90deg); bottom:0;}#list li:nth-last-child(1){ z-index:10;}#list li:nth-last-child(2){ z-index:20;}#list li:nth-last-child(3){ z-index:30;}#list li:nth-last-child(4){ z-index:40;}#list li:nth-last-child(5){ z-index:50;}#list li:nth-last-child(6){ z-index:60;}#list li:nth-child(2) span{ background-position:0 -40px;}#list li:nth-child(3) span{ background-position:0 -80px;}#list li:nth-child(4) span{ background-position:0 -120px;}#list li:nth-child(5) span{ background-position:0 -160px;}#list li:nth-child(6) span{ background-position:0 -200px;}#list li:nth-child(7) span{ background-position:0 -240px;}#list li:nth-child(8) span{ background-position:0 -280px;}#list li:nth-child(9) span{ background-position:0 -320px;}#list li:nth-child(10) span{ background-position:0 -360px;}#list li:nth-child(11) span{ background-position:0 -400px;}#btns{ width:130px; margin:0 auto;}#btns li{ width:20px;height:20px;background:#fff; font-size:14px; font-weight:bold; text-align:center; line-height:20px; float:left; color:#f60; margin:0 3px; cursor:pointer;}#btns .active{ background:#f60;color:#fff;}

HTML

 
    1. 1
    2. 2
    3. 3
    4. 4

    JAVASCRIPT

    这效果只是一个尝试,如有需要的朋友,可直接在下面留言,发送源码。

    小编还为您整理了以下内容,可能对您也有帮助:

    javascript 焦点图

    麻烦再详细描述下问题,是不会插入呢?还是自己不会用脚本来写?

    如果是不会插入,那么你应该是用的已经写好的代码咯?如果你对前端一窍不通,那么确定好已经做好的特效尺寸,然后根据说明文档,按步骤操作即可,如果你找到的代码没有任何说明,那就忘了它吧,去懒人图库的JS代码块找一找合适的焦点图特效,里面都会有比较详细的使用说明,但是要仔细看好,多大数都是用jQuery库的基础上写的特效。

    如果是不会写代码,那么给你个思路吧,首先确定好你的焦点图的动画效果,假设是最简单的左右无缝滚动切换,先把html结构写好,我一般是用的无序列表结构,个人认为是比较符合语义化的,设置父级标签的定位为相对定位,然后,动态设置子标签的定位为绝对定位,这个是具备可访问性的,但是具体情况还要具体分析。接下来就是设置子标签的初始化位置,然后用定时器触发滚动动画,让每一个子标签的位置都向同一方向平移,但是记得如果要实现无缝滚动,要在每次平移后,重新给每个子标签的位置排序。。。如果弄不明白,找个样例研究下吧

    javascript 怎样实现图片动态切换

    思路:使用javascript定时器函数setTimeout()每隔一定的毫秒间隔数执行动作,在执行的动作中循环替换图片的src属性。树立演示如下:

    1、HTML结构

    <img src="1.png" id="test">

    2、javascript代码

    function change(n){

    if(n>5) n=1;  // 一共5张图片,所以循环替换

    document.getElementById("test").setAttribute("src", n+".png");

    n++;

    setTimeout("change("+n+")",1000);

    }

    window.onload = function(){

    setTimeout("change(1)", 1000);

    }

    3、效果演示

    js图片自动切换,鼠标放上并自动停止切换

    试试这个焦点图切换

    有12345数字一起切换

    鼠标点一下数字会变换到另一张图片,不点就会自动换

    里面有教程和源码

    参考资料:http://www.blueidea.com/common/shoutbox/redir.asp?1=p&id=10895

    Jquery幻灯片特效代码分享--打开页面随机选择切换方式(3)

    这篇文章主要介绍了jQuery实现幻灯片焦点图,可实现非常炫目时尚的幻灯片效果,非常具有实用价值,基本能满足你在网页上使用幻灯片(焦点图)效果,需要的朋友可以参考下
    幻灯片效果描述:与前两节不同的是,这款特效可以打开页面随机选择切换方式(方向)

    运行效果截图如下:
    具体代码如下
    <head>
    <meta
    http-equiv="Content-Type"
    content="text/html;
    charset=gb2312"
    />
    <title>Jquery幻灯片焦点图插件</title>
    <script
    src="js/jquery-1.4a2.min.js"
    type="text/javascript"></script>
    <script
    src="js/jquery.-1.2.1.min.js"
    type="text/javascript"></script>
    <script
    type="text/javascript">
    //打开页面随机选择
    切换方式(方向),怕增大KinSlideshow.js文件
    就没把随机切换写到里面。
    //使用时如有需要随机自己写在前面是一样的。而且还可以只固定随机切换哪几种。
    var
    moveStyle
    var
    rand
    =parseInt(Math.random()*4)
    switch(rand){
    case
    0:
    moveStyle="left"
    ;break;
    case
    1:
    moveStyle="right"
    ;break;
    case
    2:
    moveStyle="down"
    ;break;
    case
    3:
    moveStyle="up"
    ;break;
    }
    $(function(){
    $("#KinSlideshow1").KinSlideshow({moveStyle:moveStyle});
    })
    </script>
    <style
    type="text/css">
    #KinSlideshow{
    overflow:hidden;
    width:600px;
    height:300px;}
    </style>
    </head>
    <body>
    <h2>打开页面随机选择切换方式(方向)---刷新看看
    ^_^</h2>
    <div
    id="KinSlideshow1"
    style="visibility:hidden;">
    <a
    target="_blank"><img
    src="images/11.png"
    alt="Jquery幻灯片焦点图插件"
    width="600"
    height="300"
    /></a>
    <a
    target="_blank"><img
    src="images/23.png"
    alt="Jquery幻灯片焦点图插件"
    width="600"
    height="300"
    /></a>
    <a
    target="_blank"><img
    src="images/4.jpg"
    alt="Jquery幻灯片焦点图插件"
    width="600"
    height="300"
    /></a>
    <a
    target="_blank"><img
    src="images/5.jpg"
    alt="Jquery幻灯片焦点图插件"
    width="600"
    height="300"
    /></a>
    <a
    target="_blank"><img
    src="images/22.png"
    alt="Jquery幻灯片焦点图插件"
    width="600"
    height="300"
    /></a>
    </div>
    </body>
    </html>
    希望本文所述对大家的Jquery特效设计有所帮助。

    Jquery幻灯片特效代码分享--打开页面随机选择切换方式(3)

    这篇文章主要介绍了jQuery实现幻灯片焦点图,可实现非常炫目时尚的幻灯片效果,非常具有实用价值,基本能满足你在网页上使用幻灯片(焦点图)效果,需要的朋友可以参考下
    幻灯片效果描述:与前两节不同的是,这款特效可以打开页面随机选择切换方式(方向)

    运行效果截图如下:
    具体代码如下
    <head>
    <meta
    http-equiv="Content-Type"
    content="text/html;
    charset=gb2312"
    />
    <title>Jquery幻灯片焦点图插件</title>
    <script
    src="js/jquery-1.4a2.min.js"
    type="text/javascript"></script>
    <script
    src="js/jquery.-1.2.1.min.js"
    type="text/javascript"></script>
    <script
    type="text/javascript">
    //打开页面随机选择
    切换方式(方向),怕增大KinSlideshow.js文件
    就没把随机切换写到里面。
    //使用时如有需要随机自己写在前面是一样的。而且还可以只固定随机切换哪几种。
    var
    moveStyle
    var
    rand
    =parseInt(Math.random()*4)
    switch(rand){
    case
    0:
    moveStyle="left"
    ;break;
    case
    1:
    moveStyle="right"
    ;break;
    case
    2:
    moveStyle="down"
    ;break;
    case
    3:
    moveStyle="up"
    ;break;
    }
    $(function(){
    $("#KinSlideshow1").KinSlideshow({moveStyle:moveStyle});
    })
    </script>
    <style
    type="text/css">
    #KinSlideshow{
    overflow:hidden;
    width:600px;
    height:300px;}
    </style>
    </head>
    <body>
    <h2>打开页面随机选择切换方式(方向)---刷新看看
    ^_^</h2>
    <div
    id="KinSlideshow1"
    style="visibility:hidden;">
    <a
    target="_blank"><img
    src="images/11.png"
    alt="Jquery幻灯片焦点图插件"
    width="600"
    height="300"
    /></a>
    <a
    target="_blank"><img
    src="images/23.png"
    alt="Jquery幻灯片焦点图插件"
    width="600"
    height="300"
    /></a>
    <a
    target="_blank"><img
    src="images/4.jpg"
    alt="Jquery幻灯片焦点图插件"
    width="600"
    height="300"
    /></a>
    <a
    target="_blank"><img
    src="images/5.jpg"
    alt="Jquery幻灯片焦点图插件"
    width="600"
    height="300"
    /></a>
    <a
    target="_blank"><img
    src="images/22.png"
    alt="Jquery幻灯片焦点图插件"
    width="600"
    height="300"
    /></a>
    </div>
    </body>
    </html>
    希望本文所述对大家的Jquery特效设计有所帮助。

    求javascript简单图片切换代码,如图下

    <style type="text/css">

    #con {width:400px; height:300px; margin:20px auto; border:1px solid #ccc; position:relative; overflow:hidden;}

    #con ul.img {position:absolute;}

    #con ul.img li {float:left; width:400px; height:300px; overflow:hidden;}

    #con ul.btn {position:absolute; text-align:right; width:400px; height:16px; left:0; bottom:5px;}

    #con p {position:absolute; width:200px; height:16px; left:5px; bottom:5px; text-align:left;}

    #con ul.btn li, #con p span {display:inline-block; *display:inline; *zoom:1; padding:0 5px; margin-right:5px; height:16px; line-height:16px; background:#333; color:#fff; text-align:center; cursor:pointer;}

    #con ul.btn li.on {background:#666;}

    </style>

    <script type="text/javascript">

    window.onload=function () {

    var oCon = document.getElementById('con');

    var aUl = oCon.getElementsByTagName('ul');

    var aImgLi = aUl[0].getElementsByTagName('li');

    var aBtnLi = aUl[1].getElementsByTagName('li');

    var aBtnSpan = oCon.getElementsByTagName('span');

    var index = 0;

    var timer;

    aUl[0].style.width = aImgLi[0].offsetWidth*(aImgLi.length)+'px';

    for(var i=0; i<aImgLi.length; i++) {

    aImgLi[i].index = aBtnLi[i].index = i;

    aBtnLi[i].onclick = function() {

    index = this.index;

    showImg(index);

    };

    }

    function showImg(idx) {

    for(var i=0; i<aImgLi.length; i++) {

    if(aBtnLi[i].index == idx) {

    aBtnLi[i].className = 'on';

    } else {aBtnLi[i].className = '';}

    }

    aUl[0].style.left = -idx*aImgLi[0].offsetWidth+'px';

    index++;

    if(index == aImgLi.length) {index = 0;}

    }

    oCon.onmouseover = function() {clearInterval(timer);};

    oCon.onmouseout = function() {

    timer = setInterval(function() {

    showImg(index);

    }, 3000);

    };

    aBtnSpan[0].onclick = function() {

    if(index == 0) {index = aImgLi.length-2;}

    else if(index == 1) {index = aImgLi.length-1;}

    else {index -= 2;}

    showImg(index);

    };

    aBtnSpan[1].onclick = function() {

    showImg(index);

    };

    showImg(index);

    timer = setInterval(function() {

    showImg(index);

    }, 3000);

    };

    </script>

    </head>

    <body>

    <div class="wrapper">

    <h1>原生javascript效果:焦点图</h1>

    <div id="con">

    <ul class="img">

    <li><a href="#"><img src="img/01.jpg" /></a></li>

    <li><a href="#"><img src="img/02.jpg" /></a></li>

    <li><a href="#"><img src="img/03.jpg" /></a></li>

    <li><a href="#"><img src="img/04.jpg" /></a></li>

    </ul>

    <ul class="btn">

    <li>1</li>

    <li>2</li>

    <li>3</li>

    <li>4</li>

    </ul>

    <p><span><</span><span>></span></p>

    </div>

    </div>追问能不能详细一点

    如何使用javascript实现网页上相册的3D特效

    <html>

    <head>

    </head>

    <body>

    <script type="text/javascript">

    var createDiv = document.createElement("div");

    //createDiv.innerHTML = "adasas"

    createDiv.style.height = "122px";

    createDiv.style.width = "122px";

    document.body.appendChild(createDiv);

    createDiv.style.position = "absolute";

    createDiv.style.overflow = "hidden";

    createDiv.style.top = "200px";

    createDiv.style.left = "200px";

    var createImg = document.createElement("img");

    createImg.setAttribute("src","https://gss0.bdstatic.com/70cFsjip0QIZ8tyhnq/img/logo-.gif");

    createImg.height = 122;

    createImg.width = 122;

    createDiv.appendChild(createImg);

    var isenlarge = 0;

    createImg.onmouseover = function()

    {

    isenlarge = 1;

    enlarge();

    };

    createImg.onmouseout = function()

    {

    isenlarge = 0;

    narrow();

    };

    var w = 122;

    var h = 122;

    var a = 0;

    var ctr1 = setInterval("move()",17);

    function move()

    {

    if ( a >= 90 && a <= 270)

    {

    w > 80 ? w-- : 0;

    h > 80 ? h-- : 0;

    }

    else

    {

    w < 130? w++ : 0;

    h < 130? h++ : 0;

    }

    createDiv.style.height = h;

    createDiv.style.width = w;

    createImg.height = h;

    createImg.width = w;

    createDiv.style.top = 500 + Math.sin( a * 0.017453293) * 100;

    createDiv.style.left = 400 + Math.cos( a * 0.017453293) * 300 ;

    a += 1;

    a >= 360? a = 0 : 0;

    }

    function enlarge()

    {

    if ( createImg.height < 250 && createImg.width < 250 && isenlarge == 1 )

    {

    clearInterval( ctr1);

    createImg.height += 3;

    createImg.width += 3;

    createDiv.style.height = createImg.height;

    createDiv.style.width = createImg.width;

    setTimeout( "enlarge()", 30);

    }

    }

    function narrow()

    {

    if ( createImg.height > h && createImg.width > w && isenlarge == 0)

    {

    createImg.height -= 3;

    createImg.width -= 3;

    createImg.height < h? createImg.height = h : 0;

    createImg.width < w? createImg.width = w : 0

    createDiv.style.height = createImg.height;

    createDiv.style.width = createImg.width;

    setTimeout( "narrow()", 30);

    }

    else

    {

    ctr1 = setInterval("move()",17);

    }

    }

    </script>

    </body>

    </html>

    IE下目测没问题吧,我写的不规范的。。外观也很丑- -!

    六三科技网还为您提供以下相关内容希望对您有帮助:

    javascript 怎样实现图片动态切换

    思路:使用javascript定时器函数setTimeout()每隔一定的毫秒间隔数执行动作,在执行的动作中循环替换图片的src属性。树立演示如下:1、HTML结构 2、javascript代码 function change(n){if(n&gt;5) n=1; // 一共5张图片,...

    Jquery幻灯片特效代码分享--打开页面随机选择切换方式(3)

    type="text/javascript"&gt; //打开页面随机选择 切换方式(方向),怕增大KinSlideshow.js文件 就没把随机切换写到里面。//使用时如有需要随机自己写在前面是一样的。而且还可以只固定随机切换哪几种。var moveStyle var ran...

    javascript 焦点图

    如果是不会写代码,那么给你个思路吧,首先确定好你的焦点图的动画效果,假设是最简单的左右无缝滚动切换,先把html结构写好,我一般是用的无序列表结构,个人认为是比较符合语义化的,设置父级标签的定位为相对定位,然后,...

    求javascript简单图片切换代码,如图下

    con {width:400px; height:300px; margin:20px auto; border:1px solid #ccc; position:relative; overflow:hidden;} con ul.img {position:absolute;} con ul.img li {float:left; width:400px; height:300px; o...

    如何使用javascript实现网页上相册的3D特效

    var createDiv = document.createElement("div");//createDiv.innerHTML = "adasas"createDiv.style.height = "122px";createDiv.style.width = "122px";document.body.appendChild(createDiv);createDiv.style.posit...

    网页设计中如何实现图片的自动切换,好想动画效果似的,但不是插入的视频...

    焦点图效果是javascript代码 &lt;!-- var focus_width=860 var focus_height=410 var text_height=0 var swf_height = focus_height+text_height var pics='images/201101.jpg|images/201102.jpg|images/201103.jpg|images...

    HTML5如何在网页中实现3D效果

    触发方法1:告知浏览器变形方式 -webkit-transform-style:preserve-3d;Tips:IE不支持三维变形,在移动端,绝大多数的浏览器均为WebKit内核,因此,在此句代码之前需要书写-webkit-的前缀内核。Tips:不要为body元素设置-webkit...

    向左滑动js焦点图原理

    1、红框为一个容器DIV,overflow:hidden;2、容器里边有三个横向排列的图片,可以用UL&gt;LI来做。由于容器的OVERFLOW所以2和3是看不见的。3、下图,调整容器里边元素(如UL)的左外边距为负值,达到图二的效果。4、之后就...

    Flash和JS实现的图片幻灯片切换特效

    &lt;!--焦点图结束--&gt; 文件内容如下。if(typeof deconcept=="undefined"){var deconcept=new Object();} if(typeof deconcept.util=="undefined"){deconcept.util=new Object();} if(typeof deconcept.SWFObjectUtil==...

    dreamweaver8做网页,焦点图代码怎么放

    1.打开软件dreamweaver8写如下代码,如图:调用CSS样式:调用JS插件代码: &lt;!--效果html开始--&gt; (function(){ var aPage = $('#main .page a');//分页按钮 var aImg = $('#main .box img...

    本文如未解决您的问题请添加抖音号:51dongshi(抖音搜索懂视),直接咨询即可。

    Top