• JS 点击弹出图片/ 仿QQ商城点击左右滚动幻灯片/ 相册模块,点击弹出图片,并左右滚动幻灯片


    1, 点击弹出图片

     <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jQuery实现的很炫很酷的弹出层效果</title>
    <style type="text/css">
    .zxx_list_title{background:#eeeeee; border:1px solid #cccccc; padding:1em;}
    .zxx_list_content{padding:1em;}
    #tinybox{position:absolute; display:none; background:#ffffff url(../image/preload.gif) no-repeat 50% 50%; border:10px solid #e3e3e3; z-index:2000;}  --------------//注,不要框框将下划线选中的去掉即可!
    #tinymask{position:absolute; display:none; top:0; left:0; height:100%; 100%; background:#000000; z-index:1500;}
    #tinycontent{background:#ffffff; font-size:1.1em;}
    </style>
    <script type="text/javascript" src="../js/tinybox.js"></script>
    </head>

    <body>

    <div class="zxx_list_title"><b>图片</b><a class="ml20" href="#zhangxinxu" id="click_test2">效果预览</a></div>

    <script type="text/javascript">
    var content2 = "<img width='640' height='466' src='http://image.zhangxinxu.com/image/study/s/mm10.jpg' />";
    T$('click_test2').onclick = function(){
    TINY.box.show(content2,0,0,0,1
    )};
    </script>
    </body>
    </html>

    点击弹出图片  插件

    插件下载:

    http://files.cnblogs.com/xiexy/blowUpPicture.rar

    2,仿QQ商城点击左右滚动幻灯片

    下面是效果图:

    仿QQ商城点击左右滚动幻灯片

    插件下载:

    http://files.cnblogs.com/xiexy/fangqqhuandengpian.rar

    3, 相册模块,点击弹出图片,并左右滚动幻灯片

    下面是效果图:

    相册模块,点击弹出图片,并左右滚动幻灯片

    插件下载:

    http://files.cnblogs.com/xiexy/danchuhuangdengpian.rar

    到此为止,主要为自己做备忘,同时方便有需要的人。呵呵!

  • 相关阅读:
    Android 监听电量的状态
    2017.1-TOP5 Android开源库
    Android实践 -- Android蓝牙设置连接
    Android ListView滚动到指定的位置
    软件原型设计工具
    plupload+struts2实现文件上传下载
    ORACLE 更改username
    单词反转实现
    FatMouse&#39; Trade(杭电1009)
    JS-JavaScript学习笔记(一)
  • 原文地址:https://www.cnblogs.com/xiexy/p/4019009.html
Copyright © 2020-2023  润新知