六边形蜂窝 java,css3实现的六边形蜂窝状图片（自适应）

插件描述：鼠标悬停显示六变形矩阵，蜂窝状图片

更新时间：2020-01-02 22:13:12//页面渲染

var str = ''

for (var i = 0; i

str += '

' +

'' +

内容

' +

};

$('.imgBox').html(str);

//显示效果

$('.imgBox>.hex').hover(function(e) {

$(this).parent().find('.img').css('opacity', .2);

$(this).siblings('.hex').find('.mark').hide();

$(this).parent().find('.text_box').hide();

$(this).find('.img').css('opacity', 1);

$(this).find('.mark').show();

$(this).find('.text_box').show();

var domLeft = e.target.offsetParent.offsetLeft;

var domLeft = e.target.x;

var winWidth = document.body.clientWidth;

var markWidth = $(this).find('.text_box').width();

if (winWidth - domLeft <= markWidth) {

$(this).find('.text_box').css({

left: 'unset',

right: '114%'

});

};

}, function() {

$(this).parent().find('.img').css('opacity', 1);

$(this).parent().find('.mark').hide();

$(this).parent().find('.text_box').hide();

})

六边形蜂窝 java,css3实现的六边形蜂窝状图片（自适应）相关推荐

Vue2版本六边形蜂窝 Demo
效果图展示 Code details <template><div class="container"><div class="block& ...
Java和Spring的六边形架构：在代码中体现“六角形建筑”
前言: 术语"六角形建筑"已经存在很长时间了.足够长的时间,这个主题的主要资源已经脱机了一段时间,并且直到最近才从档案中解救出来. 但是,我发现关于如何以这种体系结构样式实际实现应 ...
html中怎么写正六边形,如何用css画正六边形？用css画正六边形的两种方法（代码实例）...
本章给大家介绍如何用css画正六边形?用css画正六边形的两种方法(代码实例).有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 在之前要先了解一下正六边形内角和边的关系,正六边形的每个 ...
狂神说Java CSS3讲解综合代码
狂神说Java CSS3讲解综合代码 <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/ ...
网页制作使用CSS样式制作轮播教程,静态网页设计与开发 1.案例——CSS3制作图片轮播图（4）使用纯CSS3代码实现简单的图片轮播——分步骤实现.docx...
使用纯CSS3代码实现简单的图片轮播设计思路: 以5张图片为例: 1.基本布局: 通过设置每张图片的尺寸和父容器的尺寸,从而将5张图片横向并排放入一个div容器(#photos)内.所有图片设置统一 ...
java多图片上传json_[Java教程]SpringMVC框架五：图片上传与JSON交互
[Java教程]SpringMVC框架五:图片上传与JSON交互 0 2018-08-07 22:00:42 在正式图片上传之前,先处理一个细节问题: 每一次发布项目,Tomcat都会重新解压war包 ...
java canvas 画图片_[Java教程][HTML5] Canvas绘制简单图片
[Java教程][HTML5] Canvas绘制简单图片 0 2016-05-13 13:00:04 获取Image对象,new出来定义Image对象的src属性,参数:图片路径定义Image对象 ...
java生成图片url_Java Springboot如何基于图片生成下载链接
现有一些图片在服务器上的链接,在浏览器中打开这些链接是直接显示在浏览器页面的形式. 现在需要生成这些图片的单独下载以及打包下载链接,即在浏览器中打开下载链接后弹出下载框提示下载.由于前端存在跨域问题, ...
使用java concurrent处理异步加载图片功能
转载:http://marshal.easymorse.com/archives/3081 java5开始,增加了concurrent api,用于并发处理.比如起多个线程并发从网络上下载图片,然后在 ...

六边形蜂窝 java,css3实现的六边形蜂窝状图片（自适应）

六边形蜂窝 java,css3实现的六边形蜂窝状图片（自适应）相关推荐

最新文章

热门文章