W - BMy Wheels

内页模块

常用参数方法

$('.xxx').slick({
　fade: true, // 淡入淡出
　vertical: true, //垂直方向
　autoplay: true, // 自动播放
　speed: 800, // 过度速度
　draggable: false, //启用桌面拖动
　dots: true, // 圆点
　adaptiveHeight: true, //自动高度
　touchThreshold: 10, //滑动切换阈值，即滑动多少像素后切换
　slidesToShow: 2, // 显示个数
　slidesToScroll: 2, // 滚动个数
});

$('.xxx').slick('unslick');
unslick() // 销毁 slick
slickNext() // 切换下一张
slickPrev() // 切换上一张
slickPause() // 暂停自动播放
slickPlay() // 开始自动播放
slickGoTo() // 切换到第 x 张
slickCurrentSlide() // 返回当前幻灯片索引

弹出层按钮

测试视频1 图片按钮

测试视频2

TAB-选项卡

Tab_按钮
Tab_按钮

content_内容1
content_内容2

页码

| < << 1 2 3 >> | >

.fix-bar { z-index:55; position:fixed; right:0; bottom:20%; .item{ width: 50px; height: 51px; position: relative; border-bottom: 1px solid #ddd; &:nth-child(4){ span{ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAA6ElEQVRYhe2WURWDIBSGF8EIi2AEIxiBCEawgRGIYIRFMIIRjPDtAdgcApOJzAe+c3jx4P0/vVeOt1uhcCWABugBecIagDYU3pEH4ROYMwksPoE2g8REqA2rVqQWWXTdKmYgU8zEJtgrgXo9wrpWoSb4l2AJ3K16DTD5BAybPgF1hMgDqF3BZsM3AcPoeIJ6XWhn8Ghv3CtgkA4RwXtQJ6BziA6oVmyIFTAMWAOE+nQ/BiwUfFTgJeK4d1dwKgF0kNDB0edGCoFDFIEicFmBOVP+7BMQmQR6p4CWaFEnmjxhhX9KC4V/8QQ031CD957O8AAAAABJRU5ErkJggg==); background-size: 26px; } } &:nth-child(3){ span{ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3FpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDphN2RiMDJkNS1hMzkyLWQzNGQtOWJhMS0wZjEzZGM4OGExNTQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NUMzQjlBMDMwNDkwMTFFODkzM0RDQjRFMDA2OTI3OUMiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NUMzQjlBMDIwNDkwMTFFODkzM0RDQjRFMDA2OTI3OUMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOmQ2MTU0N2Y5LTI1YWEtNWU0Zi05NGFiLWU4MzliMjYxMzJhNSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDphN2RiMDJkNS1hMzkyLWQzNGQtOWJhMS0wZjEzZGM4OGExNTQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7I6LIKAAABg0lEQVR42qzVS0sCYRTG8VFToosZCUEXy01RUEEp1MoK2gTtI6JN3yBo3apv0Ado47JdtY9oVYsQCqJo4abAbgu7Yk7/E8cwmbF8xwM/GAbnecf3csZn27ZVpVoxgiGMIYx7nOIMF3h2fFKCXSSRRsF2rldsI+H0vFvoFM7t/9UVUvD9FdyPY7u2yiBenuOvmJkGrCBh1VayDvMIlG5UBsewYJmVBLe7BXdj2DB4HG1uwQNoMgzuxKhTcAQzlnn5sKh7/VdwFCnLWwV1gJ9g+fur6PIYLGvUUTp5IWygaHuvomYFJXi6yrE1qWsM+nUKAlb9Ko5ZCZ6z6l8Tft1/t8h4DJP+e6PXAekNaeziAzsegnNYxzKOZPEi2pFkd2zixWDB8ljTnBhaZCqedER54xM8GLytLP6bXmeRL/VPP5aQxbvhNsthC+HyflxEAb0IubzVJQ70m+dUUT3Bn9+No+xj2ohJ7atJNOu5l6naxx4e0aNdUNprn7aFOx30UH9jfwkwAMNeYzNUnv0yAAAAAElFTkSuQmCC); } } &:nth-child(2){ span{ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3FpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDphN2RiMDJkNS1hMzkyLWQzNGQtOWJhMS0wZjEzZGM4OGExNTQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QjFEQTk2QzkwNDkxMTFFOEI0RDM4NUQ5NERBQkE0NkUiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QjFEQTk2QzgwNDkxMTFFOEI0RDM4NUQ5NERBQkE0NkUiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOmQ2MTU0N2Y5LTI1YWEtNWU0Zi05NGFiLWU4MzliMjYxMzJhNSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDphN2RiMDJkNS1hMzkyLWQzNGQtOWJhMS0wZjEzZGM4OGExNTQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz41OEZfAAAAxUlEQVR42mJggIL///9XAfEBIO5koBQADVn1HxUso8Swxv/YQTS5Bt7CYeAvIOYix8Dj/3EDfnIMnIXDsBJyvRyIxbBOSiKFBYifohnoSmmyiUYz8D410uIlNEMXUmqgGpawrKLU0BIshuZTaugyqiUhJEMPYDF0CpoaGyC+Cg37QHINBWn2wJF2Z5FTChECUygpjbAWKMSGqRM0vAiBHeQkq6c4DLsPxKKMZKQAUBkJKnwdgVgfiFmB+DIQZzAyMr4GCDAAWS81MFh2b4oAAAAASUVORK5CYII=); } } em,.imgs{ position: absolute; color: #fff; top: 0; right: 0; width: 50px; height: 50px; overflow: hidden; line-height: 50px; white-space: nowrap; .tra(.8s); a{ color: #fff; } span{ width: 50px; height: 50px; } i{ width: 100px; text-align: center; } } &:hover{ em{ width: 150px; } } } .pic,#gotop{ height: 50px; width: 50px; cursor: pointer; } // 二维码 .pic{ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6Mzk2RTY5NjJEQjQ1MTFFOEFFMDdGNzI5Qjg5ODUxN0MiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6Mzk2RTY5NjNEQjQ1MTFFOEFFMDdGNzI5Qjg5ODUxN0MiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDozOTZFNjk2MERCNDUxMUU4QUUwN0Y3MjlCODk4NTE3QyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDozOTZFNjk2MURCNDUxMUU4QUUwN0Y3MjlCODk4NTE3QyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pg8l9b4AAAHmSURBVHjajJU/SwNBEMXvkgMJomDwTyNRDNiZwlYImE9gKoWAgpBGQSzsre21shDBTrQTxKCC4AdQsBBEtLBQUMGoUcnlfBvfhXFIcrvwy95mZ+fe7MzuuUEQPDuOk3CiW5H9poVtxcNPJ+iwMPbY24iIGeMaB+fgBFSBy//6wQKfA7V4H1yKOeMrByaMT08YHoNVMAni4ILqFlqo2qGYDPDBKV8wUZcsDI3ybqougWkRTbNWo02Ja7qlvXTsUmnYOtS8bq7KTVxsoSO3woTxCpZodBih2NgfMCc+1wbNHI+BPLin0lGQauM4S0d3FJCnj79wUMefliU0x37bto5tnOroolrCKC6opDUteHAmtqDGNTq5Pud8r0XxN0uUfj4CD8rO1PR4PaGBfZsnYZsBjmItnDShVCz3raqU/7SPEVXBl2yAEZAiwyCnFHeBNNkCN2AP9FFxknMjMtNP4BYsigNyrU5amTg8wmmOQz8v5F8JmYU9YJ3jFbAbcVeEWxJu0SAYAt/6SPvC6DviSLui9/lcoKB3T9XqG0hyXKaCqCYdm+3pNT6k45wI0WU/oELP8Kqs8pK/otNl9tlGtMjgl2Udz4KiGE+xEjKgomy/jOKPiL2Ux/VT1H1M3NuP/Iw1LqFfAQYA+hxftoKjfVwAAAAASUVORK5CYII=); // 微信图标 // background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAWCAYAAADeiIy1AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3FpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpkZGEzOWM2NS00ZmJjLWVmNGItOTI3Yi0wNTE5NDUwMjY4ZTUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDBCOEY1NThENTlEMTFFODlGMkFCMDU4QzIxODg1OUUiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDBCOEY1NTdENTlEMTFFODlGMkFCMDU4QzIxODg1OUUiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOmQ3OGU3OTQ5LWZjZTQtZGI0NC1iNjJiLTZhMDUxMzYyY2MyYiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpkZGEzOWM2NS00ZmJjLWVmNGItOTI3Yi0wNTE5NDUwMjY4ZTUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5PT85MAAACM0lEQVR42qTVT0hUURTH8ec02B/CcCYCg1oUQQXVIqhVKrSxRX+tTQRFEbVqU+1btQtq0bZAxRYtghY1tOqPCyGkjZDFICmWmVqZTqPlzOt75PfgcpnxvWcHPuC797135njPva8hDMPAi3Vow3EcQAtWYx6f0Yen6Ec5SBqWyLEfvSiFy8cMHmKf93xd7sUJjIXpoohjaRK1YtJ5wXcM13hxBUOqKIpxHE6SKIc+58EJnMFeFLxEXdiBS16yfuTjEl31Xjbg3HDLm7ui8fUY8eZuLJcoSz+c8vpjF+5gCKe9ucv4g3ZsVReOYiGu6RrIZjduCdLFMF7jL5q0JRbxAe/wAj/dB6yitSkS2MsK+Io92Iwc1mCV7inhI+7jge2gaB8VE7byHLq1zyYT3F/GXTTZGmVUauy+xktU0YmNqu6LKoiiompnVOU13FyqlmydCU4C67B7mHbGnmG7fnUUg2p/6+SqxqbQYRU9R1dMNUVVkXPGy+rAilfRb6lqLI/zUZ+34DEWa1Qzj0d4440vqNKSd3KM1ljDkayyjuMi5nDBq6jRtkGN7mzUXnIjU2erNGeci1l80t+2EQe10JZkk+ZXGrNZ58K+O4fwBLcxpVPCfuGEvk3tK0z0yj2PbJ3akKlzXm3T/z9tfMPBIOmHS456p3Zc/MBZ/8OXVAfeJkjyC+fc0zttFNQoJ3EEO3WwWtNM473WdbfTXEun9380U9CsJsrr2hpoDBtwHQPosYl/AgwA4EdPkGHxCfQAAAAASUVORK5CYII=); &:hover{ .imgs{ .op1(); right: 100%; } } .imgs{ .op0(); z-index: -1; position: absolute; width: 100px; height: 100px; right: -200%; top: 0; background-color: #eee; } } // 返回顶部 #gotop{ text-align: center; color: #fff; line-height: 50px; font-size: 30px; font-weight: bold; font-family: 'SimSun'; .zhuan(270deg); .tra(); } } .fix-bar .item em span,.fix-bar .pic,#gotop{ background-repeat: no-repeat; background-position: center; } // 默认颜色 .fix-bar .item i,.fix-bar .item em span,.fix-bar .pic,#gotop{ background-color: @ThemeColor; } // 悬浮的颜色 .fix-bar .item:hover i,.fix-bar .item:hover em span,.fix-bar .pic:hover,#gotop:hover{ background-color: #1273c5; }

400-123-4567

联系客服

邮箱

我的轮子

百度地图

百度分享按钮

.bdsharebuttonbox{ font-size: 0; text-align: center; a{ float: none; display: inline-block; width: 50px !important; height: 50px !important; margin: 0px!important; padding: 0 !important; .bg(); background: #666 !important; border-radius: 50%; } } .bd_weixin_popup{ height: auto !important; }

产品详情多图

.pic-slider-w{ max-width: 600px; margin: 0 auto; .t-pic-slider{ border: 1px solid #bfbfbf; margin-bottom: 20px; .slick-slide{ li{ position: relative; height: 350px; } } // 圆点样式 .slick-dots{ display: none !important; li{ &.slick-active,&:hover,&:focus{ } } } } .b-pic-slider{ padding: 0 40px; .slick-slide{ padding: 0 5px; li{ position: relative; height: 100px; border: 2px solid #eee; cursor: pointer; } } .slick-current{ li{ border-color: @ThemeColor; } } // 左右按钮 .slick-prev,.slick-next{ width: 30px; height: 100%; background: #ccc !important; } .slick-prev{ background: url(../images/b_pic_slider_l.png) no-repeat center; } .slick-next{ background: url(../images/b_pic_slider_r.png) no-repeat center; } } }

产品详情多图--上下切换

.pic-slider-w2{ max-width: 600px; margin: 0 auto; .t-pic-slider{ .w(180px); border: 1px solid #bfbfbf; margin-bottom: 20px; .slick-slide{ li{ position: relative; height: 350px; } } // 圆点样式 .slick-dots{ display: none !important; li{ &.slick-active,&:hover,&:focus{ } } } } .b-pic-slider{ width: 150px; .slick-list{ padding: 30px 0; } .slick-slide{ li{ position: relative; margin: 5px 0; height: 87px; border: 2px solid #eee; cursor: pointer; padding: 10px 0; } } .slick-current{ li{ border-color: @ThemeColor; } } // 左右按钮 .slick-prev,.slick-next{ width: 100%; height: 30px; top: inherit; .tray(0); background: #ccc !important; } .slick-prev{ left: inherit; background: url(../images/b_pic_slider_t.png) no-repeat center; } .slick-next{ right: inherit; bottom: 0; background: url(../images/b_pic_slider_b.png) no-repeat center; } } }

3D-幻灯片

// 左右按钮 .flipto-prev,.flipto-next{ position: absolute; top: 50%; width: 50px; height: 50px; font-size: 0; .tray(); background: rgba(0, 0, 0, .5); } .flipto-prev{ left: 0; } .flipto-next{ right: 0; } // 3D-偏移-左 .flipster-carousel .flip-prev{ -webkit-transform: translateX(-80%) translateZ(0) rotateY(0deg) scale(0.8); -moz-transform: translateX(-80%) translateZ(0) rotateY(0deg) scale(0.8); -o-transform: translateX(-80%) translateZ(0) rotateY(0deg) scale(0.8); -ms-transform: translateX(-80%) translateZ(0) rotateY(0deg) scale(0.8); transform: translateX(-80%) translateZ(0) rotateY(0deg) scale(0.8); } // 3D-偏移-右 .flipster-carousel .flip-next{ -webkit-transform: translateX(80%) translateZ(0) rotateY(0deg) scale(0.8); -moz-transform: translateX(80%) translateZ(0) rotateY(0deg) scale(0.8); -o-transform: translateX(80%) translateZ(0) rotateY(0deg) scale(0.8); -ms-transform: translateX(80%) translateZ(0) rotateY(0deg) scale(0.8); transform: translateX(80%) translateZ(0) rotateY(0deg) scale(0.8); }

瀑布流列表

加载更多

走马灯

.seamless-slider{ max-width: 650px; margin: 0 auto; } .str_wrap { overflow: hidden; //zoom: 1; width: 100%; font-size: 12px; line-height: 16px; position: relative; -moz-user-select: none; -khtml-user-select: none; user-select: none; background: #f6f6f6; white-space: nowrap; &.str_active{ background: #f1f1f1 } } .str_move { white-space: nowrap; position: absolute; top: 0; left: 0; cursor: move; font-size: 0 } .str_move_clone { display: inline-block; //display: inline; //zoom: 1; vertical-align: top; position: absolute; left: 100%; top: 0 } .str_vertical .str_move_clone { left: 0; top: 100% } .str_down .str_move_clone { left: 0; bottom: 100% } .str_down .str_move, .str_vertical .str_move { white-space: normal; width: 100% } .noStop .str_move, .no_drag .str_move, .str_static .str_move { cursor: inherit } .str_wrap img { max-width: none !important }

图片画廊-灯箱

.lg-outer .lg-thumb-item{ border: 2px solid #333; } .lg-outer .lg-thumb-item.active, .lg-outer .lg-thumb-item:hover{ border-color: #fff; } .lg-outer .lg-thumb-outer.lg-grab .lg-thumb-item{ position: relative; } .lg-outer .lg-thumb-item img{ position: absolute; width: auto; height: auto; max-width: 100%; max-height: 100%; top: 0; right: 0; bottom: 0; left: 0; margin: auto; object-fit:inherit; } .pic-see{ border: 1px solid #ccc; li{ a{ position: relative; display: block; width: 100%; height: 3rem; } img{ position: absolute; max-width: 100%; max-height: 100%; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } } .owl-pagination{ display: none; } // 左右按钮 .owl-buttons{ } .owl-controls .owl-buttons div{ width: 56px; height: 56px; } // 左-按钮 .owl-controls .owl-buttons .owl-prev{ left: -137px; background-image: url(../images/slider_slier_l.png); } // 右-按钮 .owl-controls .owl-buttons .owl-next{ right: -137px; background-image: url(../images/slider_slier_r.png); } }

手风琴

.Accordion { position:relative; height:276px; overflow:hidden; >li{ position:absolute; top:0px; left:0px; background-size:cover; } }

数字跳动

541058726 9999 6666

滚动条

滚动条效果
滚动条效果
滚动条效果
滚动条效果
滚动条效果
滚动条效果
滚动条效果

Fullpage

Wow

随机广告漂浮

.fix-ads { position: fixed; z-index: 999; width: 150px; height: 150px; .wb-info{ width: 100%; height: 100%; } .close{ position: absolute; top: 0; right: 0; width: 25px; height: 25px; line-height: 23px; padding: 0 5px; text-align: right; font-size: 20px; color: #fff; background: rgba(0, 0, 0, .5); &::before, &::after{ position: absolute; top: 50%; left: 50%; width: 14px; height: 2px; background: #fff; content: ''; .tra(.5s); margin: -2px 0 0 -6px; // .tray(); } &::before{ .zhuan(45deg); } &::after{ .zhuan(-45deg); } } }